@morya-ui/mcp 0.4.2 → 0.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/catalog.json +223 -223
- package/data/example-coverage.json +2 -2
- package/data/golden-pages/dashboard-page.vue +10 -10
- package/data/golden-pages/detail-page.vue +3 -3
- package/data/golden-pages/form-in-dialog.vue +1 -1
- package/data/golden-pages/landing-page.vue +2 -2
- package/data/golden-pages/list-page-dense.vue +1 -1
- package/data/golden-pages/list-page-rail.vue +1 -1
- package/data/golden-pages/list-page.vue +1 -1
- package/dist/__tests__/tools.test.js +2 -2
- package/dist/decisions.js +8 -8
- package/dist/page-snippets.js +13 -13
- package/dist/patterns.d.ts +1 -1
- package/dist/patterns.js +2 -2
- package/dist/reference-brief.js +2 -2
- package/dist/tools.js +4 -4
- package/package.json +1 -1
package/data/catalog.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
|
-
"generatedAt": "2026-10-
|
|
2
|
+
"generatedAt": "2026-10-09T11:44:49.138Z",
|
|
3
3
|
"library": {
|
|
4
4
|
"name": "morya-ui",
|
|
5
|
-
"version": "0.4.
|
|
5
|
+
"version": "0.4.3"
|
|
6
6
|
},
|
|
7
7
|
"mcp": {
|
|
8
8
|
"name": "@morya-ui/mcp",
|
|
9
|
-
"version": "0.4.
|
|
9
|
+
"version": "0.4.3"
|
|
10
10
|
},
|
|
11
11
|
"components": [
|
|
12
12
|
{
|
|
@@ -407,12 +407,12 @@
|
|
|
407
407
|
"exportName": "MAlert",
|
|
408
408
|
"category": "05 / FEEDBACK",
|
|
409
409
|
"description": "页面内嵌常驻提示，支持语义色、关闭与操作区。",
|
|
410
|
-
"descriptionEn": "Inline page notice with
|
|
410
|
+
"descriptionEn": "Inline page notice with type, close, and action slot.",
|
|
411
411
|
"import": "import { MAlert } from 'morya-ui'",
|
|
412
412
|
"props": [
|
|
413
413
|
{
|
|
414
|
-
"name": "
|
|
415
|
-
"type": "
|
|
414
|
+
"name": "type",
|
|
415
|
+
"type": "AlertType",
|
|
416
416
|
"description": "语义色与默认图标"
|
|
417
417
|
},
|
|
418
418
|
{
|
|
@@ -492,7 +492,7 @@
|
|
|
492
492
|
"sectionId": "基础用法",
|
|
493
493
|
"lang": "vue",
|
|
494
494
|
"preview": true,
|
|
495
|
-
"code": "<script setup lang=\"ts\">\nimport { MAlert, MSpace } from 'morya-ui'\n</script>\n\n<template>\n <MSpace\n vertical\n size=\"medium\"\n style=\"width: 100%\"\n >\n <MAlert\n title=\"提示\"\n description=\"这是一条信息说明。\"\n />\n <MAlert\n
|
|
495
|
+
"code": "<script setup lang=\"ts\">\nimport { MAlert, MSpace } from 'morya-ui'\n</script>\n\n<template>\n <MSpace\n vertical\n size=\"medium\"\n style=\"width: 100%\"\n >\n <MAlert\n title=\"提示\"\n description=\"这是一条信息说明。\"\n />\n <MAlert\n type=\"success\"\n title=\"成功\"\n description=\"操作已完成。\"\n />\n <MAlert\n type=\"warning\"\n title=\"注意\"\n description=\"请核对后再提交。\"\n />\n <MAlert\n type=\"danger\"\n title=\"错误\"\n description=\"请求失败，请稍后重试。\"\n />\n </MSpace>\n</template>",
|
|
496
496
|
"locale": "zh-CN"
|
|
497
497
|
},
|
|
498
498
|
{
|
|
@@ -501,7 +501,7 @@
|
|
|
501
501
|
"sectionId": "可关闭",
|
|
502
502
|
"lang": "vue",
|
|
503
503
|
"preview": true,
|
|
504
|
-
"code": "<script setup lang=\"ts\">\nimport { MAlert } from 'morya-ui'\n</script>\n\n<template>\n <MAlert\n
|
|
504
|
+
"code": "<script setup lang=\"ts\">\nimport { MAlert } from 'morya-ui'\n</script>\n\n<template>\n <MAlert\n type=\"warning\"\n title=\"可关闭\"\n description=\"点击右上角关闭本条提示。\"\n closable\n />\n</template>",
|
|
505
505
|
"locale": "zh-CN"
|
|
506
506
|
},
|
|
507
507
|
{
|
|
@@ -510,7 +510,7 @@
|
|
|
510
510
|
"sectionId": "操作区",
|
|
511
511
|
"lang": "vue",
|
|
512
512
|
"preview": true,
|
|
513
|
-
"code": "<script setup lang=\"ts\">\nimport { MAlert, MButton, message } from 'morya-ui'\n\nfunction onUndo() {\n message.info('已撤销')\n}\n</script>\n\n<template>\n <MAlert
|
|
513
|
+
"code": "<script setup lang=\"ts\">\nimport { MAlert, MButton, message } from 'morya-ui'\n\nfunction onUndo() {\n message.info('已撤销')\n}\n</script>\n\n<template>\n <MAlert type=\"info\">\n <template #title>\n 已归档\n </template>\n 该记录已移入归档。你可以撤销此次操作。\n <template #action>\n <MButton size=\"small\" @click=\"onUndo\" type=\"text\">\n 撤销\n </MButton>\n </template>\n </MAlert>\n</template>",
|
|
514
514
|
"locale": "zh-CN"
|
|
515
515
|
},
|
|
516
516
|
{
|
|
@@ -519,7 +519,7 @@
|
|
|
519
519
|
"sectionId": "类型",
|
|
520
520
|
"lang": "ts",
|
|
521
521
|
"preview": false,
|
|
522
|
-
"code": "type
|
|
522
|
+
"code": "type AlertType = 'info' | 'success' | 'warning' | 'danger'",
|
|
523
523
|
"locale": "zh-CN"
|
|
524
524
|
},
|
|
525
525
|
{
|
|
@@ -546,7 +546,7 @@
|
|
|
546
546
|
"sectionId": "basic",
|
|
547
547
|
"lang": "vue",
|
|
548
548
|
"preview": true,
|
|
549
|
-
"code": "<script setup lang=\"ts\">\nimport { MAlert, MSpace } from 'morya-ui'\n</script>\n\n<template>\n <MSpace\n vertical\n size=\"medium\"\n style=\"width: 100%\"\n >\n <MAlert\n title=\"提示\"\n description=\"这是一条信息说明。\"\n />\n <MAlert\n
|
|
549
|
+
"code": "<script setup lang=\"ts\">\nimport { MAlert, MSpace } from 'morya-ui'\n</script>\n\n<template>\n <MSpace\n vertical\n size=\"medium\"\n style=\"width: 100%\"\n >\n <MAlert\n title=\"提示\"\n description=\"这是一条信息说明。\"\n />\n <MAlert\n type=\"success\"\n title=\"成功\"\n description=\"操作已完成。\"\n />\n <MAlert\n type=\"warning\"\n title=\"注意\"\n description=\"请核对后再提交。\"\n />\n <MAlert\n type=\"danger\"\n title=\"错误\"\n description=\"请求失败，请稍后重试。\"\n />\n </MSpace>\n</template>",
|
|
550
550
|
"locale": "en-US"
|
|
551
551
|
},
|
|
552
552
|
{
|
|
@@ -555,7 +555,7 @@
|
|
|
555
555
|
"sectionId": "closable",
|
|
556
556
|
"lang": "vue",
|
|
557
557
|
"preview": true,
|
|
558
|
-
"code": "<script setup lang=\"ts\">\nimport { MAlert } from 'morya-ui'\n</script>\n\n<template>\n <MAlert\n
|
|
558
|
+
"code": "<script setup lang=\"ts\">\nimport { MAlert } from 'morya-ui'\n</script>\n\n<template>\n <MAlert\n type=\"warning\"\n title=\"可关闭\"\n description=\"点击右上角关闭本条提示。\"\n closable\n />\n</template>",
|
|
559
559
|
"locale": "en-US"
|
|
560
560
|
},
|
|
561
561
|
{
|
|
@@ -564,7 +564,7 @@
|
|
|
564
564
|
"sectionId": "action",
|
|
565
565
|
"lang": "vue",
|
|
566
566
|
"preview": true,
|
|
567
|
-
"code": "<script setup lang=\"ts\">\nimport { MAlert, MButton, message } from 'morya-ui'\n\nfunction onUndo() {\n message.info('已撤销')\n}\n</script>\n\n<template>\n <MAlert
|
|
567
|
+
"code": "<script setup lang=\"ts\">\nimport { MAlert, MButton, message } from 'morya-ui'\n\nfunction onUndo() {\n message.info('已撤销')\n}\n</script>\n\n<template>\n <MAlert type=\"info\">\n <template #title>\n 已归档\n </template>\n 该记录已移入归档。你可以撤销此次操作。\n <template #action>\n <MButton size=\"small\" @click=\"onUndo\" type=\"text\">\n 撤销\n </MButton>\n </template>\n </MAlert>\n</template>",
|
|
568
568
|
"locale": "en-US"
|
|
569
569
|
},
|
|
570
570
|
{
|
|
@@ -573,7 +573,7 @@
|
|
|
573
573
|
"sectionId": "types",
|
|
574
574
|
"lang": "ts",
|
|
575
575
|
"preview": false,
|
|
576
|
-
"code": "type
|
|
576
|
+
"code": "type AlertType = 'info' | 'success' | 'warning' | 'danger'",
|
|
577
577
|
"locale": "en-US"
|
|
578
578
|
},
|
|
579
579
|
{
|
|
@@ -604,7 +604,7 @@
|
|
|
604
604
|
{
|
|
605
605
|
"id": "基础用法",
|
|
606
606
|
"title": "基础用法",
|
|
607
|
-
"body": "`
|
|
607
|
+
"body": "`type` 控制语义色与默认图标：`info` / `success` / `warning` / `danger`。\n\n```vue preview src=\"./demos/Basic.vue\"\n```"
|
|
608
608
|
},
|
|
609
609
|
{
|
|
610
610
|
"id": "可关闭",
|
|
@@ -619,7 +619,7 @@
|
|
|
619
619
|
{
|
|
620
620
|
"id": "props",
|
|
621
621
|
"title": "Props",
|
|
622
|
-
"body": "| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `
|
|
622
|
+
"body": "| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `type` | `AlertType` | `'info'` | 语义色与默认图标 |\n| `title` | `string` | — | 标题 |\n| `description` | `string` | — | 描述（也可用默认插槽） |\n| `showIcon` | `boolean` | `true` | 是否显示图标 |\n| `closable` | `boolean` | `false` | 是否可关闭 |\n| `size` | `AlertSize` | — | 密度；也接受 `sm` / `lg` |\n| `banner` | `boolean` | `false` | 通栏弱边框样式 |\n| `pt` | `RootPassThrough` | — | 透传根节点 |"
|
|
623
623
|
},
|
|
624
624
|
{
|
|
625
625
|
"id": "events",
|
|
@@ -634,14 +634,14 @@
|
|
|
634
634
|
{
|
|
635
635
|
"id": "类型",
|
|
636
636
|
"title": "类型",
|
|
637
|
-
"body": "###
|
|
637
|
+
"body": "### AlertType\n\n```ts\ntype AlertType = 'info' | 'success' | 'warning' | 'danger'\n```\n\n### AlertSize\n\n```ts\ntype AlertSize = MSizeInput\n```"
|
|
638
638
|
}
|
|
639
639
|
],
|
|
640
|
-
"markdown": "---\ntitle: Alert\ncategory: 05 / FEEDBACK\ndescription: 页面内嵌常驻提示，支持语义色、关闭与操作区。\n---\n\n# Alert\n\n页面内**常驻**反馈条，适合表单顶部说明、权限提示、只读页警告等。短暂操作回执请用 [Message](/components/Message) / [Toast](/components/Toast)；整页结果用 [Result](/components/Result)。\n\n## 引入\n\n```ts\nimport { MAlert } from 'morya-ui'\n```\n\n## 基础用法\n\n`
|
|
640
|
+
"markdown": "---\ntitle: Alert\ncategory: 05 / FEEDBACK\ndescription: 页面内嵌常驻提示，支持语义色、关闭与操作区。\n---\n\n# Alert\n\n页面内**常驻**反馈条，适合表单顶部说明、权限提示、只读页警告等。短暂操作回执请用 [Message](/components/Message) / [Toast](/components/Toast)；整页结果用 [Result](/components/Result)。\n\n## 引入\n\n```ts\nimport { MAlert } from 'morya-ui'\n```\n\n## 基础用法\n\n`type` 控制语义色与默认图标：`info` / `success` / `warning` / `danger`。\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## 可关闭\n\n`closable` 显示关闭按钮；点击后触发 `close` 并卸载内容。\n\n```vue preview src=\"./demos/Closable.vue\"\n```\n\n## 操作区\n\n`#action` 放置次要操作（如撤销）；`#title` / 默认插槽可自定义标题与正文。\n\n```vue preview src=\"./demos/WithAction.vue\"\n```\n\n## Props\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `type` | `AlertType` | `'info'` | 语义色与默认图标 |\n| `title` | `string` | — | 标题 |\n| `description` | `string` | — | 描述（也可用默认插槽） |\n| `showIcon` | `boolean` | `true` | 是否显示图标 |\n| `closable` | `boolean` | `false` | 是否可关闭 |\n| `size` | `AlertSize` | — | 密度；也接受 `sm` / `lg` |\n| `banner` | `boolean` | `false` | 通栏弱边框样式 |\n| `pt` | `RootPassThrough` | — | 透传根节点 |\n\n## Events\n\n| 事件 | 说明 |\n| --- | --- |\n| `close` | 点击关闭时触发 |\n\n## Slots\n\n| 插槽 | 说明 |\n| --- | --- |\n| `default` | 描述区 |\n| `title` | 标题 |\n| `icon` | 自定义图标 |\n| `action` | 右侧操作 |\n\n## 类型\n\n### AlertType\n\n```ts\ntype AlertType = 'info' | 'success' | 'warning' | 'danger'\n```\n\n### AlertSize\n\n```ts\ntype AlertSize = MSizeInput\n```\n"
|
|
641
641
|
},
|
|
642
642
|
"en-US": {
|
|
643
643
|
"title": "Alert",
|
|
644
|
-
"description": "Inline page notice with
|
|
644
|
+
"description": "Inline page notice with type, close, and action slot.",
|
|
645
645
|
"sections": [
|
|
646
646
|
{
|
|
647
647
|
"id": "overview",
|
|
@@ -656,7 +656,7 @@
|
|
|
656
656
|
{
|
|
657
657
|
"id": "basic",
|
|
658
658
|
"title": "Basic",
|
|
659
|
-
"body": "`
|
|
659
|
+
"body": "`type` sets tone and default icon: `info` / `success` / `warning` / `danger`.\n\n```vue preview src=\"./demos/Basic.vue\"\n```"
|
|
660
660
|
},
|
|
661
661
|
{
|
|
662
662
|
"id": "closable",
|
|
@@ -671,7 +671,7 @@
|
|
|
671
671
|
{
|
|
672
672
|
"id": "props",
|
|
673
673
|
"title": "Props",
|
|
674
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `
|
|
674
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `type` | `AlertType` | `'info'` | Tone and default icon |\n| `title` | `string` | — | Title |\n| `description` | `string` | — | Description (or default slot) |\n| `showIcon` | `boolean` | `true` | Show leading icon |\n| `closable` | `boolean` | `false` | Show close control |\n| `size` | `AlertSize` | — | Density; also accepts `sm` / `lg` |\n| `banner` | `boolean` | `false` | Full-bleed weak border |\n| `pt` | `RootPassThrough` | — | Root pass-through |"
|
|
675
675
|
},
|
|
676
676
|
{
|
|
677
677
|
"id": "events",
|
|
@@ -686,10 +686,10 @@
|
|
|
686
686
|
{
|
|
687
687
|
"id": "types",
|
|
688
688
|
"title": "Types",
|
|
689
|
-
"body": "###
|
|
689
|
+
"body": "### AlertType\n\n```ts\ntype AlertType = 'info' | 'success' | 'warning' | 'danger'\n```\n\n### AlertSize\n\n```ts\ntype AlertSize = MSizeInput\n```"
|
|
690
690
|
}
|
|
691
691
|
],
|
|
692
|
-
"markdown": "---\ntitle: Alert\ncategory: 05 / FEEDBACK\ndescription: Inline page notice with
|
|
692
|
+
"markdown": "---\ntitle: Alert\ncategory: 05 / FEEDBACK\ndescription: Inline page notice with type, close, and action slot.\n---\n\n# Alert\n\nPersistent **in-page** notice for form intros, permission hints, and read-only warnings. Prefer [Message](/components/Message) / [Toast](/components/Toast) for brief action feedback, and [Result](/components/Result) for full-page outcomes.\n\n## Import\n\n```ts\nimport { MAlert } from 'morya-ui'\n```\n\n## Basic\n\n`type` sets tone and default icon: `info` / `success` / `warning` / `danger`.\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Closable\n\n`closable` shows a close control; click emits `close` and removes the content.\n\n```vue preview src=\"./demos/Closable.vue\"\n```\n\n## Action\n\nUse `#action` for secondary actions (e.g. Undo); `#title` / default slot customize copy.\n\n```vue preview src=\"./demos/WithAction.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `type` | `AlertType` | `'info'` | Tone and default icon |\n| `title` | `string` | — | Title |\n| `description` | `string` | — | Description (or default slot) |\n| `showIcon` | `boolean` | `true` | Show leading icon |\n| `closable` | `boolean` | `false` | Show close control |\n| `size` | `AlertSize` | — | Density; also accepts `sm` / `lg` |\n| `banner` | `boolean` | `false` | Full-bleed weak border |\n| `pt` | `RootPassThrough` | — | Root pass-through |\n\n## Events\n\n| Event | Description |\n| --- | --- |\n| `close` | Fired when close is clicked |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Description body |\n| `title` | Title |\n| `icon` | Custom icon |\n| `action` | Trailing actions |\n\n## Types\n\n### AlertType\n\n```ts\ntype AlertType = 'info' | 'success' | 'warning' | 'danger'\n```\n\n### AlertSize\n\n```ts\ntype AlertSize = MSizeInput\n```\n"
|
|
693
693
|
}
|
|
694
694
|
}
|
|
695
695
|
},
|
|
@@ -1467,10 +1467,10 @@
|
|
|
1467
1467
|
"description": "角标内容。省略时显示为圆点。"
|
|
1468
1468
|
},
|
|
1469
1469
|
{
|
|
1470
|
-
"name": "
|
|
1471
|
-
"type": "'primary' | 'secondary' | 'success' | 'info' | '
|
|
1470
|
+
"name": "type",
|
|
1471
|
+
"type": "'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'contrast'",
|
|
1472
1472
|
"default": "'primary'",
|
|
1473
|
-
"description": "
|
|
1473
|
+
"description": "语义色。"
|
|
1474
1474
|
},
|
|
1475
1475
|
{
|
|
1476
1476
|
"name": "size",
|
|
@@ -1531,12 +1531,12 @@
|
|
|
1531
1531
|
"locale": "zh-CN"
|
|
1532
1532
|
},
|
|
1533
1533
|
{
|
|
1534
|
-
"id": "
|
|
1535
|
-
"section": "
|
|
1536
|
-
"sectionId": "
|
|
1534
|
+
"id": "type-1",
|
|
1535
|
+
"section": "Type",
|
|
1536
|
+
"sectionId": "type",
|
|
1537
1537
|
"lang": "vue",
|
|
1538
1538
|
"preview": true,
|
|
1539
|
-
"code": "<script setup lang=\"ts\">\nimport { MBadge } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MBadge :value=\"1\" />\n <MBadge :value=\"2\"
|
|
1539
|
+
"code": "<script setup lang=\"ts\">\nimport { MBadge } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MBadge :value=\"1\" />\n <MBadge :value=\"2\" type=\"secondary\" />\n <MBadge :value=\"3\" type=\"success\" />\n <MBadge :value=\"4\" type=\"info\" />\n <MBadge :value=\"5\" type=\"warning\" />\n <MBadge :value=\"6\" type=\"danger\" />\n <MBadge :value=\"7\" type=\"contrast\" />\n </div>\n</template>",
|
|
1540
1540
|
"locale": "zh-CN"
|
|
1541
1541
|
},
|
|
1542
1542
|
{
|
|
@@ -1576,12 +1576,12 @@
|
|
|
1576
1576
|
"locale": "en-US"
|
|
1577
1577
|
},
|
|
1578
1578
|
{
|
|
1579
|
-
"id": "
|
|
1580
|
-
"section": "
|
|
1581
|
-
"sectionId": "
|
|
1579
|
+
"id": "type-1",
|
|
1580
|
+
"section": "Type",
|
|
1581
|
+
"sectionId": "type",
|
|
1582
1582
|
"lang": "vue",
|
|
1583
1583
|
"preview": true,
|
|
1584
|
-
"code": "<script setup lang=\"ts\">\nimport { MBadge } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MBadge :value=\"1\" />\n <MBadge :value=\"2\"
|
|
1584
|
+
"code": "<script setup lang=\"ts\">\nimport { MBadge } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MBadge :value=\"1\" />\n <MBadge :value=\"2\" type=\"secondary\" />\n <MBadge :value=\"3\" type=\"success\" />\n <MBadge :value=\"4\" type=\"info\" />\n <MBadge :value=\"5\" type=\"warning\" />\n <MBadge :value=\"6\" type=\"danger\" />\n <MBadge :value=\"7\" type=\"contrast\" />\n </div>\n</template>",
|
|
1585
1585
|
"locale": "en-US"
|
|
1586
1586
|
},
|
|
1587
1587
|
{
|
|
@@ -1624,9 +1624,9 @@
|
|
|
1624
1624
|
"body": "传入 `value` 展示文案或数字；省略 `value` 时渲染为圆点。\n\n```vue preview src=\"./demos/Basic.vue\"\n```"
|
|
1625
1625
|
},
|
|
1626
1626
|
{
|
|
1627
|
-
"id": "
|
|
1628
|
-
"title": "
|
|
1629
|
-
"body": "使用 `
|
|
1627
|
+
"id": "type",
|
|
1628
|
+
"title": "Type",
|
|
1629
|
+
"body": "使用 `type` 定义语义色；省略时为 primary。\n\n```vue preview src=\"./demos/Types.vue\"\n```"
|
|
1630
1630
|
},
|
|
1631
1631
|
{
|
|
1632
1632
|
"id": "size",
|
|
@@ -1641,7 +1641,7 @@
|
|
|
1641
1641
|
{
|
|
1642
1642
|
"id": "props",
|
|
1643
1643
|
"title": "Props",
|
|
1644
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `value` | `string \\| number` | — | 角标内容。省略时显示为圆点。 |\n| `
|
|
1644
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `value` | `string \\| number` | — | 角标内容。省略时显示为圆点。 |\n| `type` | `'primary' \\| 'secondary' \\| 'success' \\| 'info' \\| 'warning' \\| 'danger' \\| 'contrast'` | `'primary'` | 语义色。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸；`sm` / `lg` 为别名。 |\n| `max` | `number` | — | 数字上限，超出显示 `{max}+`。 |\n| `offset` | `[number, number]` | — | 包裹模式下的位移 `[x, y]`。 |\n| `processing` | `boolean` | `false` | 脉冲动画。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
1645
1645
|
},
|
|
1646
1646
|
{
|
|
1647
1647
|
"id": "slots",
|
|
@@ -1659,7 +1659,7 @@
|
|
|
1659
1659
|
"body": "无自定义事件。"
|
|
1660
1660
|
}
|
|
1661
1661
|
],
|
|
1662
|
-
"markdown": "---\ntitle: Badge\ncategory: 01 / BASIC\ndescription: 状态角标或圆点。\n---\n\n# Badge\n\n状态角标或圆点，用于数量与状态提示。\n\n## 引入\n\n```ts\nimport { MBadge } from 'morya-ui'\n```\n\n## 基础用法\n\n传入 `value` 展示文案或数字；省略 `value` 时渲染为圆点。\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n##
|
|
1662
|
+
"markdown": "---\ntitle: Badge\ncategory: 01 / BASIC\ndescription: 状态角标或圆点。\n---\n\n# Badge\n\n状态角标或圆点，用于数量与状态提示。\n\n## 引入\n\n```ts\nimport { MBadge } from 'morya-ui'\n```\n\n## 基础用法\n\n传入 `value` 展示文案或数字；省略 `value` 时渲染为圆点。\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Type\n\n使用 `type` 定义语义色；省略时为 primary。\n\n```vue preview src=\"./demos/Types.vue\"\n```\n\n## Size\n\n`size` 支持 `small` / `large`，以及别名 `sm` / `lg`。\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n## Overlay\n\n默认插槽包裹子节点；`max` 超出时显示 `99+`，`processing` 显示脉冲。\n\n```vue preview src=\"./demos/Overlay.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `value` | `string \\| number` | — | 角标内容。省略时显示为圆点。 |\n| `type` | `'primary' \\| 'secondary' \\| 'success' \\| 'info' \\| 'warning' \\| 'danger' \\| 'contrast'` | `'primary'` | 语义色。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸；`sm` / `lg` 为别名。 |\n| `max` | `number` | — | 数字上限，超出显示 `{max}+`。 |\n| `offset` | `[number, number]` | — | 包裹模式下的位移 `[x, y]`。 |\n| `processing` | `boolean` | `false` | 脉冲动画。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 被角标包裹的内容。 |\n\n## 无障碍\n\n- 角标数字变化时，若状态重要，请同步更新附近可见文案或 `aria-live` 区域。\n- 包裹模式下，勿让角标成为唯一的状态提示。\n\n## Events\n\n无自定义事件。\n"
|
|
1663
1663
|
},
|
|
1664
1664
|
"en-US": {
|
|
1665
1665
|
"title": "Badge",
|
|
@@ -1681,9 +1681,9 @@
|
|
|
1681
1681
|
"body": "Pass `value` to show text or a number; omit `value` to render a dot.\n\n```vue preview src=\"./demos/Basic.vue\"\n```"
|
|
1682
1682
|
},
|
|
1683
1683
|
{
|
|
1684
|
-
"id": "
|
|
1685
|
-
"title": "
|
|
1686
|
-
"body": "Use `
|
|
1684
|
+
"id": "type",
|
|
1685
|
+
"title": "Type",
|
|
1686
|
+
"body": "Use `type` for semantic color; defaults to primary when omitted.\n\n```vue preview src=\"./demos/Types.vue\"\n```"
|
|
1687
1687
|
},
|
|
1688
1688
|
{
|
|
1689
1689
|
"id": "size",
|
|
@@ -1698,7 +1698,7 @@
|
|
|
1698
1698
|
{
|
|
1699
1699
|
"id": "props",
|
|
1700
1700
|
"title": "Props",
|
|
1701
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `value` | `string \\| number` |
|
|
1701
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `value` | `string \\| number` | — | Badge content. Renders as a dot when omitted. |\n| `type` | `'primary' \\| 'secondary' \\| 'success' \\| 'info' \\| 'warning' \\| 'danger' \\| 'contrast'` | `'primary'` | Semantic color. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size; `sm` / `lg` are aliases. |\n| `max` | `number` | — | Cap numeric values as `{max}+`. |\n| `offset` | `[number, number]` | — | Offset `[x, y]` when wrapping content. |\n| `processing` | `boolean` | `false` | Pulse animation. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM pass-through; see [attrs](/docs/attrs). |"
|
|
1702
1702
|
},
|
|
1703
1703
|
{
|
|
1704
1704
|
"id": "slots",
|
|
@@ -1716,7 +1716,7 @@
|
|
|
1716
1716
|
"body": "No custom events."
|
|
1717
1717
|
}
|
|
1718
1718
|
],
|
|
1719
|
-
"markdown": "---\ntitle: Badge\ncategory: 01 / BASIC\ndescription: Status badge or dot.\n---\n\n# Badge\n\nStatus badge or dot for counts and status cues.\n\n## Import\n\n```ts\nimport { MBadge } from 'morya-ui'\n```\n\n## Basic\n\nPass `value` to show text or a number; omit `value` to render a dot.\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n##
|
|
1719
|
+
"markdown": "---\ntitle: Badge\ncategory: 01 / BASIC\ndescription: Status badge or dot.\n---\n\n# Badge\n\nStatus badge or dot for counts and status cues.\n\n## Import\n\n```ts\nimport { MBadge } from 'morya-ui'\n```\n\n## Basic\n\nPass `value` to show text or a number; omit `value` to render a dot.\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Type\n\nUse `type` for semantic color; defaults to primary when omitted.\n\n```vue preview src=\"./demos/Types.vue\"\n```\n\n## Size\n\n`size` supports `small` / `large`, plus aliases `sm` / `lg`.\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n## Overlay\n\nWrap content with the default slot. `max` caps numeric values; `processing` pulses.\n\n```vue preview src=\"./demos/Overlay.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `value` | `string \\| number` | — | Badge content. Renders as a dot when omitted. |\n| `type` | `'primary' \\| 'secondary' \\| 'success' \\| 'info' \\| 'warning' \\| 'danger' \\| 'contrast'` | `'primary'` | Semantic color. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size; `sm` / `lg` are aliases. |\n| `max` | `number` | — | Cap numeric values as `{max}+`. |\n| `offset` | `[number, number]` | — | Offset `[x, y]` when wrapping content. |\n| `processing` | `boolean` | `false` | Pulse animation. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM pass-through; see [attrs](/docs/attrs). |\n\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Content to overlay. |\n\n## Accessibility\n\n- When badge counts matter, update nearby visible text or an `aria-live` region.\n- Do not rely on the badge alone as the only status indicator.\n\n## Events\n\nNo custom events.\n"
|
|
1720
1720
|
}
|
|
1721
1721
|
}
|
|
1722
1722
|
},
|
|
@@ -2554,7 +2554,7 @@
|
|
|
2554
2554
|
{
|
|
2555
2555
|
"id": "faq",
|
|
2556
2556
|
"title": "FAQ",
|
|
2557
|
-
"body": "### `type` 和 `color` / `variant` 怎么选？\n\n日常优先用 `type`。需要跨色系细调时再用 `color` + `variant`；二者齐全时覆盖 `type`。\n\n| `type` | 等价于 |\n| --- | --- |\n| `primary` | `color=\"primary\"` + `variant=\"solid\"` |\n| `default` | `color=\"default\"` + `variant=\"outlined\"` |\n| `dashed` | `color=\"default\"` + `variant=\"dashed\"` |\n| `text` | `color=\"default\"` + `variant=\"text\"` |\n| `link` | `color=\"link\"` + `variant=\"link\"` |\n\n```vue\n<MButton type=\"primary\">保存</MButton>\n```\n\n等同于\n\n```vue\n<MButton color=\"primary\" variant=\"solid\">保存</MButton>\n```\n\n### Button 的 `color` 和其它组件的 `
|
|
2557
|
+
"body": "### `type` 和 `color` / `variant` 怎么选？\n\n日常优先用 `type`。需要跨色系细调时再用 `color` + `variant`；二者齐全时覆盖 `type`。\n\n| `type` | 等价于 |\n| --- | --- |\n| `primary` | `color=\"primary\"` + `variant=\"solid\"` |\n| `default` | `color=\"default\"` + `variant=\"outlined\"` |\n| `dashed` | `color=\"default\"` + `variant=\"dashed\"` |\n| `text` | `color=\"default\"` + `variant=\"text\"` |\n| `link` | `color=\"link\"` + `variant=\"link\"` |\n\n```vue\n<MButton type=\"primary\">保存</MButton>\n```\n\n等同于\n\n```vue\n<MButton color=\"primary\" variant=\"solid\">保存</MButton>\n```\n\n### Button 的 `color` 和其它组件的 `type`？\n\nButton 用 `color` / `variant`（以及外观糖 `type`）描述按钮形态。Badge、Tag、Status、Alert、Message、Toast 等组件的 `type` 表示语义色调，取值不同，不要和 Button 的 `type` 糖混用。\n\n### `text` 和 `link` 怎么区分？\n\n`type=\"text\"`（或 `variant=\"text\"`）保留按钮热区与高度；`type=\"link\"` 更接近内联链接。"
|
|
2558
2558
|
},
|
|
2559
2559
|
{
|
|
2560
2560
|
"id": "无障碍",
|
|
@@ -2562,7 +2562,7 @@
|
|
|
2562
2562
|
"body": "- 默认渲染原生 `<button>`；设置 `href` 时渲染 `<a>`。\n- 纯图标按钮请设置 `ariaLabel`（或可见文本）。\n- `loading` 时设置 `aria-busy`，并阻止点击。\n- 禁用的链接按钮会去掉 `href`，并设置 `aria-disabled` 与 `tabindex=\"-1\"`。"
|
|
2563
2563
|
}
|
|
2564
2564
|
],
|
|
2565
|
-
"markdown": "---\ntitle: Button\ncategory: 01 / BASIC\ndescription: 触发即时操作的按钮。\n---\n\n# Button\n\n触发提交、确认、导航等即时操作。\n\n## 何时使用\n\n- 主操作：`type=\"primary\"`，同一操作区通常只放一个。\n- 次操作：默认按钮，或 `type=\"dashed\"` / `type=\"text\"`。\n- 内联导航或弱操作：`type=\"link\"` / `type=\"text\"`。\n- 破坏性操作：加 `danger`，并配合确认。\n- 相邻操作需要拼成一组时：用 `MButtonGroup`（仅视觉拼组）。\n\n## 引入\n\n```ts\nimport { MButton, MButtonGroup } from 'morya-ui'\n```\n\n## 代码演示\n\n### 基础用法\n\n`type` 是 `color` + `variant` 的语法糖。省略时为默认描边按钮。\n\n```vue preview src=\"./demos/Basic.vue\"\n\n```\n\n### 颜色与变体\n\n需要更细控制时直接设 `color` 与 `variant`；二者同时存在时优先于 `type`。\n\n```vue preview src=\"./demos/ColorVariant.vue\"\n\n```\n\n### 图标\n\n`icon` 可配名称或组件；`iconPlacement` 控制位置；纯图标请提供 `ariaLabel`。\n\n```vue preview src=\"./demos/Icon.vue\"\n\n```\n\n### 尺寸\n\n```vue preview src=\"./demos/Size.vue\"\n\n```\n\n### 形状\n\n`shape`：`default` / `round` / `circle` / `square`。\n\n```vue preview src=\"./demos/Shape.vue\"\n\n```\n\n### 危险按钮\n\n`danger` 将颜色切到危险色，并保留当前 `type` / `variant` 形态。\n\n```vue preview src=\"./demos/Danger.vue\"\n\n```\n\n### 幽灵按钮\n\n`ghost` 让背景透明，适合深色或复杂底图。对 `text` / `link` 无效。\n\n```vue preview src=\"./demos/Ghost.vue\"\n\n```\n\n### 加载中\n\n`loading` 可为布尔值，或 `{ delay, icon }`。加载中会禁用点击。\n\n```vue preview src=\"./demos/Loading.vue\"\n\n```\n\n### 不可用\n\n```vue preview src=\"./demos/Disabled.vue\"\n\n```\n\n### Block\n\n`block` 让按钮宽度撑满父容器。\n\n```vue preview src=\"./demos/Block.vue\"\n\n```\n\n### 按钮组\n\n`MButtonGroup` 只做视觉拼组（圆角与边框衔接），没有选中态。需要互斥切换时用 [`SelectButton`](/components/SelectButton)。\n\n```vue preview src=\"./demos/ButtonGroup.zh.vue\"\n\n```\n\n### 水波纹与按压\n\n`ripple` / `press` 默认关闭，需要时显式开启。\n\n```vue preview src=\"./demos/RipplePress.vue\"\n\n```\n\n## API\n\n推荐组合顺序：`type` → `shape` → `size` → `loading` → `disabled`。\n\n### Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `type` | `'default' \\| 'primary' \\| 'dashed' \\| 'link' \\| 'text'` | `'default'` | 语法糖。同时设置 `color` 与 `variant` 时以后者为准。 |\n| `color` | `'default' \\| 'primary' \\| 'danger' \\| 'success' \\| 'info' \\| 'warning' \\| 'help' \\| 'contrast'` | — | 颜色轴。 |\n| `variant` | `'solid' \\| 'outlined' \\| 'dashed' \\| 'filled' \\| 'text' \\| 'link'` | — | 变体轴。 |\n| `danger` | `boolean` | `false` | 危险色语法糖。设置了 `color` 时以 `color` 为准。 |\n| `ghost` | `boolean` | `false` | 透明背景。对 `text` / `link` 无效。 |\n| `shape` | `'default' \\| 'circle' \\| 'round' \\| 'square'` | `'default'` | 形状。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸；可继承 ConfigProvider。 |\n| `block` | `boolean` | `false` | 宽度撑满父容器。 |\n| `loading` | `boolean \\| { delay?: number; icon?: IconName \\| Component }` | `false` | 加载中；可延迟出现并自定义图标。 |\n| `disabled` | `boolean` | `false` | 禁用；可继承 ConfigProvider。 |\n| `htmlType` | `'button' \\| 'submit' \\| 'reset'` | `'button'` | 原生 `button` 的 `type`。 |\n| `href` | `string` | — | 设置后渲染为 `<a>`。 |\n| `target` | `string` | — | 链接 `target`，需配合 `href`。 |\n| `label` | `string` | — | 文案；默认插槽优先。 |\n| `icon` | `IconName \\| Component` | — | 图标名称或组件。 |\n| `iconPlacement` | `'start' \\| 'end'` | `'start'` | 图标位置。 |\n| `iconOnly` | `boolean` | `false` | 强制纯图标方形按钮。 |\n| `autoInsertSpace` | `boolean` | `true` | 两个汉字之间插入空格。 |\n| `ripple` | `boolean` | `false` | 点击水波纹。 |\n| `press` | `boolean` | `false` | 按下缩放。 |\n| `autofocus` | `boolean` | `false` | 原生 autofocus。 |\n| `ariaLabel` | `string` | — | 可访问名称；纯图标按钮建议提供。 |\n| `pt` | `{ root?, icon?, content? }` | — | 语义结构透传。 |\n\n### Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `click` | `MouseEvent` | 点击时触发；`loading` / `disabled` 时不触发。 |\n\n### Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 按钮内容，优先于 `label`。 |\n| `icon` | 自定义图标。 |\n| `loadingicon` | 自定义加载图标。 |\n\n### Instance\n\n| 方法 / 属性 | 说明 |\n| --- | --- |\n| `focus()` | 聚焦根元素。 |\n| `ref` | 根 `HTMLButtonElement` 或 `HTMLAnchorElement`。 |\n\n### MButtonGroup Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `block` | `boolean` | `false` | 宽度撑满父容器。 |\n| `ariaLabel` | `string` | — | 组的可访问名称。 |\n| `pt` | `{ root? }` | — | 组容器透传。 |\n\n## Design Token\n\n复用全局 `--m-*` 令牌，见[设计令牌](/docs/design-tokens)。按钮在根节点暴露 `--m-button-*`（尺寸、圆角、色阶、填充透明度、动效等），主题切换时跟随 `--m-color-*` / `--m-control-*` / `--m-motion-*`。\n\n## Semantic DOM\n\n根节点即交互元素：有 `href` 时为 `<a class=\"m-button\">`，否则为 `<button class=\"m-button\">`。\n\n```text\nbutton.m-button / a.m-button\n span.m-button__ripple* ← ripple 开启时\n span.m-button__icon* ← 图标 / loading\n span.m-button__label* ← 文案\n```\n\n可用 `pt.root` / `pt.icon` / `pt.content` 覆盖各节点。更多约定见[样式与 attrs](/docs/attrs)、[Common Props](/docs/common-props)。\n\n## FAQ\n\n### `type` 和 `color` / `variant` 怎么选？\n\n日常优先用 `type`。需要跨色系细调时再用 `color` + `variant`；二者齐全时覆盖 `type`。\n\n| `type` | 等价于 |\n| --- | --- |\n| `primary` | `color=\"primary\"` + `variant=\"solid\"` |\n| `default` | `color=\"default\"` + `variant=\"outlined\"` |\n| `dashed` | `color=\"default\"` + `variant=\"dashed\"` |\n| `text` | `color=\"default\"` + `variant=\"text\"` |\n| `link` | `color=\"link\"` + `variant=\"link\"` |\n\n```vue\n<MButton type=\"primary\">保存</MButton>\n```\n\n等同于\n\n```vue\n<MButton color=\"primary\" variant=\"solid\">保存</MButton>\n```\n\n### Button 的 `color` 和其它组件的 `
|
|
2565
|
+
"markdown": "---\ntitle: Button\ncategory: 01 / BASIC\ndescription: 触发即时操作的按钮。\n---\n\n# Button\n\n触发提交、确认、导航等即时操作。\n\n## 何时使用\n\n- 主操作：`type=\"primary\"`，同一操作区通常只放一个。\n- 次操作：默认按钮，或 `type=\"dashed\"` / `type=\"text\"`。\n- 内联导航或弱操作：`type=\"link\"` / `type=\"text\"`。\n- 破坏性操作：加 `danger`，并配合确认。\n- 相邻操作需要拼成一组时：用 `MButtonGroup`（仅视觉拼组）。\n\n## 引入\n\n```ts\nimport { MButton, MButtonGroup } from 'morya-ui'\n```\n\n## 代码演示\n\n### 基础用法\n\n`type` 是 `color` + `variant` 的语法糖。省略时为默认描边按钮。\n\n```vue preview src=\"./demos/Basic.vue\"\n\n```\n\n### 颜色与变体\n\n需要更细控制时直接设 `color` 与 `variant`；二者同时存在时优先于 `type`。\n\n```vue preview src=\"./demos/ColorVariant.vue\"\n\n```\n\n### 图标\n\n`icon` 可配名称或组件；`iconPlacement` 控制位置；纯图标请提供 `ariaLabel`。\n\n```vue preview src=\"./demos/Icon.vue\"\n\n```\n\n### 尺寸\n\n```vue preview src=\"./demos/Size.vue\"\n\n```\n\n### 形状\n\n`shape`：`default` / `round` / `circle` / `square`。\n\n```vue preview src=\"./demos/Shape.vue\"\n\n```\n\n### 危险按钮\n\n`danger` 将颜色切到危险色，并保留当前 `type` / `variant` 形态。\n\n```vue preview src=\"./demos/Danger.vue\"\n\n```\n\n### 幽灵按钮\n\n`ghost` 让背景透明，适合深色或复杂底图。对 `text` / `link` 无效。\n\n```vue preview src=\"./demos/Ghost.vue\"\n\n```\n\n### 加载中\n\n`loading` 可为布尔值，或 `{ delay, icon }`。加载中会禁用点击。\n\n```vue preview src=\"./demos/Loading.vue\"\n\n```\n\n### 不可用\n\n```vue preview src=\"./demos/Disabled.vue\"\n\n```\n\n### Block\n\n`block` 让按钮宽度撑满父容器。\n\n```vue preview src=\"./demos/Block.vue\"\n\n```\n\n### 按钮组\n\n`MButtonGroup` 只做视觉拼组（圆角与边框衔接），没有选中态。需要互斥切换时用 [`SelectButton`](/components/SelectButton)。\n\n```vue preview src=\"./demos/ButtonGroup.zh.vue\"\n\n```\n\n### 水波纹与按压\n\n`ripple` / `press` 默认关闭，需要时显式开启。\n\n```vue preview src=\"./demos/RipplePress.vue\"\n\n```\n\n## API\n\n推荐组合顺序：`type` → `shape` → `size` → `loading` → `disabled`。\n\n### Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `type` | `'default' \\| 'primary' \\| 'dashed' \\| 'link' \\| 'text'` | `'default'` | 语法糖。同时设置 `color` 与 `variant` 时以后者为准。 |\n| `color` | `'default' \\| 'primary' \\| 'danger' \\| 'success' \\| 'info' \\| 'warning' \\| 'help' \\| 'contrast'` | — | 颜色轴。 |\n| `variant` | `'solid' \\| 'outlined' \\| 'dashed' \\| 'filled' \\| 'text' \\| 'link'` | — | 变体轴。 |\n| `danger` | `boolean` | `false` | 危险色语法糖。设置了 `color` 时以 `color` 为准。 |\n| `ghost` | `boolean` | `false` | 透明背景。对 `text` / `link` 无效。 |\n| `shape` | `'default' \\| 'circle' \\| 'round' \\| 'square'` | `'default'` | 形状。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸；可继承 ConfigProvider。 |\n| `block` | `boolean` | `false` | 宽度撑满父容器。 |\n| `loading` | `boolean \\| { delay?: number; icon?: IconName \\| Component }` | `false` | 加载中；可延迟出现并自定义图标。 |\n| `disabled` | `boolean` | `false` | 禁用；可继承 ConfigProvider。 |\n| `htmlType` | `'button' \\| 'submit' \\| 'reset'` | `'button'` | 原生 `button` 的 `type`。 |\n| `href` | `string` | — | 设置后渲染为 `<a>`。 |\n| `target` | `string` | — | 链接 `target`，需配合 `href`。 |\n| `label` | `string` | — | 文案；默认插槽优先。 |\n| `icon` | `IconName \\| Component` | — | 图标名称或组件。 |\n| `iconPlacement` | `'start' \\| 'end'` | `'start'` | 图标位置。 |\n| `iconOnly` | `boolean` | `false` | 强制纯图标方形按钮。 |\n| `autoInsertSpace` | `boolean` | `true` | 两个汉字之间插入空格。 |\n| `ripple` | `boolean` | `false` | 点击水波纹。 |\n| `press` | `boolean` | `false` | 按下缩放。 |\n| `autofocus` | `boolean` | `false` | 原生 autofocus。 |\n| `ariaLabel` | `string` | — | 可访问名称；纯图标按钮建议提供。 |\n| `pt` | `{ root?, icon?, content? }` | — | 语义结构透传。 |\n\n### Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `click` | `MouseEvent` | 点击时触发；`loading` / `disabled` 时不触发。 |\n\n### Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 按钮内容，优先于 `label`。 |\n| `icon` | 自定义图标。 |\n| `loadingicon` | 自定义加载图标。 |\n\n### Instance\n\n| 方法 / 属性 | 说明 |\n| --- | --- |\n| `focus()` | 聚焦根元素。 |\n| `ref` | 根 `HTMLButtonElement` 或 `HTMLAnchorElement`。 |\n\n### MButtonGroup Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `block` | `boolean` | `false` | 宽度撑满父容器。 |\n| `ariaLabel` | `string` | — | 组的可访问名称。 |\n| `pt` | `{ root? }` | — | 组容器透传。 |\n\n## Design Token\n\n复用全局 `--m-*` 令牌，见[设计令牌](/docs/design-tokens)。按钮在根节点暴露 `--m-button-*`（尺寸、圆角、色阶、填充透明度、动效等），主题切换时跟随 `--m-color-*` / `--m-control-*` / `--m-motion-*`。\n\n## Semantic DOM\n\n根节点即交互元素：有 `href` 时为 `<a class=\"m-button\">`，否则为 `<button class=\"m-button\">`。\n\n```text\nbutton.m-button / a.m-button\n span.m-button__ripple* ← ripple 开启时\n span.m-button__icon* ← 图标 / loading\n span.m-button__label* ← 文案\n```\n\n可用 `pt.root` / `pt.icon` / `pt.content` 覆盖各节点。更多约定见[样式与 attrs](/docs/attrs)、[Common Props](/docs/common-props)。\n\n## FAQ\n\n### `type` 和 `color` / `variant` 怎么选？\n\n日常优先用 `type`。需要跨色系细调时再用 `color` + `variant`；二者齐全时覆盖 `type`。\n\n| `type` | 等价于 |\n| --- | --- |\n| `primary` | `color=\"primary\"` + `variant=\"solid\"` |\n| `default` | `color=\"default\"` + `variant=\"outlined\"` |\n| `dashed` | `color=\"default\"` + `variant=\"dashed\"` |\n| `text` | `color=\"default\"` + `variant=\"text\"` |\n| `link` | `color=\"link\"` + `variant=\"link\"` |\n\n```vue\n<MButton type=\"primary\">保存</MButton>\n```\n\n等同于\n\n```vue\n<MButton color=\"primary\" variant=\"solid\">保存</MButton>\n```\n\n### Button 的 `color` 和其它组件的 `type`？\n\nButton 用 `color` / `variant`（以及外观糖 `type`）描述按钮形态。Badge、Tag、Status、Alert、Message、Toast 等组件的 `type` 表示语义色调，取值不同，不要和 Button 的 `type` 糖混用。\n\n### `text` 和 `link` 怎么区分？\n\n`type=\"text\"`（或 `variant=\"text\"`）保留按钮热区与高度；`type=\"link\"` 更接近内联链接。\n\n## 无障碍\n\n- 默认渲染原生 `<button>`；设置 `href` 时渲染 `<a>`。\n- 纯图标按钮请设置 `ariaLabel`（或可见文本）。\n- `loading` 时设置 `aria-busy`，并阻止点击。\n- 禁用的链接按钮会去掉 `href`，并设置 `aria-disabled` 与 `tabindex=\"-1\"`。\n"
|
|
2566
2566
|
},
|
|
2567
2567
|
"en-US": {
|
|
2568
2568
|
"title": "Button",
|
|
@@ -2606,7 +2606,7 @@
|
|
|
2606
2606
|
{
|
|
2607
2607
|
"id": "faq",
|
|
2608
2608
|
"title": "FAQ",
|
|
2609
|
-
"body": "### How do I choose between `type` and `color` / `variant`?\n\nPrefer `type` for everyday use. Reach for `color` + `variant` when you need finer cross-tone control. When both axes are set, they override `type`.\n\n| `type` | Equals |\n| --- | --- |\n| `primary` | `color=\"primary\"` + `variant=\"solid\"` |\n| `default` | `color=\"default\"` + `variant=\"outlined\"` |\n| `dashed` | `color=\"default\"` + `variant=\"dashed\"` |\n| `text` | `color=\"default\"` + `variant=\"text\"` |\n| `link` | `color=\"link\"` + `variant=\"link\"` |\n\n```vue\n<MButton type=\"primary\">Save</MButton>\n```\n\nequals\n\n```vue\n<MButton color=\"primary\" variant=\"solid\">Save</MButton>\n```\n\n### Button `color` vs other components' `
|
|
2609
|
+
"body": "### How do I choose between `type` and `color` / `variant`?\n\nPrefer `type` for everyday use. Reach for `color` + `variant` when you need finer cross-tone control. When both axes are set, they override `type`.\n\n| `type` | Equals |\n| --- | --- |\n| `primary` | `color=\"primary\"` + `variant=\"solid\"` |\n| `default` | `color=\"default\"` + `variant=\"outlined\"` |\n| `dashed` | `color=\"default\"` + `variant=\"dashed\"` |\n| `text` | `color=\"default\"` + `variant=\"text\"` |\n| `link` | `color=\"link\"` + `variant=\"link\"` |\n\n```vue\n<MButton type=\"primary\">Save</MButton>\n```\n\nequals\n\n```vue\n<MButton color=\"primary\" variant=\"solid\">Save</MButton>\n```\n\n### Button `color` vs other components' `type`?\n\nButton uses `color` / `variant` (plus appearance sugar `type`) for button look. On Badge, Tag, Status, Alert, Message, and Toast, `type` means semantic tone with a different value set—do not mix it with Button's sugar `type`.\n\n### `text` vs `link`?\n\n`type=\"text\"` (or `variant=\"text\"`) keeps button height and hit area. `type=\"link\"` is closer to an inline link."
|
|
2610
2610
|
},
|
|
2611
2611
|
{
|
|
2612
2612
|
"id": "accessibility",
|
|
@@ -2614,7 +2614,7 @@
|
|
|
2614
2614
|
"body": "- Renders a native `<button>` by default; renders `<a>` when `href` is set.\n- Provide `ariaLabel` (or visible text) for icon-only buttons.\n- Sets `aria-busy` while `loading` and blocks interaction.\n- A disabled link button drops `href` and sets `aria-disabled` with `tabindex=\"-1\"`."
|
|
2615
2615
|
}
|
|
2616
2616
|
],
|
|
2617
|
-
"markdown": "---\ntitle: Button\ncategory: 01 / BASIC\ndescription: A button that triggers an immediate action.\n---\n\n# Button\n\nUse Button for submit, confirm, navigate, and other immediate actions.\n\n## When to use\n\n- Primary action: `type=\"primary\"`. Keep one primary action in a region.\n- Secondary action: the default button, or `type=\"dashed\"` / `type=\"text\"`.\n- Inline or low-emphasis action: `type=\"link\"` / `type=\"text\"`.\n- Destructive action: add `danger`, and confirm when needed.\n- Adjacent actions that should look joined: wrap them in `MButtonGroup` (visual only).\n\n## Import\n\n```ts\nimport { MButton, MButtonGroup } from 'morya-ui'\n```\n\n## Examples\n\n### Basic\n\n`type` is sugar for a `color` + `variant` pair. Omit it for the default outlined button.\n\n```vue preview src=\"./demos/Basic.vue\"\n\n```\n\n### Color & variant\n\nSet `color` and `variant` for finer control. When both are set, they win over `type`.\n\n```vue preview src=\"./demos/ColorVariant.vue\"\n\n```\n\n### Icon\n\n`icon` accepts a name or component. Use `iconPlacement` for position. Icon-only buttons need `ariaLabel`.\n\n```vue preview src=\"./demos/Icon.vue\"\n\n```\n\n### Size\n\n```vue preview src=\"./demos/Size.vue\"\n\n```\n\n### Shape\n\n`shape`: `default` / `round` / `circle` / `square`.\n\n```vue preview src=\"./demos/Shape.vue\"\n\n```\n\n### Danger\n\n`danger` switches the color to danger while keeping the current `type` / `variant` look.\n\n```vue preview src=\"./demos/Danger.vue\"\n\n```\n\n### Ghost\n\n`ghost` makes the background transparent for dark or busy surfaces. It is ignored for `text` / `link`.\n\n```vue preview src=\"./demos/Ghost.vue\"\n\n```\n\n### Loading\n\n`loading` accepts a boolean or `{ delay, icon }`. Clicks are blocked while loading.\n\n```vue preview src=\"./demos/Loading.vue\"\n\n```\n\n### Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n\n```\n\n### Block\n\n`block` stretches the button to the parent width.\n\n```vue preview src=\"./demos/Block.vue\"\n\n```\n\n### Button group\n\n`MButtonGroup` only joins adjacent buttons visually. It has no selected state. For mutually exclusive switching, use [`SelectButton`](/components/SelectButton).\n\n```vue preview src=\"./demos/ButtonGroup.en.vue\"\n\n```\n\n### Ripple & press\n\n`ripple` and `press` are off by default. Turn them on when you want the motion.\n\n```vue preview src=\"./demos/RipplePress.vue\"\n\n```\n\n## API\n\nSuggested composition order: `type` → `shape` → `size` → `loading` → `disabled`.\n\n### Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `type` | `'default' \\| 'primary' \\| 'dashed' \\| 'link' \\| 'text'` | `'default'` | Sugar. When both `color` and `variant` are set, they win. |\n| `color` | `'default' \\| 'primary' \\| 'danger' \\| 'success' \\| 'info' \\| 'warning' \\| 'help' \\| 'contrast'` | — | Color axis. |\n| `variant` | `'solid' \\| 'outlined' \\| 'dashed' \\| 'filled' \\| 'text' \\| 'link'` | — | Variant axis. |\n| `danger` | `boolean` | `false` | Danger-color sugar. `color` wins when set. |\n| `ghost` | `boolean` | `false` | Transparent background. Ignored for `text` / `link`. |\n| `shape` | `'default' \\| 'circle' \\| 'round' \\| 'square'` | `'default'` | Corner shape. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size; can inherit from ConfigProvider. |\n| `block` | `boolean` | `false` | Stretch to the parent width. |\n| `loading` | `boolean \\| { delay?: number; icon?: IconName \\| Component }` | `false` | Loading state with optional delay and icon. |\n| `disabled` | `boolean` | `false` | Disabled; can inherit from ConfigProvider. |\n| `htmlType` | `'button' \\| 'submit' \\| 'reset'` | `'button'` | Native button `type`. |\n| `href` | `string` | — | Renders as `<a>` when set. |\n| `target` | `string` | — | Anchor `target`; requires `href`. |\n| `label` | `string` | — | Label text; the default slot wins when present. |\n| `icon` | `IconName \\| Component` | — | Icon name or component. |\n| `iconPlacement` | `'start' \\| 'end'` | `'start'` | Icon placement. |\n| `iconOnly` | `boolean` | `false` | Force a square icon-only button. |\n| `autoInsertSpace` | `boolean` | `true` | Insert a space between two Chinese characters. |\n| `ripple` | `boolean` | `false` | Click ripple. |\n| `press` | `boolean` | `false` | Press scale. |\n| `autofocus` | `boolean` | `false` | Native autofocus. |\n| `ariaLabel` | `string` | — | Accessible name; recommended for icon-only buttons. |\n| `pt` | `{ root?, icon?, content? }` | — | Semantic DOM pass-through. |\n\n### Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `click` | `MouseEvent` | Fired on click; suppressed while `loading` / `disabled`. |\n\n### Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Button content; wins over `label`. |\n| `icon` | Custom icon. |\n| `loadingicon` | Custom loading icon. |\n\n### Instance\n\n| Member | Description |\n| --- | --- |\n| `focus()` | Focus the root element. |\n| `ref` | Root `HTMLButtonElement` or `HTMLAnchorElement`. |\n\n### MButtonGroup Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `block` | `boolean` | `false` | Stretch to the parent width. |\n| `ariaLabel` | `string` | — | Accessible name for the group. |\n| `pt` | `{ root? }` | — | Group wrapper pass-through. |\n\n## Design Token\n\nReuses global `--m-*` tokens; see [Design Tokens](/docs/design-tokens). Button exposes `--m-button-*` on the root (size, radius, tones, fill opacity, motion). Theme switches follow `--m-color-*` / `--m-control-*` / `--m-motion-*`.\n\n## Semantic DOM\n\nThe root is the interactive element: `<a class=\"m-button\">` when `href` is set, otherwise `<button class=\"m-button\">`.\n\n```text\nbutton.m-button / a.m-button\n span.m-button__ripple* ← when ripple is on\n span.m-button__icon* ← icon / loading\n span.m-button__label* ← label\n```\n\nOverride parts with `pt.root` / `pt.icon` / `pt.content`. See also [Attrs](/docs/attrs) and [Common Props](/docs/common-props).\n\n## FAQ\n\n### How do I choose between `type` and `color` / `variant`?\n\nPrefer `type` for everyday use. Reach for `color` + `variant` when you need finer cross-tone control. When both axes are set, they override `type`.\n\n| `type` | Equals |\n| --- | --- |\n| `primary` | `color=\"primary\"` + `variant=\"solid\"` |\n| `default` | `color=\"default\"` + `variant=\"outlined\"` |\n| `dashed` | `color=\"default\"` + `variant=\"dashed\"` |\n| `text` | `color=\"default\"` + `variant=\"text\"` |\n| `link` | `color=\"link\"` + `variant=\"link\"` |\n\n```vue\n<MButton type=\"primary\">Save</MButton>\n```\n\nequals\n\n```vue\n<MButton color=\"primary\" variant=\"solid\">Save</MButton>\n```\n\n### Button `color` vs other components' `
|
|
2617
|
+
"markdown": "---\ntitle: Button\ncategory: 01 / BASIC\ndescription: A button that triggers an immediate action.\n---\n\n# Button\n\nUse Button for submit, confirm, navigate, and other immediate actions.\n\n## When to use\n\n- Primary action: `type=\"primary\"`. Keep one primary action in a region.\n- Secondary action: the default button, or `type=\"dashed\"` / `type=\"text\"`.\n- Inline or low-emphasis action: `type=\"link\"` / `type=\"text\"`.\n- Destructive action: add `danger`, and confirm when needed.\n- Adjacent actions that should look joined: wrap them in `MButtonGroup` (visual only).\n\n## Import\n\n```ts\nimport { MButton, MButtonGroup } from 'morya-ui'\n```\n\n## Examples\n\n### Basic\n\n`type` is sugar for a `color` + `variant` pair. Omit it for the default outlined button.\n\n```vue preview src=\"./demos/Basic.vue\"\n\n```\n\n### Color & variant\n\nSet `color` and `variant` for finer control. When both are set, they win over `type`.\n\n```vue preview src=\"./demos/ColorVariant.vue\"\n\n```\n\n### Icon\n\n`icon` accepts a name or component. Use `iconPlacement` for position. Icon-only buttons need `ariaLabel`.\n\n```vue preview src=\"./demos/Icon.vue\"\n\n```\n\n### Size\n\n```vue preview src=\"./demos/Size.vue\"\n\n```\n\n### Shape\n\n`shape`: `default` / `round` / `circle` / `square`.\n\n```vue preview src=\"./demos/Shape.vue\"\n\n```\n\n### Danger\n\n`danger` switches the color to danger while keeping the current `type` / `variant` look.\n\n```vue preview src=\"./demos/Danger.vue\"\n\n```\n\n### Ghost\n\n`ghost` makes the background transparent for dark or busy surfaces. It is ignored for `text` / `link`.\n\n```vue preview src=\"./demos/Ghost.vue\"\n\n```\n\n### Loading\n\n`loading` accepts a boolean or `{ delay, icon }`. Clicks are blocked while loading.\n\n```vue preview src=\"./demos/Loading.vue\"\n\n```\n\n### Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n\n```\n\n### Block\n\n`block` stretches the button to the parent width.\n\n```vue preview src=\"./demos/Block.vue\"\n\n```\n\n### Button group\n\n`MButtonGroup` only joins adjacent buttons visually. It has no selected state. For mutually exclusive switching, use [`SelectButton`](/components/SelectButton).\n\n```vue preview src=\"./demos/ButtonGroup.en.vue\"\n\n```\n\n### Ripple & press\n\n`ripple` and `press` are off by default. Turn them on when you want the motion.\n\n```vue preview src=\"./demos/RipplePress.vue\"\n\n```\n\n## API\n\nSuggested composition order: `type` → `shape` → `size` → `loading` → `disabled`.\n\n### Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `type` | `'default' \\| 'primary' \\| 'dashed' \\| 'link' \\| 'text'` | `'default'` | Sugar. When both `color` and `variant` are set, they win. |\n| `color` | `'default' \\| 'primary' \\| 'danger' \\| 'success' \\| 'info' \\| 'warning' \\| 'help' \\| 'contrast'` | — | Color axis. |\n| `variant` | `'solid' \\| 'outlined' \\| 'dashed' \\| 'filled' \\| 'text' \\| 'link'` | — | Variant axis. |\n| `danger` | `boolean` | `false` | Danger-color sugar. `color` wins when set. |\n| `ghost` | `boolean` | `false` | Transparent background. Ignored for `text` / `link`. |\n| `shape` | `'default' \\| 'circle' \\| 'round' \\| 'square'` | `'default'` | Corner shape. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size; can inherit from ConfigProvider. |\n| `block` | `boolean` | `false` | Stretch to the parent width. |\n| `loading` | `boolean \\| { delay?: number; icon?: IconName \\| Component }` | `false` | Loading state with optional delay and icon. |\n| `disabled` | `boolean` | `false` | Disabled; can inherit from ConfigProvider. |\n| `htmlType` | `'button' \\| 'submit' \\| 'reset'` | `'button'` | Native button `type`. |\n| `href` | `string` | — | Renders as `<a>` when set. |\n| `target` | `string` | — | Anchor `target`; requires `href`. |\n| `label` | `string` | — | Label text; the default slot wins when present. |\n| `icon` | `IconName \\| Component` | — | Icon name or component. |\n| `iconPlacement` | `'start' \\| 'end'` | `'start'` | Icon placement. |\n| `iconOnly` | `boolean` | `false` | Force a square icon-only button. |\n| `autoInsertSpace` | `boolean` | `true` | Insert a space between two Chinese characters. |\n| `ripple` | `boolean` | `false` | Click ripple. |\n| `press` | `boolean` | `false` | Press scale. |\n| `autofocus` | `boolean` | `false` | Native autofocus. |\n| `ariaLabel` | `string` | — | Accessible name; recommended for icon-only buttons. |\n| `pt` | `{ root?, icon?, content? }` | — | Semantic DOM pass-through. |\n\n### Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `click` | `MouseEvent` | Fired on click; suppressed while `loading` / `disabled`. |\n\n### Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Button content; wins over `label`. |\n| `icon` | Custom icon. |\n| `loadingicon` | Custom loading icon. |\n\n### Instance\n\n| Member | Description |\n| --- | --- |\n| `focus()` | Focus the root element. |\n| `ref` | Root `HTMLButtonElement` or `HTMLAnchorElement`. |\n\n### MButtonGroup Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `block` | `boolean` | `false` | Stretch to the parent width. |\n| `ariaLabel` | `string` | — | Accessible name for the group. |\n| `pt` | `{ root? }` | — | Group wrapper pass-through. |\n\n## Design Token\n\nReuses global `--m-*` tokens; see [Design Tokens](/docs/design-tokens). Button exposes `--m-button-*` on the root (size, radius, tones, fill opacity, motion). Theme switches follow `--m-color-*` / `--m-control-*` / `--m-motion-*`.\n\n## Semantic DOM\n\nThe root is the interactive element: `<a class=\"m-button\">` when `href` is set, otherwise `<button class=\"m-button\">`.\n\n```text\nbutton.m-button / a.m-button\n span.m-button__ripple* ← when ripple is on\n span.m-button__icon* ← icon / loading\n span.m-button__label* ← label\n```\n\nOverride parts with `pt.root` / `pt.icon` / `pt.content`. See also [Attrs](/docs/attrs) and [Common Props](/docs/common-props).\n\n## FAQ\n\n### How do I choose between `type` and `color` / `variant`?\n\nPrefer `type` for everyday use. Reach for `color` + `variant` when you need finer cross-tone control. When both axes are set, they override `type`.\n\n| `type` | Equals |\n| --- | --- |\n| `primary` | `color=\"primary\"` + `variant=\"solid\"` |\n| `default` | `color=\"default\"` + `variant=\"outlined\"` |\n| `dashed` | `color=\"default\"` + `variant=\"dashed\"` |\n| `text` | `color=\"default\"` + `variant=\"text\"` |\n| `link` | `color=\"link\"` + `variant=\"link\"` |\n\n```vue\n<MButton type=\"primary\">Save</MButton>\n```\n\nequals\n\n```vue\n<MButton color=\"primary\" variant=\"solid\">Save</MButton>\n```\n\n### Button `color` vs other components' `type`?\n\nButton uses `color` / `variant` (plus appearance sugar `type`) for button look. On Badge, Tag, Status, Alert, Message, and Toast, `type` means semantic tone with a different value set—do not mix it with Button's sugar `type`.\n\n### `text` vs `link`?\n\n`type=\"text\"` (or `variant=\"text\"`) keeps button height and hit area. `type=\"link\"` is closer to an inline link.\n\n## Accessibility\n\n- Renders a native `<button>` by default; renders `<a>` when `href` is set.\n- Provide `ariaLabel` (or visible text) for icon-only buttons.\n- Sets `aria-busy` while `loading` and blocks interaction.\n- A disabled link button drops `href` and sets `aria-disabled` with `tabindex=\"-1\"`.\n"
|
|
2618
2618
|
}
|
|
2619
2619
|
}
|
|
2620
2620
|
},
|
|
@@ -2956,7 +2956,7 @@
|
|
|
2956
2956
|
"sectionId": "custom-header",
|
|
2957
2957
|
"lang": "vue",
|
|
2958
2958
|
"preview": true,
|
|
2959
|
-
"code": "<script setup lang=\"ts\">\nimport { MCard, MTag } from 'morya-ui'\n</script>\n\n<template>\n <MCard>\n <template #header>\n <div style=\"display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem\">\n <strong>Custom header</strong>\n <MTag value=\"Active\"
|
|
2959
|
+
"code": "<script setup lang=\"ts\">\nimport { MCard, MTag } from 'morya-ui'\n</script>\n\n<template>\n <MCard>\n <template #header>\n <div style=\"display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem\">\n <strong>Custom header</strong>\n <MTag value=\"Active\" type=\"success\" />\n </div>\n </template>\n Prefer the header slot when you need more than title/subtitle text.\n </MCard>\n</template>",
|
|
2960
2960
|
"locale": "zh-CN"
|
|
2961
2961
|
},
|
|
2962
2962
|
{
|
|
@@ -3001,7 +3001,7 @@
|
|
|
3001
3001
|
"sectionId": "custom-header",
|
|
3002
3002
|
"lang": "vue",
|
|
3003
3003
|
"preview": true,
|
|
3004
|
-
"code": "<script setup lang=\"ts\">\nimport { MCard, MTag } from 'morya-ui'\n</script>\n\n<template>\n <MCard>\n <template #header>\n <div style=\"display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem\">\n <strong>Custom header</strong>\n <MTag value=\"Active\"
|
|
3004
|
+
"code": "<script setup lang=\"ts\">\nimport { MCard, MTag } from 'morya-ui'\n</script>\n\n<template>\n <MCard>\n <template #header>\n <div style=\"display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem\">\n <strong>Custom header</strong>\n <MTag value=\"Active\" type=\"success\" />\n </div>\n </template>\n Prefer the header slot when you need more than title/subtitle text.\n </MCard>\n</template>",
|
|
3005
3005
|
"locale": "en-US"
|
|
3006
3006
|
},
|
|
3007
3007
|
{
|
|
@@ -4263,8 +4263,8 @@
|
|
|
4263
4263
|
"description": "禁用交互。"
|
|
4264
4264
|
},
|
|
4265
4265
|
{
|
|
4266
|
-
"name": "
|
|
4267
|
-
"type": "
|
|
4266
|
+
"name": "type",
|
|
4267
|
+
"type": "MTagType",
|
|
4268
4268
|
"default": "—",
|
|
4269
4269
|
"description": "语义色。"
|
|
4270
4270
|
},
|
|
@@ -4315,7 +4315,7 @@
|
|
|
4315
4315
|
"sectionId": "基础用法",
|
|
4316
4316
|
"lang": "vue",
|
|
4317
4317
|
"preview": true,
|
|
4318
|
-
"code": "<script setup lang=\"ts\">\nimport { MChip } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MChip label=\"Basic\" />\n <MChip label=\"With Icon\" icon=\"check\" />\n <MChip label=\"Removable\" removable />\n <MChip label=\"Success\"
|
|
4318
|
+
"code": "<script setup lang=\"ts\">\nimport { MChip } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MChip label=\"Basic\" />\n <MChip label=\"With Icon\" icon=\"check\" />\n <MChip label=\"Removable\" removable />\n <MChip label=\"Success\" type=\"success\" size=\"small\" />\n <MChip label=\"Disabled\" removable disabled />\n </div>\n</template>",
|
|
4319
4319
|
"locale": "zh-CN"
|
|
4320
4320
|
},
|
|
4321
4321
|
{
|
|
@@ -4333,7 +4333,7 @@
|
|
|
4333
4333
|
"sectionId": "basic",
|
|
4334
4334
|
"lang": "vue",
|
|
4335
4335
|
"preview": true,
|
|
4336
|
-
"code": "<script setup lang=\"ts\">\nimport { MChip } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MChip label=\"Basic\" />\n <MChip label=\"With Icon\" icon=\"check\" />\n <MChip label=\"Removable\" removable />\n <MChip label=\"Success\"
|
|
4336
|
+
"code": "<script setup lang=\"ts\">\nimport { MChip } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MChip label=\"Basic\" />\n <MChip label=\"With Icon\" icon=\"check\" />\n <MChip label=\"Removable\" removable />\n <MChip label=\"Success\" type=\"success\" size=\"small\" />\n <MChip label=\"Disabled\" removable disabled />\n </div>\n</template>",
|
|
4337
4337
|
"locale": "en-US"
|
|
4338
4338
|
}
|
|
4339
4339
|
],
|
|
@@ -4360,7 +4360,7 @@
|
|
|
4360
4360
|
{
|
|
4361
4361
|
"id": "props",
|
|
4362
4362
|
"title": "Props",
|
|
4363
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 芯片文案。 |\n| `icon` | [IconName](/docs/types#IconName) | — | 前置图标名称。 |\n| `image` | `string` | — | 前置图片 URL（优先于 icon）。 |\n| `removable` | `boolean` | `false` | 显示 × 移除按钮。 |\n| `disabled` | `boolean` | `false` | 禁用交互。 |\n| `
|
|
4363
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 芯片文案。 |\n| `icon` | [IconName](/docs/types#IconName) | — | 前置图标名称。 |\n| `image` | `string` | — | 前置图片 URL（优先于 icon）。 |\n| `removable` | `boolean` | `false` | 显示 × 移除按钮。 |\n| `disabled` | `boolean` | `false` | 禁用交互。 |\n| `type` | `MTagType` | — | 语义色。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
4364
4364
|
},
|
|
4365
4365
|
{
|
|
4366
4366
|
"id": "events",
|
|
@@ -4373,7 +4373,7 @@
|
|
|
4373
4373
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 标签内容。 |\n| `icon` | 前置图标。 |"
|
|
4374
4374
|
}
|
|
4375
4375
|
],
|
|
4376
|
-
"markdown": "---\ntitle: Chip\ncategory: 01 / BASIC\ndescription: 芯片用于展示标签化信息，可带图标、图片与移除操作。\n---\n\n# Chip\n\n芯片用于展示简短标签信息，可选图标/图片与移除按钮。\n\n## 引入\n\n```ts\nimport { MChip } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 芯片文案。 |\n| `icon` | [IconName](/docs/types#IconName) | — | 前置图标名称。 |\n| `image` | `string` | — | 前置图片 URL（优先于 icon）。 |\n| `removable` | `boolean` | `false` | 显示 × 移除按钮。 |\n| `disabled` | `boolean` | `false` | 禁用交互。 |\n| `
|
|
4376
|
+
"markdown": "---\ntitle: Chip\ncategory: 01 / BASIC\ndescription: 芯片用于展示标签化信息，可带图标、图片与移除操作。\n---\n\n# Chip\n\n芯片用于展示简短标签信息，可选图标/图片与移除按钮。\n\n## 引入\n\n```ts\nimport { MChip } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 芯片文案。 |\n| `icon` | [IconName](/docs/types#IconName) | — | 前置图标名称。 |\n| `image` | `string` | — | 前置图片 URL（优先于 icon）。 |\n| `removable` | `boolean` | `false` | 显示 × 移除按钮。 |\n| `disabled` | `boolean` | `false` | 禁用交互。 |\n| `type` | `MTagType` | — | 语义色。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `remove` | `MouseEvent` | 点击移除按钮时触发。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 标签内容。 |\n| `icon` | 前置图标。 |\n"
|
|
4377
4377
|
},
|
|
4378
4378
|
"en-US": {
|
|
4379
4379
|
"title": "Chip",
|
|
@@ -4397,7 +4397,7 @@
|
|
|
4397
4397
|
{
|
|
4398
4398
|
"id": "props",
|
|
4399
4399
|
"title": "Props",
|
|
4400
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `label` | `string` | 鈥?| Chip text. |\n| `icon` | [IconName](/docs/types#IconName) | 鈥?| Leading icon name. |\n| `image` | `string` | 鈥?| Leading image URL (takes precedence over icon). |\n| `removable` | `boolean` | `false` | Show 脳 remove button. |\n| `disabled` | `boolean` | `false` | Disable interaction. |\n| `
|
|
4400
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `label` | `string` | 鈥?| Chip text. |\n| `icon` | [IconName](/docs/types#IconName) | 鈥?| Leading icon name. |\n| `image` | `string` | 鈥?| Leading image URL (takes precedence over icon). |\n| `removable` | `boolean` | `false` | Show 脳 remove button. |\n| `disabled` | `boolean` | `false` | Disable interaction. |\n| `type` | `MTagType` | — | Semantic color. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | 鈥?| Size. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM pass-through; see [attrs](/docs/attrs). |"
|
|
4401
4401
|
},
|
|
4402
4402
|
{
|
|
4403
4403
|
"id": "events",
|
|
@@ -4410,7 +4410,7 @@
|
|
|
4410
4410
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Label content. |\n| `icon` | Leading icon. |"
|
|
4411
4411
|
}
|
|
4412
4412
|
],
|
|
4413
|
-
"markdown": "---\ntitle: Chip\ncategory: 01 / BASIC\ndescription: Chip displays tagged information, optionally with an icon, image, and remove action.\n---\n\n# Chip\n\nChip displays short tagged information, with optional icon/image and a remove button.\n\n## Import\n\n```ts\nimport { MChip } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `label` | `string` | 鈥?| Chip text. |\n| `icon` | [IconName](/docs/types#IconName) | 鈥?| Leading icon name. |\n| `image` | `string` | 鈥?| Leading image URL (takes precedence over icon). |\n| `removable` | `boolean` | `false` | Show 脳 remove button. |\n| `disabled` | `boolean` | `false` | Disable interaction. |\n| `
|
|
4413
|
+
"markdown": "---\ntitle: Chip\ncategory: 01 / BASIC\ndescription: Chip displays tagged information, optionally with an icon, image, and remove action.\n---\n\n# Chip\n\nChip displays short tagged information, with optional icon/image and a remove button.\n\n## Import\n\n```ts\nimport { MChip } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `label` | `string` | 鈥?| Chip text. |\n| `icon` | [IconName](/docs/types#IconName) | 鈥?| Leading icon name. |\n| `image` | `string` | 鈥?| Leading image URL (takes precedence over icon). |\n| `removable` | `boolean` | `false` | Show 脳 remove button. |\n| `disabled` | `boolean` | `false` | Disable interaction. |\n| `type` | `MTagType` | — | Semantic color. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | 鈥?| Size. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM pass-through; see [attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `remove` | `MouseEvent` | Fired when the remove button is clicked. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Label content. |\n| `icon` | Leading icon. |\n"
|
|
4414
4414
|
}
|
|
4415
4415
|
}
|
|
4416
4416
|
},
|
|
@@ -5074,7 +5074,7 @@
|
|
|
5074
5074
|
},
|
|
5075
5075
|
{
|
|
5076
5076
|
"name": "type",
|
|
5077
|
-
"type": "'info' | 'success' | 'warning' | '
|
|
5077
|
+
"type": "'info' | 'success' | 'warning' | 'danger'",
|
|
5078
5078
|
"default": "—",
|
|
5079
5079
|
"description": "正文状态图标；确认流程用本组件，Dialog `type` 只做标题图标。"
|
|
5080
5080
|
},
|
|
@@ -5232,7 +5232,7 @@
|
|
|
5232
5232
|
{
|
|
5233
5233
|
"id": "props",
|
|
5234
5234
|
"title": "Props",
|
|
5235
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 是否可见。 |\n| `header` | `string` | `'确认'` | 标题。 |\n| `message` | `string` | — | 正文。 |\n| `acceptLabel` | `string` | `'确认'` | 确认按钮文案。 |\n| `rejectLabel` | `string` | `'取消'` | 取消按钮文案。 |\n| `acceptColor` | [ButtonColor](/docs/types#ButtonColor) | — | 确认按钮颜色。 |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| '
|
|
5235
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 是否可见。 |\n| `header` | `string` | `'确认'` | 标题。 |\n| `message` | `string` | — | 正文。 |\n| `acceptLabel` | `string` | `'确认'` | 确认按钮文案。 |\n| `rejectLabel` | `string` | `'取消'` | 取消按钮文案。 |\n| `acceptColor` | [ButtonColor](/docs/types#ButtonColor) | — | 确认按钮颜色。 |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'danger'` | — | 正文状态图标；确认流程用本组件，Dialog `type` 只做标题图标。 |\n| `loading` | `boolean` | `false` | 确认按钮加载中。 |\n| `beforeAccept` | `() => unknown \\| Promise<unknown>` | — | 返回 `false` 则不关闭、不触发 `accept`。 |\n| `beforeReject` | `() => unknown \\| Promise<unknown>` | — | 返回 `false` 则不关闭、不触发 `reject`。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'zoom'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `blockScroll` | `boolean` | — | — |\n| `closeOnEsc` | `boolean` | — | — |\n| `closeOnOutsideClick` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
5236
5236
|
},
|
|
5237
5237
|
{
|
|
5238
5238
|
"id": "events",
|
|
@@ -5245,7 +5245,7 @@
|
|
|
5245
5245
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 对话框正文。 |\n| `footer` | 自定义 `footer` 内容。 |\n| `header` | 自定义 `header` 内容。 |"
|
|
5246
5246
|
}
|
|
5247
5247
|
],
|
|
5248
|
-
"markdown": "---\ntitle: ConfirmDialog\ncategory: 05 / FEEDBACK\ndescription: 确认 / 取消对话框，复用 Dialog 浮层样式。\n---\n\n# ConfirmDialog\n\n需要用户明确确认时使用的模态对话框。\n\n## 引入\n\n```ts\nimport { MButton, MConfirmDialog } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 是否可见。 |\n| `header` | `string` | `'确认'` | 标题。 |\n| `message` | `string` | — | 正文。 |\n| `acceptLabel` | `string` | `'确认'` | 确认按钮文案。 |\n| `rejectLabel` | `string` | `'取消'` | 取消按钮文案。 |\n| `acceptColor` | [ButtonColor](/docs/types#ButtonColor) | — | 确认按钮颜色。 |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| '
|
|
5248
|
+
"markdown": "---\ntitle: ConfirmDialog\ncategory: 05 / FEEDBACK\ndescription: 确认 / 取消对话框，复用 Dialog 浮层样式。\n---\n\n# ConfirmDialog\n\n需要用户明确确认时使用的模态对话框。\n\n## 引入\n\n```ts\nimport { MButton, MConfirmDialog } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 是否可见。 |\n| `header` | `string` | `'确认'` | 标题。 |\n| `message` | `string` | — | 正文。 |\n| `acceptLabel` | `string` | `'确认'` | 确认按钮文案。 |\n| `rejectLabel` | `string` | `'取消'` | 取消按钮文案。 |\n| `acceptColor` | [ButtonColor](/docs/types#ButtonColor) | — | 确认按钮颜色。 |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'danger'` | — | 正文状态图标；确认流程用本组件，Dialog `type` 只做标题图标。 |\n| `loading` | `boolean` | `false` | 确认按钮加载中。 |\n| `beforeAccept` | `() => unknown \\| Promise<unknown>` | — | 返回 `false` 则不关闭、不触发 `accept`。 |\n| `beforeReject` | `() => unknown \\| Promise<unknown>` | — | 返回 `false` 则不关闭、不触发 `reject`。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'zoom'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `blockScroll` | `boolean` | — | — |\n| `closeOnEsc` | `boolean` | — | — |\n| `closeOnOutsideClick` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 可见性变化。 |\n| `accept` | — | 点击确认。 |\n| `reject` | — | 点击取消或关闭。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 对话框正文。 |\n| `footer` | 自定义 `footer` 内容。 |\n| `header` | 自定义 `header` 内容。 |\n"
|
|
5249
5249
|
},
|
|
5250
5250
|
"en-US": {
|
|
5251
5251
|
"title": "ConfirmDialog",
|
|
@@ -5269,7 +5269,7 @@
|
|
|
5269
5269
|
{
|
|
5270
5270
|
"id": "props",
|
|
5271
5271
|
"title": "Props",
|
|
5272
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. |\n| `header` | `string` | locale `confirm` | Title. |\n| `message` | `string` | — | Body text. |\n| `acceptLabel` | `string` | locale `accept` | Accept button label. |\n| `rejectLabel` | `string` | locale `reject` | Reject button label. |\n| `acceptColor` | [ButtonColor](/docs/types#ButtonColor) | — | Accept button color. |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| '
|
|
5272
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. |\n| `header` | `string` | locale `confirm` | Title. |\n| `message` | `string` | — | Body text. |\n| `acceptLabel` | `string` | locale `accept` | Accept button label. |\n| `rejectLabel` | `string` | locale `reject` | Reject button label. |\n| `acceptColor` | [ButtonColor](/docs/types#ButtonColor) | — | Accept button color. |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'danger'` | — | Status icon beside the message. |\n| `loading` | `boolean` | `false` | Loading state on the accept button. |\n| `beforeAccept` | `() => unknown \\| Promise<unknown>` | — | Return `false` to keep open and skip `accept`. |\n| `beforeReject` | `() => unknown \\| Promise<unknown>` | — | Return `false` to keep open and skip `reject`. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'zoom'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
5273
5273
|
},
|
|
5274
5274
|
{
|
|
5275
5275
|
"id": "events",
|
|
@@ -5282,7 +5282,7 @@
|
|
|
5282
5282
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Dialog body. |"
|
|
5283
5283
|
}
|
|
5284
5284
|
],
|
|
5285
|
-
"markdown": "---\ntitle: ConfirmDialog\ncategory: 05 / FEEDBACK\ndescription: Confirm / cancel dialog that reuses Dialog overlay styling.\n---\n\n# ConfirmDialog\n\nModal dialog used when the user must explicitly confirm an action.\n\n## Import\n\n```ts\nimport { MButton, MConfirmDialog } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. |\n| `header` | `string` | locale `confirm` | Title. |\n| `message` | `string` | — | Body text. |\n| `acceptLabel` | `string` | locale `accept` | Accept button label. |\n| `rejectLabel` | `string` | locale `reject` | Reject button label. |\n| `acceptColor` | [ButtonColor](/docs/types#ButtonColor) | — | Accept button color. |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| '
|
|
5285
|
+
"markdown": "---\ntitle: ConfirmDialog\ncategory: 05 / FEEDBACK\ndescription: Confirm / cancel dialog that reuses Dialog overlay styling.\n---\n\n# ConfirmDialog\n\nModal dialog used when the user must explicitly confirm an action.\n\n## Import\n\n```ts\nimport { MButton, MConfirmDialog } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. |\n| `header` | `string` | locale `confirm` | Title. |\n| `message` | `string` | — | Body text. |\n| `acceptLabel` | `string` | locale `accept` | Accept button label. |\n| `rejectLabel` | `string` | locale `reject` | Reject button label. |\n| `acceptColor` | [ButtonColor](/docs/types#ButtonColor) | — | Accept button color. |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'danger'` | — | Status icon beside the message. |\n| `loading` | `boolean` | `false` | Loading state on the accept button. |\n| `beforeAccept` | `() => unknown \\| Promise<unknown>` | — | Return `false` to keep open and skip `accept`. |\n| `beforeReject` | `() => unknown \\| Promise<unknown>` | — | Return `false` to keep open and skip `reject`. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'zoom'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Visibility change. |\n| `accept` | — | Accept clicked. |\n| `reject` | — | Reject clicked or dialog closed. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Dialog body. |\n"
|
|
5286
5286
|
}
|
|
5287
5287
|
}
|
|
5288
5288
|
},
|
|
@@ -6949,9 +6949,9 @@
|
|
|
6949
6949
|
},
|
|
6950
6950
|
{
|
|
6951
6951
|
"name": "type",
|
|
6952
|
-
"type": "'info' | 'success' | 'warning' | '
|
|
6952
|
+
"type": "'info' | 'success' | 'warning' | 'danger'",
|
|
6953
6953
|
"default": "—",
|
|
6954
|
-
"description": "
|
|
6954
|
+
"description": "标题状态图标"
|
|
6955
6955
|
},
|
|
6956
6956
|
{
|
|
6957
6957
|
"name": "positiveText",
|
|
@@ -7286,7 +7286,7 @@
|
|
|
7286
7286
|
{
|
|
7287
7287
|
"id": "props",
|
|
7288
7288
|
"title": "Props",
|
|
7289
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用。 |\n| `title` | `string` | — | 标题文案。 |\n| `header` | `string` | — | `title` 的别名。 |\n| `closeOnEsc` | `boolean` | `true` | 按 Esc 关闭。 |\n| `blockScroll` | `boolean` | `true` | 打开时锁定页面滚动（`modal` 时生效）。 |\n| `closeOnOutsideClick` | `boolean` | `true` | 点击遮罩关闭。 |\n| `dismissableMask` | `boolean` | — | `closeOnOutsideClick` 的别名。 |\n| `maskClosable` | `boolean` | — | `closeOnOutsideClick` 的别名。 |\n| `closable` | `boolean` | `true` | 显示关闭按钮。 |\n| `maximizable` | `boolean` | `false` | 显示最大化 / 还原按钮。 |\n| `modal` | `boolean` | `true` | 遮罩层。 |\n| `position` | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'topleft' \\| 'topright' \\| 'bottomleft' \\| 'bottomright'` | `'center'` | 对话框位置。 |\n| `centered` | `boolean` | — | 垂直居中：`true` → `center`，`false` → `top`；省略时用 `position`。 |\n| `width` | `string` | — | 对话框宽度（最大化时忽略）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | 挂载目标；`'self'` 就地渲染。 |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| '
|
|
7289
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用。 |\n| `title` | `string` | — | 标题文案。 |\n| `header` | `string` | — | `title` 的别名。 |\n| `closeOnEsc` | `boolean` | `true` | 按 Esc 关闭。 |\n| `blockScroll` | `boolean` | `true` | 打开时锁定页面滚动（`modal` 时生效）。 |\n| `closeOnOutsideClick` | `boolean` | `true` | 点击遮罩关闭。 |\n| `dismissableMask` | `boolean` | — | `closeOnOutsideClick` 的别名。 |\n| `maskClosable` | `boolean` | — | `closeOnOutsideClick` 的别名。 |\n| `closable` | `boolean` | `true` | 显示关闭按钮。 |\n| `maximizable` | `boolean` | `false` | 显示最大化 / 还原按钮。 |\n| `modal` | `boolean` | `true` | 遮罩层。 |\n| `position` | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'topleft' \\| 'topright' \\| 'bottomleft' \\| 'bottomright'` | `'center'` | 对话框位置。 |\n| `centered` | `boolean` | — | 垂直居中：`true` → `center`，`false` → `top`；省略时用 `position`。 |\n| `width` | `string` | — | 对话框宽度（最大化时忽略）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | 挂载目标；`'self'` 就地渲染。 |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'danger'` | — | 标题状态图标 |\n| `positiveText` / `negativeText` | `string` | — | 预设页脚按钮；有 `footer` 插槽时忽略 |\n| `positiveColor` | [ButtonColor](/docs/types#ButtonColor) | — | 确认按钮颜色 |\n| `onPositiveClick` / `onNegativeClick` | `(e) => unknown \\| Promise<unknown>` | — | 返回 `false` 则不关闭 |\n| `beforeClose` | `() => unknown \\| Promise<unknown>` | — | X / Esc / 遮罩关闭前；返回 `false` 则保持打开 |\n| `ariaLabel` | `string` | — | 对话框可访问名称。 |\n| `transition` | `string \\| false` | `'zoom'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | 遮罩层（backdrop）透传，键名 `root`。 |"
|
|
7290
7290
|
},
|
|
7291
7291
|
{
|
|
7292
7292
|
"id": "样式与-attrs",
|
|
@@ -7314,7 +7314,7 @@
|
|
|
7314
7314
|
"body": "不写模板也能弹出对话框：\n\n```ts\nimport { modal, useModal } from 'morya-ui'\n\n// 模块级单例\nmodal.confirm({\n title: '确认删除？',\n content: '删除后不可恢复',\n onOk: async () => { await remove() },\n})\n\n// 或组件内作用域实例\nconst dialog = useModal()\ndialog.success({ title: '已保存' })\n```\n\n每个调用返回 `{ destroy, update }`：`update` 可在打开时改标题/内容，`destroy` 立即关闭并卸载。`modal.destroyAll()` 关闭全部由该 API 创建的对话框。\n\n| 方法 | 说明 |\n| --- | --- |\n| `info(options)` | 信息弹窗（默认无取消按钮） |\n| `success(options)` | 成功弹窗 |\n| `warning(options)` | 警告弹窗 |\n| `error(options)` | 错误弹窗 |\n| `confirm(options)` | 确认弹窗（默认显示取消按钮） |\n| `destroyAll()` | 关闭全部 |\n\n`options` 传字符串等价于 `{ content: '...' }`。\n\n| 字段 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 标题 |\n| `content` | `string \\| VNode` | — | 内容 |\n| `type` | `DialogType` | — | 头部状态图标 |\n| `okText` / `cancelText` | `string` | locale | 按钮文案 |\n| `showCancel` | `boolean` | 状态弹窗 `false`，`confirm` `true` | 是否显示取消按钮 |\n| `okColor` | `ButtonColor` | `'primary'` | 确认按钮颜色 |\n| `width` / `position` / `centered` | 同 Dialog | — | 布局 |\n| `maskClosable` | `boolean` | `false` | 点击遮罩关闭 |\n| `onOk` | `() => void \\| Promise<void>` | — | 确认回调；返回 Promise 时按钮进入 loading |\n| `onCancel` | `() => void` | — | 取消 / 关闭回调 |\n| `afterClose` | `() => void` | — | 关闭动画结束后回调 |\n\n> 命令式弹窗就地渲染在挂载容器内（不 Teleport），便于精确销毁。\n| `footer` | 底部操作区。 |"
|
|
7315
7315
|
}
|
|
7316
7316
|
],
|
|
7317
|
-
"markdown": "---\ntitle: Dialog\ncategory: 05 / FEEDBACK\ndescription: 模态对话框。支持预设页脚、异步关闭拦截、状态 type。\n---\n\n# Dialog\n\n模态对话框。可见性使用 `v-model`（`modelValue`），对应 的 `visible`。\n\n## 引入\n\n```ts\nimport { MButton, MDialog } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Positions\n\n支持 `center` / `top` / `bottom` / `left` / `right` 以及四角位置。\n\n```vue preview src=\"./demos/Positions.vue\"\n```\n\n## Footer actions\n\n```vue preview src=\"./demos/FooterActions.vue\"\n```\n\n## No dismiss mask\n\n`dismissableMask={false}`（或 `closeOnOutsideClick={false}` / `maskClosable={false}`）时点击遮罩不关闭。\n\n```vue preview src=\"./demos/NoDismissMask.vue\"\n```\n\n## Maximizable\n\n`maximizable` 在标题栏提供最大化 / 还原切换。\n\n```vue preview src=\"./demos/Maximizable.vue\"\n```\n\n## 预设页脚与异步关闭\n\n`positiveText` / `negativeText` 生成确认 / 取消按钮（`footer` 插槽优先）。处理函数返回 `false`（含 Promise）则保持打开。确认型流程请用 [ConfirmDialog](/components/ConfirmDialog)；`type` 只负责 Dialog 标题图标。\n\n```vue preview src=\"./demos/PresetFooterAndAsyncClose.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用。 |\n| `title` | `string` | — | 标题文案。 |\n| `header` | `string` | — | `title` 的别名。 |\n| `closeOnEsc` | `boolean` | `true` | 按 Esc 关闭。 |\n| `blockScroll` | `boolean` | `true` | 打开时锁定页面滚动（`modal` 时生效）。 |\n| `closeOnOutsideClick` | `boolean` | `true` | 点击遮罩关闭。 |\n| `dismissableMask` | `boolean` | — | `closeOnOutsideClick` 的别名。 |\n| `maskClosable` | `boolean` | — | `closeOnOutsideClick` 的别名。 |\n| `closable` | `boolean` | `true` | 显示关闭按钮。 |\n| `maximizable` | `boolean` | `false` | 显示最大化 / 还原按钮。 |\n| `modal` | `boolean` | `true` | 遮罩层。 |\n| `position` | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'topleft' \\| 'topright' \\| 'bottomleft' \\| 'bottomright'` | `'center'` | 对话框位置。 |\n| `centered` | `boolean` | — | 垂直居中：`true` → `center`，`false` → `top`；省略时用 `position`。 |\n| `width` | `string` | — | 对话框宽度（最大化时忽略）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | 挂载目标；`'self'` 就地渲染。 |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| '
|
|
7317
|
+
"markdown": "---\ntitle: Dialog\ncategory: 05 / FEEDBACK\ndescription: 模态对话框。支持预设页脚、异步关闭拦截、状态 type。\n---\n\n# Dialog\n\n模态对话框。可见性使用 `v-model`（`modelValue`），对应 的 `visible`。\n\n## 引入\n\n```ts\nimport { MButton, MDialog } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Positions\n\n支持 `center` / `top` / `bottom` / `left` / `right` 以及四角位置。\n\n```vue preview src=\"./demos/Positions.vue\"\n```\n\n## Footer actions\n\n```vue preview src=\"./demos/FooterActions.vue\"\n```\n\n## No dismiss mask\n\n`dismissableMask={false}`（或 `closeOnOutsideClick={false}` / `maskClosable={false}`）时点击遮罩不关闭。\n\n```vue preview src=\"./demos/NoDismissMask.vue\"\n```\n\n## Maximizable\n\n`maximizable` 在标题栏提供最大化 / 还原切换。\n\n```vue preview src=\"./demos/Maximizable.vue\"\n```\n\n## 预设页脚与异步关闭\n\n`positiveText` / `negativeText` 生成确认 / 取消按钮（`footer` 插槽优先）。处理函数返回 `false`（含 Promise）则保持打开。确认型流程请用 [ConfirmDialog](/components/ConfirmDialog)；`type` 只负责 Dialog 标题图标。\n\n```vue preview src=\"./demos/PresetFooterAndAsyncClose.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用。 |\n| `title` | `string` | — | 标题文案。 |\n| `header` | `string` | — | `title` 的别名。 |\n| `closeOnEsc` | `boolean` | `true` | 按 Esc 关闭。 |\n| `blockScroll` | `boolean` | `true` | 打开时锁定页面滚动（`modal` 时生效）。 |\n| `closeOnOutsideClick` | `boolean` | `true` | 点击遮罩关闭。 |\n| `dismissableMask` | `boolean` | — | `closeOnOutsideClick` 的别名。 |\n| `maskClosable` | `boolean` | — | `closeOnOutsideClick` 的别名。 |\n| `closable` | `boolean` | `true` | 显示关闭按钮。 |\n| `maximizable` | `boolean` | `false` | 显示最大化 / 还原按钮。 |\n| `modal` | `boolean` | `true` | 遮罩层。 |\n| `position` | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'topleft' \\| 'topright' \\| 'bottomleft' \\| 'bottomright'` | `'center'` | 对话框位置。 |\n| `centered` | `boolean` | — | 垂直居中：`true` → `center`，`false` → `top`；省略时用 `position`。 |\n| `width` | `string` | — | 对话框宽度（最大化时忽略）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | 挂载目标；`'self'` 就地渲染。 |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'danger'` | — | 标题状态图标 |\n| `positiveText` / `negativeText` | `string` | — | 预设页脚按钮；有 `footer` 插槽时忽略 |\n| `positiveColor` | [ButtonColor](/docs/types#ButtonColor) | — | 确认按钮颜色 |\n| `onPositiveClick` / `onNegativeClick` | `(e) => unknown \\| Promise<unknown>` | — | 返回 `false` 则不关闭 |\n| `beforeClose` | `() => unknown \\| Promise<unknown>` | — | X / Esc / 遮罩关闭前；返回 `false` 则保持打开 |\n| `ariaLabel` | `string` | — | 对话框可访问名称。 |\n| `transition` | `string \\| false` | `'zoom'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | 遮罩层（backdrop）透传，键名 `root`。 |\n\n## 样式与 attrs\n\nDialog Teleport 到 `body` 后，你在组件上写的 fallthrough attrs（`class`、`style`、`data-*`、`title` 等）落在**遮罩层**（`.m-dialog-backdrop`），不是内层 `.m-dialog` 面板。面板宽度用 `width` prop；内层 DOM 用 `pt`。详见 [样式与 attrs](/docs/attrs)。\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 可见性变化。 |\n| `close` | — | 关闭时触发。 |\n| `show` | — | 打开时触发。 |\n| `hide` | — | 关闭后触发。 |\n| `maximize` | — | 进入最大化。 |\n| `unmaximize` | — | 退出最大化。 |\n\n## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `close()` | 关闭对话框（等同取消/关闭动作）。 |\n| `maximize()` | 最大化；已最大化时无操作。 |\n| `unmaximize()` | 退出最大化。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 对话框内容。 |\n| `header` | 自定义标题区。 |\n| `footer` | 底部操作区。 |\n\n## 命令式调用（useModal / modal）\n\n不写模板也能弹出对话框：\n\n```ts\nimport { modal, useModal } from 'morya-ui'\n\n// 模块级单例\nmodal.confirm({\n title: '确认删除？',\n content: '删除后不可恢复',\n onOk: async () => { await remove() },\n})\n\n// 或组件内作用域实例\nconst dialog = useModal()\ndialog.success({ title: '已保存' })\n```\n\n每个调用返回 `{ destroy, update }`：`update` 可在打开时改标题/内容，`destroy` 立即关闭并卸载。`modal.destroyAll()` 关闭全部由该 API 创建的对话框。\n\n| 方法 | 说明 |\n| --- | --- |\n| `info(options)` | 信息弹窗（默认无取消按钮） |\n| `success(options)` | 成功弹窗 |\n| `warning(options)` | 警告弹窗 |\n| `error(options)` | 错误弹窗 |\n| `confirm(options)` | 确认弹窗（默认显示取消按钮） |\n| `destroyAll()` | 关闭全部 |\n\n`options` 传字符串等价于 `{ content: '...' }`。\n\n| 字段 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 标题 |\n| `content` | `string \\| VNode` | — | 内容 |\n| `type` | `DialogType` | — | 头部状态图标 |\n| `okText` / `cancelText` | `string` | locale | 按钮文案 |\n| `showCancel` | `boolean` | 状态弹窗 `false`，`confirm` `true` | 是否显示取消按钮 |\n| `okColor` | `ButtonColor` | `'primary'` | 确认按钮颜色 |\n| `width` / `position` / `centered` | 同 Dialog | — | 布局 |\n| `maskClosable` | `boolean` | `false` | 点击遮罩关闭 |\n| `onOk` | `() => void \\| Promise<void>` | — | 确认回调；返回 Promise 时按钮进入 loading |\n| `onCancel` | `() => void` | — | 取消 / 关闭回调 |\n| `afterClose` | `() => void` | — | 关闭动画结束后回调 |\n\n> 命令式弹窗就地渲染在挂载容器内（不 Teleport），便于精确销毁。\n| `footer` | 底部操作区。 |\n"
|
|
7318
7318
|
},
|
|
7319
7319
|
"en-US": {
|
|
7320
7320
|
"title": "Dialog",
|
|
@@ -7363,7 +7363,7 @@
|
|
|
7363
7363
|
{
|
|
7364
7364
|
"id": "props",
|
|
7365
7365
|
"title": "Props",
|
|
7366
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model`. |\n| `title` | `string` | — | Title text. |\n| `header` | `string` | — | Alias of `title`. |\n| `closeOnEsc` | `boolean` | `true` | Close on Esc. |\n| `blockScroll` | `boolean` | `true` | Lock page scroll while open (when `modal` is true). |\n| `closeOnOutsideClick` | `boolean` | `true` | Close when clicking the mask. |\n| `dismissableMask` | `boolean` | — | Alias of `closeOnOutsideClick`. |\n| `maskClosable` | `boolean` | — | Alias of `closeOnOutsideClick` . |\n| `closable` | `boolean` | `true` | Show the close button. |\n| `maximizable` | `boolean` | `false` | Show the maximize / restore button. |\n| `modal` | `boolean` | `true` | Overlay mask. |\n| `position` | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'topleft' \\| 'topright' \\| 'bottomleft' \\| 'bottomright'` | `'center'` | Dialog position. |\n| `centered` | `boolean` | — | Vertical centering: `true` → `center`, `false` → `top`; omit to use `position`. |\n| `width` | `string` | — | Dialog width (ignored when maximized). |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | Mount target; `'self'` renders in place. |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| '
|
|
7366
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model`. |\n| `title` | `string` | — | Title text. |\n| `header` | `string` | — | Alias of `title`. |\n| `closeOnEsc` | `boolean` | `true` | Close on Esc. |\n| `blockScroll` | `boolean` | `true` | Lock page scroll while open (when `modal` is true). |\n| `closeOnOutsideClick` | `boolean` | `true` | Close when clicking the mask. |\n| `dismissableMask` | `boolean` | — | Alias of `closeOnOutsideClick`. |\n| `maskClosable` | `boolean` | — | Alias of `closeOnOutsideClick` . |\n| `closable` | `boolean` | `true` | Show the close button. |\n| `maximizable` | `boolean` | `false` | Show the maximize / restore button. |\n| `modal` | `boolean` | `true` | Overlay mask. |\n| `position` | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'topleft' \\| 'topright' \\| 'bottomleft' \\| 'bottomright'` | `'center'` | Dialog position. |\n| `centered` | `boolean` | — | Vertical centering: `true` → `center`, `false` → `top`; omit to use `position`. |\n| `width` | `string` | — | Dialog width (ignored when maximized). |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | Mount target; `'self'` renders in place. |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'danger'` | — | Status icon in the header |\n| `positiveText` / `negativeText` | `string` | — | Preset footer buttons; ignored when the `footer` slot is used |\n| `positiveColor` | [ButtonColor](/docs/types#ButtonColor) | — | Confirm button color |\n| `onPositiveClick` / `onNegativeClick` | `(e) => unknown \\| Promise<unknown>` | — | Return `false` to keep the dialog open |\n| `beforeClose` | `() => unknown \\| Promise<unknown>` | — | Runs before X / Esc / mask dismiss; return `false` to keep open |\n| `ariaLabel` | `string` | — | Accessible dialog name. |\n| `transition` | `string \\| false` | `'zoom'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Backdrop pass-through; key `root`. |"
|
|
7367
7367
|
},
|
|
7368
7368
|
{
|
|
7369
7369
|
"id": "styling-attrs",
|
|
@@ -7391,7 +7391,7 @@
|
|
|
7391
7391
|
"body": "Open dialogs without writing a template:\n\n```ts\nimport { modal, useModal } from 'morya-ui'\n\n// Module-level singleton\nmodal.confirm({\n title: 'Delete this item?',\n content: 'This cannot be undone',\n onOk: async () => { await remove() },\n})\n\n// Or a component-scoped instance\nconst dialog = useModal()\ndialog.success({ title: 'Saved' })\n```\n\nEvery call returns `{ destroy, update }`: `update` patches the title / content while open, `destroy` closes and unmounts immediately. `modal.destroyAll()` closes every dialog created through the API.\n\n| Method | Description |\n| --- | --- |\n| `info(options)` | Message dialog (no cancel button by default) |\n| `success(options)` | Success dialog |\n| `warning(options)` | Warning dialog |\n| `error(options)` | Error dialog |\n| `confirm(options)` | Confirmation dialog (cancel button shown by default) |\n| `destroyAll()` | Close all |\n\nPassing a string as `options` is shorthand for `{ content: '...' }`.\n\n| Field | Type | Default | Description |\n| --- | --- | --- | --- |\n| `title` | `string` | — | Title |\n| `content` | `string \\| VNode` | — | Body |\n| `type` | `DialogType` | — | Header status icon |\n| `okText` / `cancelText` | `string` | locale | Button labels |\n| `showCancel` | `boolean` | `false` for status helpers, `true` for `confirm` | Show the cancel button |\n| `okColor` | `ButtonColor` | `'primary'` | Confirm button color |\n| `width` / `position` / `centered` | as Dialog | — | Layout |\n| `maskClosable` | `boolean` | `false` | Dismiss by clicking the mask |\n| `onOk` | `() => void \\| Promise<void>` | — | Confirm handler; a returned Promise puts the button in a loading state |\n| `onCancel` | `() => void` | — | Cancel / dismiss handler |\n| `afterClose` | `() => void` | — | Called after the close transition |\n\n> Imperative dialogs render in place inside their mount container (no Teleport) so they can be destroyed precisely."
|
|
7392
7392
|
}
|
|
7393
7393
|
],
|
|
7394
|
-
"markdown": "---\ntitle: Dialog\ncategory: 05 / FEEDBACK\ndescription: Modal dialog with preset footer actions, async close guards, and status type.\n---\n\n# Dialog\n\nModal dialog. Visibility uses `v-model` (`modelValue`), corresponding to `visible`.\n\n## Import\n\n```ts\nimport { MButton, MDialog } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Positions\n\nSupports `center` / `top` / `bottom` / `left` / `right` and the four corner positions.\n\n```vue preview src=\"./demos/Positions.vue\"\n```\n\n## Footer actions\n\n```vue preview src=\"./demos/FooterActions.vue\"\n```\n\n## No dismiss mask\n\nWith `dismissableMask={false}` (or `closeOnOutsideClick={false}` / `maskClosable={false}`), clicking the mask does not close the dialog.\n\n```vue preview src=\"./demos/NoDismissMask.vue\"\n```\n\n## Maximizable\n\n`maximizable` adds a maximize / restore toggle in the title bar.\n\n```vue preview src=\"./demos/Maximizable.vue\"\n```\n\n## Preset footer and async close\n\n`positiveText` / `negativeText` render confirm / cancel buttons (`footer` slot wins). Return `false` (including from a Promise) to keep the dialog open. Use [ConfirmDialog](/components/ConfirmDialog) for accept/reject flows; Dialog `type` is a header icon only.\n\n```vue preview src=\"./demos/PresetFooterAndAsyncClose.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model`. |\n| `title` | `string` | — | Title text. |\n| `header` | `string` | — | Alias of `title`. |\n| `closeOnEsc` | `boolean` | `true` | Close on Esc. |\n| `blockScroll` | `boolean` | `true` | Lock page scroll while open (when `modal` is true). |\n| `closeOnOutsideClick` | `boolean` | `true` | Close when clicking the mask. |\n| `dismissableMask` | `boolean` | — | Alias of `closeOnOutsideClick`. |\n| `maskClosable` | `boolean` | — | Alias of `closeOnOutsideClick` . |\n| `closable` | `boolean` | `true` | Show the close button. |\n| `maximizable` | `boolean` | `false` | Show the maximize / restore button. |\n| `modal` | `boolean` | `true` | Overlay mask. |\n| `position` | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'topleft' \\| 'topright' \\| 'bottomleft' \\| 'bottomright'` | `'center'` | Dialog position. |\n| `centered` | `boolean` | — | Vertical centering: `true` → `center`, `false` → `top`; omit to use `position`. |\n| `width` | `string` | — | Dialog width (ignored when maximized). |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | Mount target; `'self'` renders in place. |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| '
|
|
7394
|
+
"markdown": "---\ntitle: Dialog\ncategory: 05 / FEEDBACK\ndescription: Modal dialog with preset footer actions, async close guards, and status type.\n---\n\n# Dialog\n\nModal dialog. Visibility uses `v-model` (`modelValue`), corresponding to `visible`.\n\n## Import\n\n```ts\nimport { MButton, MDialog } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Positions\n\nSupports `center` / `top` / `bottom` / `left` / `right` and the four corner positions.\n\n```vue preview src=\"./demos/Positions.vue\"\n```\n\n## Footer actions\n\n```vue preview src=\"./demos/FooterActions.vue\"\n```\n\n## No dismiss mask\n\nWith `dismissableMask={false}` (or `closeOnOutsideClick={false}` / `maskClosable={false}`), clicking the mask does not close the dialog.\n\n```vue preview src=\"./demos/NoDismissMask.vue\"\n```\n\n## Maximizable\n\n`maximizable` adds a maximize / restore toggle in the title bar.\n\n```vue preview src=\"./demos/Maximizable.vue\"\n```\n\n## Preset footer and async close\n\n`positiveText` / `negativeText` render confirm / cancel buttons (`footer` slot wins). Return `false` (including from a Promise) to keep the dialog open. Use [ConfirmDialog](/components/ConfirmDialog) for accept/reject flows; Dialog `type` is a header icon only.\n\n```vue preview src=\"./demos/PresetFooterAndAsyncClose.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model`. |\n| `title` | `string` | — | Title text. |\n| `header` | `string` | — | Alias of `title`. |\n| `closeOnEsc` | `boolean` | `true` | Close on Esc. |\n| `blockScroll` | `boolean` | `true` | Lock page scroll while open (when `modal` is true). |\n| `closeOnOutsideClick` | `boolean` | `true` | Close when clicking the mask. |\n| `dismissableMask` | `boolean` | — | Alias of `closeOnOutsideClick`. |\n| `maskClosable` | `boolean` | — | Alias of `closeOnOutsideClick` . |\n| `closable` | `boolean` | `true` | Show the close button. |\n| `maximizable` | `boolean` | `false` | Show the maximize / restore button. |\n| `modal` | `boolean` | `true` | Overlay mask. |\n| `position` | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'topleft' \\| 'topright' \\| 'bottomleft' \\| 'bottomright'` | `'center'` | Dialog position. |\n| `centered` | `boolean` | — | Vertical centering: `true` → `center`, `false` → `top`; omit to use `position`. |\n| `width` | `string` | — | Dialog width (ignored when maximized). |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | Mount target; `'self'` renders in place. |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'danger'` | — | Status icon in the header |\n| `positiveText` / `negativeText` | `string` | — | Preset footer buttons; ignored when the `footer` slot is used |\n| `positiveColor` | [ButtonColor](/docs/types#ButtonColor) | — | Confirm button color |\n| `onPositiveClick` / `onNegativeClick` | `(e) => unknown \\| Promise<unknown>` | — | Return `false` to keep the dialog open |\n| `beforeClose` | `() => unknown \\| Promise<unknown>` | — | Runs before X / Esc / mask dismiss; return `false` to keep open |\n| `ariaLabel` | `string` | — | Accessible dialog name. |\n| `transition` | `string \\| false` | `'zoom'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Backdrop pass-through; key `root`. |\n\n## Styling & attrs\n\nAfter Teleport, fallthrough attrs on `<MDialog>` (`class`, `style`, `data-*`, `title`, …) land on the **backdrop** (`.m-dialog-backdrop`), not the inner `.m-dialog` panel. Use the `width` prop for panel width; use `pt` for inner DOM. See [Styling & attrs](/docs/attrs).\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Visibility change. |\n| `close` | — | Emitted when closing. |\n| `show` | — | Emitted when opening. |\n| `hide` | — | Emitted after closing. |\n| `maximize` | — | Enter maximize. |\n| `unmaximize` | — | Exit maximize. |\n\n## Methods\n\n| Method | Description |\n| --- | --- |\n| `close()` | Close the dialog (same as the cancel/close action). |\n| `maximize()` | Maximize; no-op when already maximized. |\n| `unmaximize()` | Leave the maximized state. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Dialog content. |\n| `header` | Custom header area. |\n| `footer` | Footer actions. |\n\n## Imperative API (useModal / modal)\n\nOpen dialogs without writing a template:\n\n```ts\nimport { modal, useModal } from 'morya-ui'\n\n// Module-level singleton\nmodal.confirm({\n title: 'Delete this item?',\n content: 'This cannot be undone',\n onOk: async () => { await remove() },\n})\n\n// Or a component-scoped instance\nconst dialog = useModal()\ndialog.success({ title: 'Saved' })\n```\n\nEvery call returns `{ destroy, update }`: `update` patches the title / content while open, `destroy` closes and unmounts immediately. `modal.destroyAll()` closes every dialog created through the API.\n\n| Method | Description |\n| --- | --- |\n| `info(options)` | Message dialog (no cancel button by default) |\n| `success(options)` | Success dialog |\n| `warning(options)` | Warning dialog |\n| `error(options)` | Error dialog |\n| `confirm(options)` | Confirmation dialog (cancel button shown by default) |\n| `destroyAll()` | Close all |\n\nPassing a string as `options` is shorthand for `{ content: '...' }`.\n\n| Field | Type | Default | Description |\n| --- | --- | --- | --- |\n| `title` | `string` | — | Title |\n| `content` | `string \\| VNode` | — | Body |\n| `type` | `DialogType` | — | Header status icon |\n| `okText` / `cancelText` | `string` | locale | Button labels |\n| `showCancel` | `boolean` | `false` for status helpers, `true` for `confirm` | Show the cancel button |\n| `okColor` | `ButtonColor` | `'primary'` | Confirm button color |\n| `width` / `position` / `centered` | as Dialog | — | Layout |\n| `maskClosable` | `boolean` | `false` | Dismiss by clicking the mask |\n| `onOk` | `() => void \\| Promise<void>` | — | Confirm handler; a returned Promise puts the button in a loading state |\n| `onCancel` | `() => void` | — | Cancel / dismiss handler |\n| `afterClose` | `() => void` | — | Called after the close transition |\n\n> Imperative dialogs render in place inside their mount container (no Teleport) so they can be destroyed precisely.\n"
|
|
7395
7395
|
}
|
|
7396
7396
|
}
|
|
7397
7397
|
},
|
|
@@ -11327,7 +11327,7 @@
|
|
|
11327
11327
|
"sectionId": "全部系统图标",
|
|
11328
11328
|
"lang": "vue",
|
|
11329
11329
|
"preview": true,
|
|
11330
|
-
"code": "<script setup lang=\"ts\">\nimport type { IconCategoryId, ToastMessage } from 'morya-ui'\nimport {\n getIconCategory,\n getIconCategoryGroups,\n iconCategoryMeta,\n iconNames,\n MIcon,\n MInput,\n MToast,\n} from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst query = ref('')\nconst category = ref<IconCategoryId | 'all'>('all')\nconst copied = ref<string | null>(null)\nconst messages = ref<ToastMessage[]>([])\nlet toastSeq = 0\nlet copiedTimer: ReturnType<typeof setTimeout> | undefined\n\nconst categoryOptions = computed(() => [\n { id: 'all' as const, label: '全部' },\n ...iconCategoryMeta.map((item) => ({ id: item.id, label: item.labelZh })),\n])\n\nconst filteredNames = computed(() => {\n const q = query.value.trim().toLowerCase()\n return iconNames.filter((name) => {\n if (q && !name.toLowerCase().includes(q)) return false\n if (category.value !== 'all') return getIconCategory(name) === category.value\n return true\n })\n})\n\nconst grouped = computed(() => getIconCategoryGroups(filteredNames.value))\n\nfunction chipStyle(id: IconCategoryId | 'all') {\n const active = category.value === id\n return [\n `background:${active ? 'var(--m-color-primary-soft, color-mix(in srgb, var(--m-color-primary) 14%, transparent))' : 'var(--m-color-surface)'}`,\n `border:1px solid ${active ? 'var(--m-color-primary)' : 'var(--m-color-border)'}`,\n 'border-radius:var(--m-radius-full, 999px)',\n `color:${active ? 'var(--m-color-primary)' : 'var(--m-color-text)'}`,\n 'cursor:pointer',\n 'font:inherit',\n 'font-size:0.8125rem',\n 'line-height:1.2',\n 'padding:0.35rem 0.75rem',\n ].join(';')\n}\n\nfunction itemStyle(name: string) {\n const active = copied.value === name\n return [\n 'align-items:center',\n 'background:var(--m-color-surface)',\n `border:1px solid ${active ? 'var(--m-color-primary)' : 'var(--m-color-border)'}`,\n 'border-radius:var(--m-radius-control, 3px)',\n `color:${active ? 'var(--m-color-primary)' : 'var(--m-color-text)'}`,\n 'cursor:pointer',\n 'display:flex',\n 'flex-direction:column',\n 'font:inherit',\n 'gap:0.65rem',\n 'justify-content:center',\n 'min-height:6.5rem',\n 'padding:0.85rem 0.5rem',\n 'width:100%',\n ].join(';')\n}\n\nasync function copyName(name: string) {\n try {\n await navigator.clipboard.writeText(name)\n } catch {\n const area = document.createElement('textarea')\n area.value = name\n document.body.appendChild(area)\n area.select()\n document.execCommand('copy')\n area.remove()\n }\n copied.value = name\n if (copiedTimer) clearTimeout(copiedTimer)\n copiedTimer = setTimeout(() => {\n if (copied.value === name) copied.value = null\n }, 1200)\n\n const id = `icon-copy-${++toastSeq}`\n messages.value = [\n ...messages.value,\n {\n id,\n
|
|
11330
|
+
"code": "<script setup lang=\"ts\">\nimport type { IconCategoryId, ToastMessage } from 'morya-ui'\nimport {\n getIconCategory,\n getIconCategoryGroups,\n iconCategoryMeta,\n iconNames,\n MIcon,\n MInput,\n MToast,\n} from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst query = ref('')\nconst category = ref<IconCategoryId | 'all'>('all')\nconst copied = ref<string | null>(null)\nconst messages = ref<ToastMessage[]>([])\nlet toastSeq = 0\nlet copiedTimer: ReturnType<typeof setTimeout> | undefined\n\nconst categoryOptions = computed(() => [\n { id: 'all' as const, label: '全部' },\n ...iconCategoryMeta.map((item) => ({ id: item.id, label: item.labelZh })),\n])\n\nconst filteredNames = computed(() => {\n const q = query.value.trim().toLowerCase()\n return iconNames.filter((name) => {\n if (q && !name.toLowerCase().includes(q)) return false\n if (category.value !== 'all') return getIconCategory(name) === category.value\n return true\n })\n})\n\nconst grouped = computed(() => getIconCategoryGroups(filteredNames.value))\n\nfunction chipStyle(id: IconCategoryId | 'all') {\n const active = category.value === id\n return [\n `background:${active ? 'var(--m-color-primary-soft, color-mix(in srgb, var(--m-color-primary) 14%, transparent))' : 'var(--m-color-surface)'}`,\n `border:1px solid ${active ? 'var(--m-color-primary)' : 'var(--m-color-border)'}`,\n 'border-radius:var(--m-radius-full, 999px)',\n `color:${active ? 'var(--m-color-primary)' : 'var(--m-color-text)'}`,\n 'cursor:pointer',\n 'font:inherit',\n 'font-size:0.8125rem',\n 'line-height:1.2',\n 'padding:0.35rem 0.75rem',\n ].join(';')\n}\n\nfunction itemStyle(name: string) {\n const active = copied.value === name\n return [\n 'align-items:center',\n 'background:var(--m-color-surface)',\n `border:1px solid ${active ? 'var(--m-color-primary)' : 'var(--m-color-border)'}`,\n 'border-radius:var(--m-radius-control, 3px)',\n `color:${active ? 'var(--m-color-primary)' : 'var(--m-color-text)'}`,\n 'cursor:pointer',\n 'display:flex',\n 'flex-direction:column',\n 'font:inherit',\n 'gap:0.65rem',\n 'justify-content:center',\n 'min-height:6.5rem',\n 'padding:0.85rem 0.5rem',\n 'width:100%',\n ].join(';')\n}\n\nasync function copyName(name: string) {\n try {\n await navigator.clipboard.writeText(name)\n } catch {\n const area = document.createElement('textarea')\n area.value = name\n document.body.appendChild(area)\n area.select()\n document.execCommand('copy')\n area.remove()\n }\n copied.value = name\n if (copiedTimer) clearTimeout(copiedTimer)\n copiedTimer = setTimeout(() => {\n if (copied.value === name) copied.value = null\n }, 1200)\n\n const id = `icon-copy-${++toastSeq}`\n messages.value = [\n ...messages.value,\n {\n id,\n type: 'success',\n summary: '已复制',\n detail: name,\n closable: true,\n },\n ]\n window.setTimeout(() => {\n messages.value = messages.value.filter((item) => item.id !== id)\n }, 1600)\n}\n\nfunction onToastClose(message: ToastMessage) {\n messages.value = messages.value.filter((item) => item.id !== message.id)\n}\n</script>\n\n<template>\n <div class=\"w-full\">\n <MInput\n v-model=\"query\"\n clearable\n fluid\n placeholder=\"搜索图标名称…\"\n class=\"max-w-xs mb-3\"\n >\n <template #prefix>\n <MIcon name=\"search\" size=\"sm\" />\n </template>\n </MInput>\n\n <div style=\"display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem\">\n <button\n v-for=\"opt in categoryOptions\"\n :key=\"opt.id\"\n type=\"button\"\n :style=\"chipStyle(opt.id)\"\n @click=\"category = opt.id\"\n >\n {{ opt.label }}\n </button>\n </div>\n\n <p\n v-if=\"!grouped.length\"\n style=\"color: var(--m-color-text-muted); font-size: 0.875rem; margin: 0.5rem 0 0\"\n >\n 没有匹配的图标\n </p>\n\n <div v-else style=\"display:grid;gap:1.25rem;width:100%\">\n <section v-for=\"group in grouped\" :key=\"group.id\">\n <h4\n style=\"align-items:baseline;color:var(--m-color-text);display:flex;font-size:0.875rem;font-weight:600;gap:0.5rem;margin:0 0 0.65rem\"\n >\n <span>{{ group.labelZh }}</span>\n <span style=\"color:var(--m-color-text-muted);font-size:0.75rem;font-weight:500\">\n {{ group.icons.length }}\n </span>\n </h4>\n <div\n style=\"display:grid;grid-template-columns:repeat(auto-fill,minmax(7.25rem,1fr));gap:0.75rem;width:100%\"\n >\n <button\n v-for=\"name in group.icons\"\n :key=\"name\"\n type=\"button\"\n :style=\"itemStyle(name)\"\n :title=\"`点击复制 ${name}`\"\n @click=\"copyName(name)\"\n >\n <MIcon :name=\"name\" size=\"large\" />\n <span\n style=\"font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:0.72rem;line-height:1.3;max-width:100%;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap\"\n >\n {{ copied === name ? '已复制' : name }}\n </span>\n </button>\n </div>\n </section>\n </div>\n\n <MToast :messages=\"messages\" position=\"top-right\" @close=\"onToastClose\" />\n </div>\n</template>",
|
|
11331
11331
|
"locale": "zh-CN"
|
|
11332
11332
|
},
|
|
11333
11333
|
{
|
|
@@ -11363,7 +11363,7 @@
|
|
|
11363
11363
|
"sectionId": "all-system-icons",
|
|
11364
11364
|
"lang": "vue",
|
|
11365
11365
|
"preview": true,
|
|
11366
|
-
"code": "<script setup lang=\"ts\">\nimport type { IconCategoryId, ToastMessage } from 'morya-ui'\nimport {\n getIconCategory,\n getIconCategoryGroups,\n iconCategoryMeta,\n iconNames,\n MIcon,\n MInput,\n MToast,\n} from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst query = ref('')\nconst category = ref<IconCategoryId | 'all'>('all')\nconst copied = ref<string | null>(null)\nconst messages = ref<ToastMessage[]>([])\nlet toastSeq = 0\nlet copiedTimer: ReturnType<typeof setTimeout> | undefined\n\nconst categoryOptions = computed(() => [\n { id: 'all' as const, label: 'All' },\n ...iconCategoryMeta.map((item) => ({ id: item.id, label: item.labelEn })),\n])\n\nconst filteredNames = computed(() => {\n const q = query.value.trim().toLowerCase()\n return iconNames.filter((name) => {\n if (q && !name.toLowerCase().includes(q)) return false\n if (category.value !== 'all') return getIconCategory(name) === category.value\n return true\n })\n})\n\nconst grouped = computed(() => getIconCategoryGroups(filteredNames.value))\n\nfunction chipStyle(id: IconCategoryId | 'all') {\n const active = category.value === id\n return [\n `background:${active ? 'var(--m-color-primary-soft, color-mix(in srgb, var(--m-color-primary) 14%, transparent))' : 'var(--m-color-surface)'}`,\n `border:1px solid ${active ? 'var(--m-color-primary)' : 'var(--m-color-border)'}`,\n 'border-radius:var(--m-radius-full, 999px)',\n `color:${active ? 'var(--m-color-primary)' : 'var(--m-color-text)'}`,\n 'cursor:pointer',\n 'font:inherit',\n 'font-size:0.8125rem',\n 'line-height:1.2',\n 'padding:0.35rem 0.75rem',\n ].join(';')\n}\n\nfunction itemStyle(name: string) {\n const active = copied.value === name\n return [\n 'align-items:center',\n 'background:var(--m-color-surface)',\n `border:1px solid ${active ? 'var(--m-color-primary)' : 'var(--m-color-border)'}`,\n 'border-radius:var(--m-radius-control, 3px)',\n `color:${active ? 'var(--m-color-primary)' : 'var(--m-color-text)'}`,\n 'cursor:pointer',\n 'display:flex',\n 'flex-direction:column',\n 'font:inherit',\n 'gap:0.65rem',\n 'justify-content:center',\n 'min-height:6.5rem',\n 'padding:0.85rem 0.5rem',\n 'width:100%',\n ].join(';')\n}\n\nasync function copyName(name: string) {\n try {\n await navigator.clipboard.writeText(name)\n } catch {\n const area = document.createElement('textarea')\n area.value = name\n document.body.appendChild(area)\n area.select()\n document.execCommand('copy')\n area.remove()\n }\n copied.value = name\n if (copiedTimer) clearTimeout(copiedTimer)\n copiedTimer = setTimeout(() => {\n if (copied.value === name) copied.value = null\n }, 1200)\n\n const id = `icon-copy-${++toastSeq}`\n messages.value = [\n ...messages.value,\n {\n id,\n
|
|
11366
|
+
"code": "<script setup lang=\"ts\">\nimport type { IconCategoryId, ToastMessage } from 'morya-ui'\nimport {\n getIconCategory,\n getIconCategoryGroups,\n iconCategoryMeta,\n iconNames,\n MIcon,\n MInput,\n MToast,\n} from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst query = ref('')\nconst category = ref<IconCategoryId | 'all'>('all')\nconst copied = ref<string | null>(null)\nconst messages = ref<ToastMessage[]>([])\nlet toastSeq = 0\nlet copiedTimer: ReturnType<typeof setTimeout> | undefined\n\nconst categoryOptions = computed(() => [\n { id: 'all' as const, label: 'All' },\n ...iconCategoryMeta.map((item) => ({ id: item.id, label: item.labelEn })),\n])\n\nconst filteredNames = computed(() => {\n const q = query.value.trim().toLowerCase()\n return iconNames.filter((name) => {\n if (q && !name.toLowerCase().includes(q)) return false\n if (category.value !== 'all') return getIconCategory(name) === category.value\n return true\n })\n})\n\nconst grouped = computed(() => getIconCategoryGroups(filteredNames.value))\n\nfunction chipStyle(id: IconCategoryId | 'all') {\n const active = category.value === id\n return [\n `background:${active ? 'var(--m-color-primary-soft, color-mix(in srgb, var(--m-color-primary) 14%, transparent))' : 'var(--m-color-surface)'}`,\n `border:1px solid ${active ? 'var(--m-color-primary)' : 'var(--m-color-border)'}`,\n 'border-radius:var(--m-radius-full, 999px)',\n `color:${active ? 'var(--m-color-primary)' : 'var(--m-color-text)'}`,\n 'cursor:pointer',\n 'font:inherit',\n 'font-size:0.8125rem',\n 'line-height:1.2',\n 'padding:0.35rem 0.75rem',\n ].join(';')\n}\n\nfunction itemStyle(name: string) {\n const active = copied.value === name\n return [\n 'align-items:center',\n 'background:var(--m-color-surface)',\n `border:1px solid ${active ? 'var(--m-color-primary)' : 'var(--m-color-border)'}`,\n 'border-radius:var(--m-radius-control, 3px)',\n `color:${active ? 'var(--m-color-primary)' : 'var(--m-color-text)'}`,\n 'cursor:pointer',\n 'display:flex',\n 'flex-direction:column',\n 'font:inherit',\n 'gap:0.65rem',\n 'justify-content:center',\n 'min-height:6.5rem',\n 'padding:0.85rem 0.5rem',\n 'width:100%',\n ].join(';')\n}\n\nasync function copyName(name: string) {\n try {\n await navigator.clipboard.writeText(name)\n } catch {\n const area = document.createElement('textarea')\n area.value = name\n document.body.appendChild(area)\n area.select()\n document.execCommand('copy')\n area.remove()\n }\n copied.value = name\n if (copiedTimer) clearTimeout(copiedTimer)\n copiedTimer = setTimeout(() => {\n if (copied.value === name) copied.value = null\n }, 1200)\n\n const id = `icon-copy-${++toastSeq}`\n messages.value = [\n ...messages.value,\n {\n id,\n type: 'success',\n summary: 'Copied',\n detail: name,\n closable: true,\n },\n ]\n window.setTimeout(() => {\n messages.value = messages.value.filter((item) => item.id !== id)\n }, 1600)\n}\n\nfunction onToastClose(message: ToastMessage) {\n messages.value = messages.value.filter((item) => item.id !== message.id)\n}\n</script>\n\n<template>\n <div class=\"w-full\">\n <MInput\n v-model=\"query\"\n clearable\n fluid\n placeholder=\"Search icon names…\"\n class=\"max-w-xs mb-3\"\n >\n <template #prefix>\n <MIcon name=\"search\" size=\"sm\" />\n </template>\n </MInput>\n\n <div style=\"display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem\">\n <button\n v-for=\"opt in categoryOptions\"\n :key=\"opt.id\"\n type=\"button\"\n :style=\"chipStyle(opt.id)\"\n @click=\"category = opt.id\"\n >\n {{ opt.label }}\n </button>\n </div>\n\n <p\n v-if=\"!grouped.length\"\n style=\"color: var(--m-color-text-muted); font-size: 0.875rem; margin: 0.5rem 0 0\"\n >\n No matching icons\n </p>\n\n <div v-else style=\"display:grid;gap:1.25rem;width:100%\">\n <section v-for=\"group in grouped\" :key=\"group.id\">\n <h4\n style=\"align-items:baseline;color:var(--m-color-text);display:flex;font-size:0.875rem;font-weight:600;gap:0.5rem;margin:0 0 0.65rem\"\n >\n <span>{{ group.labelEn }}</span>\n <span style=\"color:var(--m-color-text-muted);font-size:0.75rem;font-weight:500\">\n {{ group.icons.length }}\n </span>\n </h4>\n <div\n style=\"display:grid;grid-template-columns:repeat(auto-fill,minmax(7.25rem,1fr));gap:0.75rem;width:100%\"\n >\n <button\n v-for=\"name in group.icons\"\n :key=\"name\"\n type=\"button\"\n :style=\"itemStyle(name)\"\n :title=\"`Click to copy ${name}`\"\n @click=\"copyName(name)\"\n >\n <MIcon :name=\"name\" size=\"large\" />\n <span\n style=\"font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:0.72rem;line-height:1.3;max-width:100%;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap\"\n >\n {{ copied === name ? 'Copied' : name }}\n </span>\n </button>\n </div>\n </section>\n </div>\n\n <MToast :messages=\"messages\" position=\"top-right\" @close=\"onToastClose\" />\n </div>\n</template>",
|
|
11367
11367
|
"locale": "en-US"
|
|
11368
11368
|
},
|
|
11369
11369
|
{
|
|
@@ -17376,11 +17376,11 @@
|
|
|
17376
17376
|
},
|
|
17377
17377
|
{
|
|
17378
17378
|
"name": "message.warn",
|
|
17379
|
-
"description": "
|
|
17379
|
+
"description": "警告提示（内部 `type: 'warning'`）"
|
|
17380
17380
|
},
|
|
17381
17381
|
{
|
|
17382
17382
|
"name": "message.error",
|
|
17383
|
-
"description": "
|
|
17383
|
+
"description": "错误提示（内部 `type: 'danger'`）"
|
|
17384
17384
|
},
|
|
17385
17385
|
{
|
|
17386
17386
|
"name": "message.open",
|
|
@@ -17446,7 +17446,7 @@
|
|
|
17446
17446
|
"sectionId": "类型",
|
|
17447
17447
|
"lang": "ts",
|
|
17448
17448
|
"preview": false,
|
|
17449
|
-
"code": "interface MessageItem {\n id: string | number\n content: MRenderable\n
|
|
17449
|
+
"code": "interface MessageItem {\n id: string | number\n content: MRenderable\n type?: MessageType\n closable?: boolean\n /** Auto-close delay in ms. `0` keeps it open. Default `3000` for API calls. */\n life?: number\n icon?: boolean\n}",
|
|
17450
17450
|
"locale": "zh-CN"
|
|
17451
17451
|
},
|
|
17452
17452
|
{
|
|
@@ -17514,7 +17514,7 @@
|
|
|
17514
17514
|
{
|
|
17515
17515
|
"id": "methods",
|
|
17516
17516
|
"title": "Methods",
|
|
17517
|
-
"body": "| 方法 | 说明 |\n| --- | --- |\n| `message.success(content \\| options)` | 成功提示 |\n| `message.info(content \\| options)` | 信息提示 |\n| `message.warn(content \\| options)` |
|
|
17517
|
+
"body": "| 方法 | 说明 |\n| --- | --- |\n| `message.success(content \\| options)` | 成功提示 |\n| `message.info(content \\| options)` | 信息提示 |\n| `message.warn(content \\| options)` | 警告提示（内部 `type: 'warning'`） |\n| `message.error(content \\| options)` | 错误提示（内部 `type: 'danger'`） |\n| `message.open(content \\| options)` | 自定义打开 |\n| `message.close(id?)` | 关闭指定 / 全部 |\n| `message.closeAll()` / `message.destroyAll()` | 关闭全部（二者等价） |\n| `message.config({ placement, max })` | 宿主位置与并发上限 |\n\n返回值：`{ id, close }`。\n\n### MessageOptions\n\n| 字段 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `content` | `string \\| number \\| VNode \\| Component \\| (() => VNodeChild)` | — | 正文；也可把可渲染值直接当作入参 |\n| `type` | `MessageType`（`'success' \\| 'info' \\| 'warning' \\| 'danger' \\| 'secondary' \\| 'contrast'`） | `'info'` | 语义色 |\n| `closable` | `boolean` | `false` | 显示关闭按钮 |\n| `life` | `number` | `3000` | 自动关闭毫秒；`0` 不自动关闭 |\n| `icon` | `boolean` | `true` | 显示语义图标 |\n| `id` | `string \\| number` | 自动生成 | 唯一键 |"
|
|
17518
17518
|
},
|
|
17519
17519
|
{
|
|
17520
17520
|
"id": "可选宿主",
|
|
@@ -17539,10 +17539,10 @@
|
|
|
17539
17539
|
{
|
|
17540
17540
|
"id": "类型",
|
|
17541
17541
|
"title": "类型",
|
|
17542
|
-
"body": "<h4 id=\"MessageItem\">MessageItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface MessageItem {\n id: string | number\n content: MRenderable\n
|
|
17542
|
+
"body": "<h4 id=\"MessageItem\">MessageItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface MessageItem {\n id: string | number\n content: MRenderable\n type?: MessageType\n closable?: boolean\n /** Auto-close delay in ms. `0` keeps it open. Default `3000` for API calls. */\n life?: number\n icon?: boolean\n}\n```"
|
|
17543
17543
|
}
|
|
17544
17544
|
],
|
|
17545
|
-
"markdown": "---\ntitle: Message\ncategory: 05 / FEEDBACK\ndescription: 顶部居中浮层提示，支持 API 调用。\n---\n\n# Message\n\n从窗口顶部正中滑入的轻量提示（可通过 `placement` 改到六向位置），适合简短操作反馈。推荐用 `message` API；也可挂载 `<MMessage />` 作为自定义挂载点。\n\n与 [Toast](/components/Toast) 的分工：\n\n- **Message（默认）**：轻量单行反馈，默认顶部居中，无标题/详情。**大多数 CRUD / 保存 / 删除回执应使用此项。**\n- **Toast**：四角通知，带 `summary` / `detail`；仅在有补充说明或异步通知感时使用。\n- **`<MMessage>` 组件**：可选的 message 服务宿主（自定义 `appendTo` / `placement`）。它不是页面内嵌提示；表单常驻错误用字段 `errorMessage`，或 [Alert](/components/Alert) / token 样式的 `role=\"alert\"`。\n\n> AI / 业务代码选型细则见 [`feedback.md`](../../../../design-kit/.agents/skills/morya-ui-pages/references/feedback.md)。\n\n**快速判断**：只有一句话 → `message.success('已保存')`；有标题 + 详情 → `toast.success({ summary, detail })`。\n\n## 引入\n\n```ts\nimport { message, MMessage, useMessage } from 'morya-ui'\n```\n\n## API\n\n首次调用时会自动挂载浮层容器，无需在模板里放置组件。\n\n```vue preview src=\"./demos/Api.zh.vue\"\n```\n\n## 自定义内容\n\n`content`（以及 Toast 的 `summary` / `detail`）支持字符串、`h()` 返回的 VNode、组件，或 `() => VNode` 工厂函数。\n\n```vue preview src=\"./demos/CustomContent.zh.vue\"\n```\n\n## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `message.success(content \\| options)` | 成功提示 |\n| `message.info(content \\| options)` | 信息提示 |\n| `message.warn(content \\| options)` |
|
|
17545
|
+
"markdown": "---\ntitle: Message\ncategory: 05 / FEEDBACK\ndescription: 顶部居中浮层提示，支持 API 调用。\n---\n\n# Message\n\n从窗口顶部正中滑入的轻量提示（可通过 `placement` 改到六向位置），适合简短操作反馈。推荐用 `message` API；也可挂载 `<MMessage />` 作为自定义挂载点。\n\n与 [Toast](/components/Toast) 的分工：\n\n- **Message（默认）**：轻量单行反馈，默认顶部居中，无标题/详情。**大多数 CRUD / 保存 / 删除回执应使用此项。**\n- **Toast**：四角通知，带 `summary` / `detail`；仅在有补充说明或异步通知感时使用。\n- **`<MMessage>` 组件**：可选的 message 服务宿主（自定义 `appendTo` / `placement`）。它不是页面内嵌提示；表单常驻错误用字段 `errorMessage`，或 [Alert](/components/Alert) / token 样式的 `role=\"alert\"`。\n\n> AI / 业务代码选型细则见 [`feedback.md`](../../../../design-kit/.agents/skills/morya-ui-pages/references/feedback.md)。\n\n**快速判断**：只有一句话 → `message.success('已保存')`；有标题 + 详情 → `toast.success({ summary, detail })`。\n\n## 引入\n\n```ts\nimport { message, MMessage, useMessage } from 'morya-ui'\n```\n\n## API\n\n首次调用时会自动挂载浮层容器，无需在模板里放置组件。\n\n```vue preview src=\"./demos/Api.zh.vue\"\n```\n\n## 自定义内容\n\n`content`（以及 Toast 的 `summary` / `detail`）支持字符串、`h()` 返回的 VNode、组件，或 `() => VNode` 工厂函数。\n\n```vue preview src=\"./demos/CustomContent.zh.vue\"\n```\n\n## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `message.success(content \\| options)` | 成功提示 |\n| `message.info(content \\| options)` | 信息提示 |\n| `message.warn(content \\| options)` | 警告提示（内部 `type: 'warning'`） |\n| `message.error(content \\| options)` | 错误提示（内部 `type: 'danger'`） |\n| `message.open(content \\| options)` | 自定义打开 |\n| `message.close(id?)` | 关闭指定 / 全部 |\n| `message.closeAll()` / `message.destroyAll()` | 关闭全部（二者等价） |\n| `message.config({ placement, max })` | 宿主位置与并发上限 |\n\n返回值：`{ id, close }`。\n\n### MessageOptions\n\n| 字段 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `content` | `string \\| number \\| VNode \\| Component \\| (() => VNodeChild)` | — | 正文；也可把可渲染值直接当作入参 |\n| `type` | `MessageType`（`'success' \\| 'info' \\| 'warning' \\| 'danger' \\| 'secondary' \\| 'contrast'`） | `'info'` | 语义色 |\n| `closable` | `boolean` | `false` | 显示关闭按钮 |\n| `life` | `number` | `3000` | 自动关闭毫秒；`0` 不自动关闭 |\n| `icon` | `boolean` | `true` | 显示语义图标 |\n| `id` | `string \\| number` | 自动生成 | 唯一键 |\n\n## 可选宿主\n\n需要自定义 `appendTo` 时，可在应用根部放置：\n\n```vue\n<MMessage append-to=\"body\" />\n```\n\n存在手动宿主时，API 不会再自动挂载第二份。\n\n## Props（`MMessage`）\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `teleport` | `boolean` | `true` | 是否 Teleport |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标 |\n| `transition` | `string \\| false` | `'message'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `placement` | `'top' \\| 'top-left' \\| 'top-right' \\| 'bottom' \\| 'bottom-left' \\| 'bottom-right'` | `'top'` | 宿主位置 |\n| `max` | `number` | — | 同时可见条数；超出丢掉最旧一条 |\n| `auto` | `boolean` | — | — |\n| `messages` | `MessageItem[]` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n## Events\n\n`<MMessage />` 宿主本身无 Vue 事件；请通过 `message.*` API 的返回值 `{ id, close }` 管理生命周期。\n\n## Slots\n\n无插槽；通过 `message.*` API 注入内容。\n\n## 类型\n\n<h4 id=\"MessageItem\">MessageItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface MessageItem {\n id: string | number\n content: MRenderable\n type?: MessageType\n closable?: boolean\n /** Auto-close delay in ms. `0` keeps it open. Default `3000` for API calls. */\n life?: number\n icon?: boolean\n}\n```\n"
|
|
17546
17546
|
},
|
|
17547
17547
|
"en-US": {
|
|
17548
17548
|
"title": "Message",
|
|
@@ -17571,7 +17571,7 @@
|
|
|
17571
17571
|
{
|
|
17572
17572
|
"id": "methods",
|
|
17573
17573
|
"title": "Methods",
|
|
17574
|
-
"body": "| Method | Description |\n| --- | --- |\n| `message.success(content \\| options)` | Success |\n| `message.info(content \\| options)` | Info |\n| `message.warn(content \\| options)` | Warn (`warning`
|
|
17574
|
+
"body": "| Method | Description |\n| --- | --- |\n| `message.success(content \\| options)` | Success |\n| `message.info(content \\| options)` | Info |\n| `message.warn(content \\| options)` | Warn (maps to `type: 'warning'`) |\n| `message.error(content \\| options)` | Error (maps to `type: 'danger'`) |\n| `message.open(content \\| options)` | Open with options |\n| `message.close(id?)` | Close one / all |\n| `message.closeAll()` / `message.destroyAll()` | Close all (aliases of each other) |\n| `message.config({ placement, max })` | Host placement and concurrency cap |\n\nReturns `{ id, close }`.\n\n### MessageOptions\n\n| Field | Type | Default | Description |\n| --- | --- | --- | --- |\n| `content` | `string \\| number \\| VNode \\| Component \\| (() => VNodeChild)` | — | Body; a renderable value may also be passed directly |\n| `type` | `MessageType` (`'success' \\| 'info' \\| 'warning' \\| 'danger' \\| 'secondary' \\| 'contrast'`) | `'info'` | Tone |\n| `closable` | `boolean` | `false` | Show close button |\n| `life` | `number` | `3000` | Auto-close ms; `0` keeps open |\n| `icon` | `boolean` | `true` | Show type icon |\n| `id` | `string \\| number` | auto | Unique key |"
|
|
17575
17575
|
},
|
|
17576
17576
|
{
|
|
17577
17577
|
"id": "optional-host",
|
|
@@ -17594,7 +17594,7 @@
|
|
|
17594
17594
|
"body": "No slots; content is injected through the `message.*` API."
|
|
17595
17595
|
}
|
|
17596
17596
|
],
|
|
17597
|
-
"markdown": "---\ntitle: Message\ncategory: 05 / FEEDBACK\ndescription: Top-center floating notice with an imperative API.\n---\n\n# Message\n\nA lightweight notice that slides in from the top center by default (`placement` can move it). Prefer the `message` API; you can also mount `<MMessage />` as a custom host.\n\nVs [Toast](/components/Toast):\n\n- **Message (default)**: short single-line feedback; no title/detail. Use for most CRUD / save / delete confirmations.\n- **Toast**: corner notifications with `summary` / `detail`; use only when supplementary detail is needed.\n- **`<MMessage>` component**: optional host for the `message` service (custom `appendTo` / `placement`). It is not an inline notice; use [Alert](/components/Alert) for in-page banners, and field `errorMessage` or a token-styled `role=\"alert\"` for persistent form errors.\n\n> Selection guide: [`feedback.md`](../../../../design-kit/.agents/skills/morya-ui-pages/references/feedback.md).\n\n**Rule of thumb**: one short sentence → `message.success('Saved')`; title + detail → `toast.success({ summary, detail })`.\n\n## Import\n\n```ts\nimport { message, MMessage, useMessage } from 'morya-ui'\n```\n\n## API\n\nThe first call auto-mounts a floating host; no template component is required.\n\n```vue preview src=\"./demos/Api.en.vue\"\n```\n\n## Custom content\n\n`content` (and Toast `summary` / `detail`) accepts a string, a VNode from `h()`, a component, or a `() => VNode` factory.\n\n```vue preview src=\"./demos/CustomContent.en.vue\"\n```\n\n## Methods\n\n| Method | Description |\n| --- | --- |\n| `message.success(content \\| options)` | Success |\n| `message.info(content \\| options)` | Info |\n| `message.warn(content \\| options)` | Warn (`warning`
|
|
17597
|
+
"markdown": "---\ntitle: Message\ncategory: 05 / FEEDBACK\ndescription: Top-center floating notice with an imperative API.\n---\n\n# Message\n\nA lightweight notice that slides in from the top center by default (`placement` can move it). Prefer the `message` API; you can also mount `<MMessage />` as a custom host.\n\nVs [Toast](/components/Toast):\n\n- **Message (default)**: short single-line feedback; no title/detail. Use for most CRUD / save / delete confirmations.\n- **Toast**: corner notifications with `summary` / `detail`; use only when supplementary detail is needed.\n- **`<MMessage>` component**: optional host for the `message` service (custom `appendTo` / `placement`). It is not an inline notice; use [Alert](/components/Alert) for in-page banners, and field `errorMessage` or a token-styled `role=\"alert\"` for persistent form errors.\n\n> Selection guide: [`feedback.md`](../../../../design-kit/.agents/skills/morya-ui-pages/references/feedback.md).\n\n**Rule of thumb**: one short sentence → `message.success('Saved')`; title + detail → `toast.success({ summary, detail })`.\n\n## Import\n\n```ts\nimport { message, MMessage, useMessage } from 'morya-ui'\n```\n\n## API\n\nThe first call auto-mounts a floating host; no template component is required.\n\n```vue preview src=\"./demos/Api.en.vue\"\n```\n\n## Custom content\n\n`content` (and Toast `summary` / `detail`) accepts a string, a VNode from `h()`, a component, or a `() => VNode` factory.\n\n```vue preview src=\"./demos/CustomContent.en.vue\"\n```\n\n## Methods\n\n| Method | Description |\n| --- | --- |\n| `message.success(content \\| options)` | Success |\n| `message.info(content \\| options)` | Info |\n| `message.warn(content \\| options)` | Warn (maps to `type: 'warning'`) |\n| `message.error(content \\| options)` | Error (maps to `type: 'danger'`) |\n| `message.open(content \\| options)` | Open with options |\n| `message.close(id?)` | Close one / all |\n| `message.closeAll()` / `message.destroyAll()` | Close all (aliases of each other) |\n| `message.config({ placement, max })` | Host placement and concurrency cap |\n\nReturns `{ id, close }`.\n\n### MessageOptions\n\n| Field | Type | Default | Description |\n| --- | --- | --- | --- |\n| `content` | `string \\| number \\| VNode \\| Component \\| (() => VNodeChild)` | — | Body; a renderable value may also be passed directly |\n| `type` | `MessageType` (`'success' \\| 'info' \\| 'warning' \\| 'danger' \\| 'secondary' \\| 'contrast'`) | `'info'` | Tone |\n| `closable` | `boolean` | `false` | Show close button |\n| `life` | `number` | `3000` | Auto-close ms; `0` keeps open |\n| `icon` | `boolean` | `true` | Show type icon |\n| `id` | `string \\| number` | auto | Unique key |\n\n## Optional host\n\nFor a custom `appendTo`, place this at the app root:\n\n```vue\n<MMessage append-to=\"body\" />\n```\n\nWhen a manual host exists, the API will not mount a second one.\n\n## Props (`MMessage`)\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `teleport` | `boolean` | `true` | Whether to Teleport |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target |\n| `transition` | `string \\| false` | `'message'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `placement` | `'top' \\| 'top-left' \\| 'top-right' \\| 'bottom' \\| 'bottom-left' \\| 'bottom-right'` | `'top'` | Host placement |\n| `max` | `number` | — | Max visible items; oldest is dropped |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n## Events\n\nThe `<MMessage />` host emits no Vue events. Use the `{ id, close }` return value from `message.*` APIs to control lifetime.\n\n## Slots\n\nNo slots; content is injected through the `message.*` API.\n"
|
|
17598
17598
|
}
|
|
17599
17599
|
}
|
|
17600
17600
|
},
|
|
@@ -18056,8 +18056,8 @@
|
|
|
18056
18056
|
"description": "变化量，渲染为与 `MStatus` 同色的文本。"
|
|
18057
18057
|
},
|
|
18058
18058
|
{
|
|
18059
|
-
"name": "
|
|
18060
|
-
"type": "'primary' | 'success' | '
|
|
18059
|
+
"name": "trendType",
|
|
18060
|
+
"type": "'primary' | 'success' | 'warning' | 'danger' | 'secondary'",
|
|
18061
18061
|
"description": "趋势色。"
|
|
18062
18062
|
},
|
|
18063
18063
|
{
|
|
@@ -18188,7 +18188,7 @@
|
|
|
18188
18188
|
"sectionId": "仪表盘-kpi",
|
|
18189
18189
|
"lang": "vue",
|
|
18190
18190
|
"preview": true,
|
|
18191
|
-
"code": "<script setup lang=\"ts\">\nimport { MPageContent, MPageStat } from 'morya-ui'\n</script>\n\n<template>\n <div\n class=\"doc-demo-frame\"\n style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden;background:var(--m-color-surface)\"\n >\n <MPageContent density=\"compact\">\n <MPageStat\n label=\"总用户\"\n value=\"12,480\"\n trend=\"+8.2%\"\n trend-direction=\"up\"\n trend-label=\"较上月\"\n trend-
|
|
18191
|
+
"code": "<script setup lang=\"ts\">\nimport { MPageContent, MPageStat } from 'morya-ui'\n</script>\n\n<template>\n <div\n class=\"doc-demo-frame\"\n style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden;background:var(--m-color-surface)\"\n >\n <MPageContent density=\"compact\">\n <MPageStat\n label=\"总用户\"\n value=\"12,480\"\n trend=\"+8.2%\"\n trend-direction=\"up\"\n trend-label=\"较上月\"\n trend-type=\"success\"\n icon=\"user\"\n shadow=\"hover\"\n />\n <MPageStat\n label=\"待处理工单\"\n value=\"47\"\n trend=\"-12%\"\n loading\n icon=\"clipboard\"\n />\n </MPageContent>\n </div>\n</template>",
|
|
18192
18192
|
"locale": "zh-CN"
|
|
18193
18193
|
},
|
|
18194
18194
|
{
|
|
@@ -18197,7 +18197,7 @@
|
|
|
18197
18197
|
"sectionId": "仪表盘-kpi",
|
|
18198
18198
|
"lang": "vue",
|
|
18199
18199
|
"preview": true,
|
|
18200
|
-
"code": "<script setup lang=\"ts\">\nimport { MGrid, MGridItem, MPageContent, MPageStat } from 'morya-ui'\n</script>\n\n<template>\n <div\n class=\"doc-demo-frame\"\n style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:visible;background:var(--m-color-surface)\"\n >\n <MPageContent density=\"compact\">\n <MGrid :cols=\"2\" :x-gap=\"16\" :y-gap=\"12\" responsive=\"screen\">\n <MGridItem :span=\"1\">\n <MPageStat\n label=\"今日订单\"\n value=\"1,284\"\n trend=\"+6.1%\"\n trend-direction=\"up\"\n trend-
|
|
18200
|
+
"code": "<script setup lang=\"ts\">\nimport { MGrid, MGridItem, MPageContent, MPageStat } from 'morya-ui'\n</script>\n\n<template>\n <div\n class=\"doc-demo-frame\"\n style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:visible;background:var(--m-color-surface)\"\n >\n <MPageContent density=\"compact\">\n <MGrid :cols=\"2\" :x-gap=\"16\" :y-gap=\"12\" responsive=\"screen\">\n <MGridItem :span=\"1\">\n <MPageStat\n label=\"今日订单\"\n value=\"1,284\"\n trend=\"+6.1%\"\n trend-direction=\"up\"\n trend-type=\"success\"\n layout=\"plain\"\n orientation=\"inline\"\n density=\"compact\"\n />\n </MGridItem>\n <MGridItem :span=\"1\">\n <MPageStat\n label=\"待处理\"\n value=\"47\"\n layout=\"plain\"\n orientation=\"inline\"\n density=\"compact\"\n />\n </MGridItem>\n <MGridItem :span=\"2\">\n <MPageStat\n label=\"总用户\"\n value=\"12,480\"\n trend=\"+8.2%\"\n trend-direction=\"up\"\n trend-label=\"较上月\"\n trend-type=\"success\"\n icon=\"user\"\n shadow=\"hover\"\n />\n </MGridItem>\n </MGrid>\n </MPageContent>\n </div>\n</template>",
|
|
18201
18201
|
"locale": "zh-CN"
|
|
18202
18202
|
},
|
|
18203
18203
|
{
|
|
@@ -18233,7 +18233,7 @@
|
|
|
18233
18233
|
"sectionId": "dashboard-kpi",
|
|
18234
18234
|
"lang": "vue",
|
|
18235
18235
|
"preview": true,
|
|
18236
|
-
"code": "<script setup lang=\"ts\">\nimport { MGrid, MGridItem, MPageContent, MPageStat } from 'morya-ui'\n</script>\n\n<template>\n <div\n class=\"doc-demo-frame\"\n style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:visible;background:var(--m-color-surface)\"\n >\n <MPageContent density=\"compact\">\n <MGrid :cols=\"2\" :x-gap=\"16\" :y-gap=\"12\" responsive=\"screen\">\n <MGridItem :span=\"1\">\n <MPageStat\n label=\"Orders today\"\n value=\"1,284\"\n trend=\"+6.1%\"\n trend-direction=\"up\"\n trend-
|
|
18236
|
+
"code": "<script setup lang=\"ts\">\nimport { MGrid, MGridItem, MPageContent, MPageStat } from 'morya-ui'\n</script>\n\n<template>\n <div\n class=\"doc-demo-frame\"\n style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:visible;background:var(--m-color-surface)\"\n >\n <MPageContent density=\"compact\">\n <MGrid :cols=\"2\" :x-gap=\"16\" :y-gap=\"12\" responsive=\"screen\">\n <MGridItem :span=\"1\">\n <MPageStat\n label=\"Orders today\"\n value=\"1,284\"\n trend=\"+6.1%\"\n trend-direction=\"up\"\n trend-type=\"success\"\n layout=\"plain\"\n orientation=\"inline\"\n density=\"compact\"\n />\n </MGridItem>\n <MGridItem :span=\"1\">\n <MPageStat\n label=\"Pending\"\n value=\"47\"\n layout=\"plain\"\n orientation=\"inline\"\n density=\"compact\"\n />\n </MGridItem>\n <MGridItem :span=\"2\">\n <MPageStat\n label=\"Total users\"\n value=\"12,480\"\n trend=\"+8.2%\"\n trend-direction=\"up\"\n trend-label=\"vs last month\"\n trend-type=\"success\"\n icon=\"user\"\n shadow=\"hover\"\n />\n </MGridItem>\n </MGrid>\n </MPageContent>\n </div>\n</template>",
|
|
18237
18237
|
"locale": "en-US"
|
|
18238
18238
|
}
|
|
18239
18239
|
],
|
|
@@ -18275,10 +18275,10 @@
|
|
|
18275
18275
|
{
|
|
18276
18276
|
"id": "api",
|
|
18277
18277
|
"title": "API",
|
|
18278
|
-
"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| `pt` | [RootPassThrough](/docs/types#RootPassThrough) | — | DOM 透传（Page 系列组件通用）。 |\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` 时显示展开/收起（默认文案「高级筛选」/「收起」，右侧 chevron）。 |\n| `expanded` | `boolean` | `false` | 高级区展开状态（`v-model:expanded`）。 |\n| `expandLabel` / `collapseLabel` | `string` | — | 覆盖默认展开/收起文案。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 常用筛选控件（Input / Select 等）。 |\n| `actions` | 查询/重置等操作，与折叠切换组成右侧尾部簇（推荐）。 |\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| `title` | 自定义标题内容（覆盖 `title` prop）。 |\n| `description` | 自定义说明内容（覆盖 `description` prop）。 |\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| `
|
|
18278
|
+
"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| `pt` | [RootPassThrough](/docs/types#RootPassThrough) | — | DOM 透传（Page 系列组件通用）。 |\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` 时显示展开/收起（默认文案「高级筛选」/「收起」，右侧 chevron）。 |\n| `expanded` | `boolean` | `false` | 高级区展开状态（`v-model:expanded`）。 |\n| `expandLabel` / `collapseLabel` | `string` | — | 覆盖默认展开/收起文案。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 常用筛选控件（Input / Select 等）。 |\n| `actions` | 查询/重置等操作，与折叠切换组成右侧尾部簇（推荐）。 |\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| `title` | 自定义标题内容（覆盖 `title` prop）。 |\n| `description` | 自定义说明内容（覆盖 `description` prop）。 |\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| `trendType` | `'primary' \\| 'success' \\| 'warning' \\| '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` | 下一步操作区（如按钮）。 |"
|
|
18279
18279
|
}
|
|
18280
18280
|
],
|
|
18281
|
-
"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` 折叠高级项；查询/重置放 `#actions`（与「高级筛选」chevron 切换同列）；已选条件用 `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| `pt` | [RootPassThrough](/docs/types#RootPassThrough) | — | DOM 透传（Page 系列组件通用）。 |\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` 时显示展开/收起（默认文案「高级筛选」/「收起」，右侧 chevron）。 |\n| `expanded` | `boolean` | `false` | 高级区展开状态（`v-model:expanded`）。 |\n| `expandLabel` / `collapseLabel` | `string` | — | 覆盖默认展开/收起文案。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 常用筛选控件（Input / Select 等）。 |\n| `actions` | 查询/重置等操作，与折叠切换组成右侧尾部簇（推荐）。 |\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| `title` | 自定义标题内容（覆盖 `title` prop）。 |\n| `description` | 自定义说明内容（覆盖 `description` prop）。 |\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| `
|
|
18281
|
+
"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` 折叠高级项；查询/重置放 `#actions`（与「高级筛选」chevron 切换同列）；已选条件用 `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| `pt` | [RootPassThrough](/docs/types#RootPassThrough) | — | DOM 透传（Page 系列组件通用）。 |\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` 时显示展开/收起（默认文案「高级筛选」/「收起」，右侧 chevron）。 |\n| `expanded` | `boolean` | `false` | 高级区展开状态（`v-model:expanded`）。 |\n| `expandLabel` / `collapseLabel` | `string` | — | 覆盖默认展开/收起文案。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 常用筛选控件（Input / Select 等）。 |\n| `actions` | 查询/重置等操作，与折叠切换组成右侧尾部簇（推荐）。 |\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| `title` | 自定义标题内容（覆盖 `title` prop）。 |\n| `description` | 自定义说明内容（覆盖 `description` prop）。 |\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| `trendType` | `'primary' \\| 'success' \\| 'warning' \\| '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"
|
|
18282
18282
|
},
|
|
18283
18283
|
"en-US": {
|
|
18284
18284
|
"title": "Page",
|
|
@@ -18317,10 +18317,10 @@
|
|
|
18317
18317
|
{
|
|
18318
18318
|
"id": "api",
|
|
18319
18319
|
"title": "API",
|
|
18320
|
-
"body": "### MPageContent\n\n| Prop | Type | Default | Description |\n| --------- | -------------------------------------- | ----------- | ---------------------------------------------------------------------------------------- |\n| `density` | `'default' \\| 'compact' \\| 'spacious'` | `'default'` | Vertical spacing between child bands. |\n| `width` | `'full' \\| 'narrow'` | `'full'` | `narrow` ~42rem for form pages. |\n| `bands` | `'auto' \\| 'uniform'` | `'auto'` | `auto` tightens Header/filters/Toolbar vs table; `uniform` uses gap only. |\n| `fill` | `boolean` | `false` | Fill remaining `MLayoutContent` height; pair with `MTable fill` for full-viewport lists. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) | — | DOM pass-through (shared across Page components). |\n\nTune with `--m-page-content-body-lead` / `--m-page-content-tools-pull` when `bands=\"auto\"`.\n\n### MPageFilters\n\n| Prop | Type | Default | Description |\n| ------------------------------- | --------------------- | --------- | ------------------------------------------------------- |\n| `ariaLabel` | `string` | — | Accessible name for the filter region. |\n| `variant` | `'plain' \\| 'filled'` | `'plain'` | Surface; `filled` matches Table header tint, no radius. |\n| `collapsible` | `boolean` | `false` | Show expand/collapse when `#advanced` is provided. |\n| `expanded` | `boolean` | `false` | Advanced panel open state (`v-model:expanded`). |\n| `expandLabel` / `collapseLabel` | `string` | — | Override default expand/collapse copy. |\n\n| Slot | Description |\n| ---------- | --------------------------------------------------------- |\n| `default` | Primary filter controls. |\n| `actions` | Query/reset cluster (trailing with chevron). |\n| `advanced` | Collapsible secondary fields. |\n| `active` | Optional active summary (often `MPageFilterChips` below). |\n\n### MPageFilterChips\n\n| Prop | Type | Default | Description |\n| ----------- | -------- | ------- | ---------------------------------- |\n| `label` | `string` | — | Weak prefix, e.g. “Selected”. |\n| `ariaLabel` | `string` | — | Accessible name for the chip list. |\n\nDefault slot: closable `MTag`s or similar.\n\n### MPageToolbar\n\n| Prop | Type | Default | Description |\n| -------------- | -------- | ------- | ---------------------------------------------------------------- |\n| `title` | `string` | — | Action-row group label (`--m-font-size-md`), not the page title. |\n| `headingLevel` | `1–6` | `1` | Heading level. |\n\n| Slot | Description |\n| --------- | ---------------------------------------- |\n| `default` | Leading content when `title` is omitted. |\n| `actions` | Trailing actions. |\n\n### MPageHeader\n\n| Prop | Type | Default | Description |\n| -------------- | -------- | ------- | -------------------------------- |\n| `title` | `string` | — | Page title (`--m-font-size-xl`). |\n| `description` | `string` | — | Subtitle / blurb. |\n| `headingLevel` | `1–6` | `1` | Heading level. |\n\n| Slot | Description |\n| ------------ | ---------------------------------------- |\n| `breadcrumb` | Trail above the title (`MBreadcrumb`). |\n| `title` | Custom title (overrides `title` prop). |\n| `description`| Custom blurb (overrides `description`). |\n| `tags` | Status / category tags beside the title. |\n| `actions` | Trailing actions. |\n\n### MPageSection\n\n| Prop | Type | Default | Description |\n| --------- | --------------------------------------------- | ----------- | ----------------------------------------------- |\n| `variant` | `'default' \\| 'muted' \\| 'form' \\| 'actions'` | `'default'` | Visual variant; `form` uses an `MCard` surface. |\n| `title` | `string` | — | Optional section title. |\n\n| Slot | Description |\n| --------- | ------------------------- |\n| `actions` | Actions on the title row. |\n\n### MPageStat\n\n| Prop | Type | Default | Description |\n| ---------------- | ------------------------------------------------------------- | ----------- | -------------------------------------------------------- |\n| `label` | `string` | — | Metric name. |\n| `value` | `string \\| number` | — | Primary value (tabular nums). |\n| `trend` | `string` | — | Delta text colored like `MStatus`. |\n| `
|
|
18320
|
+
"body": "### MPageContent\n\n| Prop | Type | Default | Description |\n| --------- | -------------------------------------- | ----------- | ---------------------------------------------------------------------------------------- |\n| `density` | `'default' \\| 'compact' \\| 'spacious'` | `'default'` | Vertical spacing between child bands. |\n| `width` | `'full' \\| 'narrow'` | `'full'` | `narrow` ~42rem for form pages. |\n| `bands` | `'auto' \\| 'uniform'` | `'auto'` | `auto` tightens Header/filters/Toolbar vs table; `uniform` uses gap only. |\n| `fill` | `boolean` | `false` | Fill remaining `MLayoutContent` height; pair with `MTable fill` for full-viewport lists. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) | — | DOM pass-through (shared across Page components). |\n\nTune with `--m-page-content-body-lead` / `--m-page-content-tools-pull` when `bands=\"auto\"`.\n\n### MPageFilters\n\n| Prop | Type | Default | Description |\n| ------------------------------- | --------------------- | --------- | ------------------------------------------------------- |\n| `ariaLabel` | `string` | — | Accessible name for the filter region. |\n| `variant` | `'plain' \\| 'filled'` | `'plain'` | Surface; `filled` matches Table header tint, no radius. |\n| `collapsible` | `boolean` | `false` | Show expand/collapse when `#advanced` is provided. |\n| `expanded` | `boolean` | `false` | Advanced panel open state (`v-model:expanded`). |\n| `expandLabel` / `collapseLabel` | `string` | — | Override default expand/collapse copy. |\n\n| Slot | Description |\n| ---------- | --------------------------------------------------------- |\n| `default` | Primary filter controls. |\n| `actions` | Query/reset cluster (trailing with chevron). |\n| `advanced` | Collapsible secondary fields. |\n| `active` | Optional active summary (often `MPageFilterChips` below). |\n\n### MPageFilterChips\n\n| Prop | Type | Default | Description |\n| ----------- | -------- | ------- | ---------------------------------- |\n| `label` | `string` | — | Weak prefix, e.g. “Selected”. |\n| `ariaLabel` | `string` | — | Accessible name for the chip list. |\n\nDefault slot: closable `MTag`s or similar.\n\n### MPageToolbar\n\n| Prop | Type | Default | Description |\n| -------------- | -------- | ------- | ---------------------------------------------------------------- |\n| `title` | `string` | — | Action-row group label (`--m-font-size-md`), not the page title. |\n| `headingLevel` | `1–6` | `1` | Heading level. |\n\n| Slot | Description |\n| --------- | ---------------------------------------- |\n| `default` | Leading content when `title` is omitted. |\n| `actions` | Trailing actions. |\n\n### MPageHeader\n\n| Prop | Type | Default | Description |\n| -------------- | -------- | ------- | -------------------------------- |\n| `title` | `string` | — | Page title (`--m-font-size-xl`). |\n| `description` | `string` | — | Subtitle / blurb. |\n| `headingLevel` | `1–6` | `1` | Heading level. |\n\n| Slot | Description |\n| ------------ | ---------------------------------------- |\n| `breadcrumb` | Trail above the title (`MBreadcrumb`). |\n| `title` | Custom title (overrides `title` prop). |\n| `description`| Custom blurb (overrides `description`). |\n| `tags` | Status / category tags beside the title. |\n| `actions` | Trailing actions. |\n\n### MPageSection\n\n| Prop | Type | Default | Description |\n| --------- | --------------------------------------------- | ----------- | ----------------------------------------------- |\n| `variant` | `'default' \\| 'muted' \\| 'form' \\| 'actions'` | `'default'` | Visual variant; `form` uses an `MCard` surface. |\n| `title` | `string` | — | Optional section title. |\n\n| Slot | Description |\n| --------- | ------------------------- |\n| `actions` | Actions on the title row. |\n\n### MPageStat\n\n| Prop | Type | Default | Description |\n| ---------------- | ------------------------------------------------------------- | ----------- | -------------------------------------------------------- |\n| `label` | `string` | — | Metric name. |\n| `value` | `string \\| number` | — | Primary value (tabular nums). |\n| `trend` | `string` | — | Delta text colored like `MStatus`. |\n| `trendType` | `'primary' \\| 'success' \\| 'warning' \\| 'danger' \\| 'secondary'` | `'primary'` | Trend color. |\n| `trendDirection` | `'up' \\| 'down'` | — | Up/down arrow beside trend. |\n| `trendLabel` | `string` | — | Weak note after trend. |\n| `icon` | `string` | — | Trailing muted icon name. |\n| `loading` | `boolean` | `false` | Skeleton for value/trend. |\n| `shadow` | `'never' \\| 'hover' \\| 'always'` | `'always'` | Passed to `MCard.shadow` (ignored for `layout=\"plain\"`). |\n| `layout` | `'card' \\| 'plain'` | `'card'` | `plain` drops the Card shell. |\n| `density` | `'default' \\| 'compact'` | `'default'` | Compact shrinks the value size. |\n| `orientation` | `'stacked' \\| 'inline'` | `'stacked'` | Inline puts label and value on one row. |\n\n### MPagePlaceholder\n\nWraps `MEmpty`: illustration + copy by default; override with default / `#icon` / `#extra` slots.\n\n| Prop | Type | Default | Description |\n| ------------- | ------------------ | --------------- | ----------------- |\n| `description` | `string` | — | Placeholder copy. |\n| `ariaLabel` | `string` | `'Placeholder'` | Accessible label. |\n| `minHeight` | `number \\| string` | `'12rem'` | Minimum height. |\n\n| Slot | Description |\n| --------- | --------------------------- |\n| `default` | Custom description. |\n| `icon` | Custom icon / illustration. |\n| `extra` | Next-step actions. |"
|
|
18321
18321
|
}
|
|
18322
18322
|
],
|
|
18323
|
-
"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```\n\nUse `MPageFilters collapsible` + `#advanced` for secondary fields; put query/reset in `#actions` (trailing cluster with the chevron toggle); show active criteria with `MPageFilterChips` and closable `MTag`.\n\n```vue preview src=\"./demos/ListFiltersAdvanced.en.vue\"\n\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\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`. For local edits use MCP `get_page_snippet` (e.g. `filters`, `toolbar`, `form-actions`).\n\n## API\n\n### MPageContent\n\n| Prop | Type | Default | Description |\n| --------- | -------------------------------------- | ----------- | ---------------------------------------------------------------------------------------- |\n| `density` | `'default' \\| 'compact' \\| 'spacious'` | `'default'` | Vertical spacing between child bands. |\n| `width` | `'full' \\| 'narrow'` | `'full'` | `narrow` ~42rem for form pages. |\n| `bands` | `'auto' \\| 'uniform'` | `'auto'` | `auto` tightens Header/filters/Toolbar vs table; `uniform` uses gap only. |\n| `fill` | `boolean` | `false` | Fill remaining `MLayoutContent` height; pair with `MTable fill` for full-viewport lists. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) | — | DOM pass-through (shared across Page components). |\n\nTune with `--m-page-content-body-lead` / `--m-page-content-tools-pull` when `bands=\"auto\"`.\n\n### MPageFilters\n\n| Prop | Type | Default | Description |\n| ------------------------------- | --------------------- | --------- | ------------------------------------------------------- |\n| `ariaLabel` | `string` | — | Accessible name for the filter region. |\n| `variant` | `'plain' \\| 'filled'` | `'plain'` | Surface; `filled` matches Table header tint, no radius. |\n| `collapsible` | `boolean` | `false` | Show expand/collapse when `#advanced` is provided. |\n| `expanded` | `boolean` | `false` | Advanced panel open state (`v-model:expanded`). |\n| `expandLabel` / `collapseLabel` | `string` | — | Override default expand/collapse copy. |\n\n| Slot | Description |\n| ---------- | --------------------------------------------------------- |\n| `default` | Primary filter controls. |\n| `actions` | Query/reset cluster (trailing with chevron). |\n| `advanced` | Collapsible secondary fields. |\n| `active` | Optional active summary (often `MPageFilterChips` below). |\n\n### MPageFilterChips\n\n| Prop | Type | Default | Description |\n| ----------- | -------- | ------- | ---------------------------------- |\n| `label` | `string` | — | Weak prefix, e.g. “Selected”. |\n| `ariaLabel` | `string` | — | Accessible name for the chip list. |\n\nDefault slot: closable `MTag`s or similar.\n\n### MPageToolbar\n\n| Prop | Type | Default | Description |\n| -------------- | -------- | ------- | ---------------------------------------------------------------- |\n| `title` | `string` | — | Action-row group label (`--m-font-size-md`), not the page title. |\n| `headingLevel` | `1–6` | `1` | Heading level. |\n\n| Slot | Description |\n| --------- | ---------------------------------------- |\n| `default` | Leading content when `title` is omitted. |\n| `actions` | Trailing actions. |\n\n### MPageHeader\n\n| Prop | Type | Default | Description |\n| -------------- | -------- | ------- | -------------------------------- |\n| `title` | `string` | — | Page title (`--m-font-size-xl`). |\n| `description` | `string` | — | Subtitle / blurb. |\n| `headingLevel` | `1–6` | `1` | Heading level. |\n\n| Slot | Description |\n| ------------ | ---------------------------------------- |\n| `breadcrumb` | Trail above the title (`MBreadcrumb`). |\n| `title` | Custom title (overrides `title` prop). |\n| `description`| Custom blurb (overrides `description`). |\n| `tags` | Status / category tags beside the title. |\n| `actions` | Trailing actions. |\n\n### MPageSection\n\n| Prop | Type | Default | Description |\n| --------- | --------------------------------------------- | ----------- | ----------------------------------------------- |\n| `variant` | `'default' \\| 'muted' \\| 'form' \\| 'actions'` | `'default'` | Visual variant; `form` uses an `MCard` surface. |\n| `title` | `string` | — | Optional section title. |\n\n| Slot | Description |\n| --------- | ------------------------- |\n| `actions` | Actions on the title row. |\n\n### MPageStat\n\n| Prop | Type | Default | Description |\n| ---------------- | ------------------------------------------------------------- | ----------- | -------------------------------------------------------- |\n| `label` | `string` | — | Metric name. |\n| `value` | `string \\| number` | — | Primary value (tabular nums). |\n| `trend` | `string` | — | Delta text colored like `MStatus`. |\n| `trendSeverity` | `'primary' \\| 'success' \\| 'warn' \\| 'danger' \\| 'secondary'` | `'primary'` | Trend color. |\n| `trendDirection` | `'up' \\| 'down'` | — | Up/down arrow beside trend. |\n| `trendLabel` | `string` | — | Weak note after trend. |\n| `icon` | `string` | — | Trailing muted icon name. |\n| `loading` | `boolean` | `false` | Skeleton for value/trend. |\n| `shadow` | `'never' \\| 'hover' \\| 'always'` | `'always'` | Passed to `MCard.shadow` (ignored for `layout=\"plain\"`). |\n| `layout` | `'card' \\| 'plain'` | `'card'` | `plain` drops the Card shell. |\n| `density` | `'default' \\| 'compact'` | `'default'` | Compact shrinks the value size. |\n| `orientation` | `'stacked' \\| 'inline'` | `'stacked'` | Inline puts label and value on one row. |\n\n### MPagePlaceholder\n\nWraps `MEmpty`: illustration + copy by default; override with default / `#icon` / `#extra` slots.\n\n| Prop | Type | Default | Description |\n| ------------- | ------------------ | --------------- | ----------------- |\n| `description` | `string` | — | Placeholder copy. |\n| `ariaLabel` | `string` | `'Placeholder'` | Accessible label. |\n| `minHeight` | `number \\| string` | `'12rem'` | Minimum height. |\n\n| Slot | Description |\n| --------- | --------------------------- |\n| `default` | Custom description. |\n| `icon` | Custom icon / illustration. |\n| `extra` | Next-step actions. |\n"
|
|
18323
|
+
"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```\n\nUse `MPageFilters collapsible` + `#advanced` for secondary fields; put query/reset in `#actions` (trailing cluster with the chevron toggle); show active criteria with `MPageFilterChips` and closable `MTag`.\n\n```vue preview src=\"./demos/ListFiltersAdvanced.en.vue\"\n\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\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`. For local edits use MCP `get_page_snippet` (e.g. `filters`, `toolbar`, `form-actions`).\n\n## API\n\n### MPageContent\n\n| Prop | Type | Default | Description |\n| --------- | -------------------------------------- | ----------- | ---------------------------------------------------------------------------------------- |\n| `density` | `'default' \\| 'compact' \\| 'spacious'` | `'default'` | Vertical spacing between child bands. |\n| `width` | `'full' \\| 'narrow'` | `'full'` | `narrow` ~42rem for form pages. |\n| `bands` | `'auto' \\| 'uniform'` | `'auto'` | `auto` tightens Header/filters/Toolbar vs table; `uniform` uses gap only. |\n| `fill` | `boolean` | `false` | Fill remaining `MLayoutContent` height; pair with `MTable fill` for full-viewport lists. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) | — | DOM pass-through (shared across Page components). |\n\nTune with `--m-page-content-body-lead` / `--m-page-content-tools-pull` when `bands=\"auto\"`.\n\n### MPageFilters\n\n| Prop | Type | Default | Description |\n| ------------------------------- | --------------------- | --------- | ------------------------------------------------------- |\n| `ariaLabel` | `string` | — | Accessible name for the filter region. |\n| `variant` | `'plain' \\| 'filled'` | `'plain'` | Surface; `filled` matches Table header tint, no radius. |\n| `collapsible` | `boolean` | `false` | Show expand/collapse when `#advanced` is provided. |\n| `expanded` | `boolean` | `false` | Advanced panel open state (`v-model:expanded`). |\n| `expandLabel` / `collapseLabel` | `string` | — | Override default expand/collapse copy. |\n\n| Slot | Description |\n| ---------- | --------------------------------------------------------- |\n| `default` | Primary filter controls. |\n| `actions` | Query/reset cluster (trailing with chevron). |\n| `advanced` | Collapsible secondary fields. |\n| `active` | Optional active summary (often `MPageFilterChips` below). |\n\n### MPageFilterChips\n\n| Prop | Type | Default | Description |\n| ----------- | -------- | ------- | ---------------------------------- |\n| `label` | `string` | — | Weak prefix, e.g. “Selected”. |\n| `ariaLabel` | `string` | — | Accessible name for the chip list. |\n\nDefault slot: closable `MTag`s or similar.\n\n### MPageToolbar\n\n| Prop | Type | Default | Description |\n| -------------- | -------- | ------- | ---------------------------------------------------------------- |\n| `title` | `string` | — | Action-row group label (`--m-font-size-md`), not the page title. |\n| `headingLevel` | `1–6` | `1` | Heading level. |\n\n| Slot | Description |\n| --------- | ---------------------------------------- |\n| `default` | Leading content when `title` is omitted. |\n| `actions` | Trailing actions. |\n\n### MPageHeader\n\n| Prop | Type | Default | Description |\n| -------------- | -------- | ------- | -------------------------------- |\n| `title` | `string` | — | Page title (`--m-font-size-xl`). |\n| `description` | `string` | — | Subtitle / blurb. |\n| `headingLevel` | `1–6` | `1` | Heading level. |\n\n| Slot | Description |\n| ------------ | ---------------------------------------- |\n| `breadcrumb` | Trail above the title (`MBreadcrumb`). |\n| `title` | Custom title (overrides `title` prop). |\n| `description`| Custom blurb (overrides `description`). |\n| `tags` | Status / category tags beside the title. |\n| `actions` | Trailing actions. |\n\n### MPageSection\n\n| Prop | Type | Default | Description |\n| --------- | --------------------------------------------- | ----------- | ----------------------------------------------- |\n| `variant` | `'default' \\| 'muted' \\| 'form' \\| 'actions'` | `'default'` | Visual variant; `form` uses an `MCard` surface. |\n| `title` | `string` | — | Optional section title. |\n\n| Slot | Description |\n| --------- | ------------------------- |\n| `actions` | Actions on the title row. |\n\n### MPageStat\n\n| Prop | Type | Default | Description |\n| ---------------- | ------------------------------------------------------------- | ----------- | -------------------------------------------------------- |\n| `label` | `string` | — | Metric name. |\n| `value` | `string \\| number` | — | Primary value (tabular nums). |\n| `trend` | `string` | — | Delta text colored like `MStatus`. |\n| `trendType` | `'primary' \\| 'success' \\| 'warning' \\| 'danger' \\| 'secondary'` | `'primary'` | Trend color. |\n| `trendDirection` | `'up' \\| 'down'` | — | Up/down arrow beside trend. |\n| `trendLabel` | `string` | — | Weak note after trend. |\n| `icon` | `string` | — | Trailing muted icon name. |\n| `loading` | `boolean` | `false` | Skeleton for value/trend. |\n| `shadow` | `'never' \\| 'hover' \\| 'always'` | `'always'` | Passed to `MCard.shadow` (ignored for `layout=\"plain\"`). |\n| `layout` | `'card' \\| 'plain'` | `'card'` | `plain` drops the Card shell. |\n| `density` | `'default' \\| 'compact'` | `'default'` | Compact shrinks the value size. |\n| `orientation` | `'stacked' \\| 'inline'` | `'stacked'` | Inline puts label and value on one row. |\n\n### MPagePlaceholder\n\nWraps `MEmpty`: illustration + copy by default; override with default / `#icon` / `#extra` slots.\n\n| Prop | Type | Default | Description |\n| ------------- | ------------------ | --------------- | ----------------- |\n| `description` | `string` | — | Placeholder copy. |\n| `ariaLabel` | `string` | `'Placeholder'` | Accessible label. |\n| `minHeight` | `number \\| string` | `'12rem'` | Minimum height. |\n\n| Slot | Description |\n| --------- | --------------------------- |\n| `default` | Custom description. |\n| `icon` | Custom icon / illustration. |\n| `extra` | Next-step actions. |\n"
|
|
18324
18324
|
}
|
|
18325
18325
|
}
|
|
18326
18326
|
},
|
|
@@ -24949,8 +24949,8 @@
|
|
|
24949
24949
|
"description": "状态文案。存在默认插槽内容时以插槽为准。"
|
|
24950
24950
|
},
|
|
24951
24951
|
{
|
|
24952
|
-
"name": "
|
|
24953
|
-
"type": "'primary' | 'secondary' | 'success' | 'info' | '
|
|
24952
|
+
"name": "type",
|
|
24953
|
+
"type": "'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger' | 'contrast'",
|
|
24954
24954
|
"default": "'secondary'",
|
|
24955
24955
|
"description": "语义色。非中性态默认带图标。"
|
|
24956
24956
|
},
|
|
@@ -24970,7 +24970,7 @@
|
|
|
24970
24970
|
"name": "color",
|
|
24971
24971
|
"type": "string",
|
|
24972
24972
|
"default": "—",
|
|
24973
|
-
"description": "自定义颜色，覆盖 `
|
|
24973
|
+
"description": "自定义颜色，覆盖 `type`。"
|
|
24974
24974
|
},
|
|
24975
24975
|
{
|
|
24976
24976
|
"name": "variant",
|
|
@@ -25019,16 +25019,16 @@
|
|
|
25019
25019
|
"sectionId": "基础用法",
|
|
25020
25020
|
"lang": "vue",
|
|
25021
25021
|
"preview": true,
|
|
25022
|
-
"code": "<script setup lang=\"ts\">\nimport { MStatus } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-4 items-center\">\n <MStatus label=\"Idle\" />\n <MStatus label=\"Online\"
|
|
25022
|
+
"code": "<script setup lang=\"ts\">\nimport { MStatus } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-4 items-center\">\n <MStatus label=\"Idle\" />\n <MStatus label=\"Online\" type=\"success\" />\n <MStatus>From slot</MStatus>\n </div>\n</template>",
|
|
25023
25023
|
"locale": "zh-CN"
|
|
25024
25024
|
},
|
|
25025
25025
|
{
|
|
25026
|
-
"id": "
|
|
25027
|
-
"section": "
|
|
25028
|
-
"sectionId": "
|
|
25026
|
+
"id": "type-1",
|
|
25027
|
+
"section": "Type",
|
|
25028
|
+
"sectionId": "type",
|
|
25029
25029
|
"lang": "vue",
|
|
25030
25030
|
"preview": true,
|
|
25031
|
-
"code": "<script setup lang=\"ts\">\nimport { MStatus } from \"morya-ui\";\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-4 items-center\">\n <MStatus label=\"Primary\"
|
|
25031
|
+
"code": "<script setup lang=\"ts\">\nimport { MStatus } from \"morya-ui\";\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-4 items-center\">\n <MStatus label=\"Primary\" type=\"primary\" />\n <MStatus label=\"Secondary\" type=\"secondary\" />\n <MStatus label=\"Success\" type=\"success\" />\n <MStatus label=\"Info\" type=\"info\" />\n <MStatus label=\"Warning\" type=\"warning\" />\n <MStatus label=\"Danger\" type=\"danger\" />\n <MStatus label=\"Contrast\" type=\"contrast\" />\n <MStatus label=\"Disabled\" disabled />\n </div>\n</template>",
|
|
25032
25032
|
"locale": "zh-CN"
|
|
25033
25033
|
},
|
|
25034
25034
|
{
|
|
@@ -25037,7 +25037,7 @@
|
|
|
25037
25037
|
"sectionId": "size-processing",
|
|
25038
25038
|
"lang": "vue",
|
|
25039
25039
|
"preview": true,
|
|
25040
|
-
"code": "<script setup lang=\"ts\">\nimport { MStatus } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-4 items-center\">\n <MStatus label=\"Small\" size=\"small\"
|
|
25040
|
+
"code": "<script setup lang=\"ts\">\nimport { MStatus } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-4 items-center\">\n <MStatus label=\"Small\" size=\"small\" type=\"success\" />\n <MStatus label=\"Medium\" type=\"info\" />\n <MStatus label=\"Large\" size=\"large\" type=\"warning\" />\n <MStatus label=\"Processing\" type=\"primary\" processing />\n </div>\n</template>",
|
|
25041
25041
|
"locale": "zh-CN"
|
|
25042
25042
|
},
|
|
25043
25043
|
{
|
|
@@ -25046,7 +25046,7 @@
|
|
|
25046
25046
|
"sectionId": "标签-纯文字-自定义图标",
|
|
25047
25047
|
"lang": "vue",
|
|
25048
25048
|
"preview": true,
|
|
25049
|
-
"code": "<script setup lang=\"ts\">\nimport { MStatus } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"grid gap-4\">\n <div class=\"flex flex-wrap gap-4 items-center\">\n <MStatus label=\"已完成\"
|
|
25049
|
+
"code": "<script setup lang=\"ts\">\nimport { MStatus } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"grid gap-4\">\n <div class=\"flex flex-wrap gap-4 items-center\">\n <MStatus label=\"已完成\" type=\"success\" variant=\"tag\" />\n <MStatus label=\"运行中\" type=\"info\" variant=\"tag\" processing />\n <MStatus label=\"待审核\" type=\"warning\" variant=\"tag\" />\n <MStatus label=\"失败\" type=\"danger\" variant=\"tag\" />\n <MStatus label=\"已归档\" variant=\"tag\" />\n <MStatus label=\"已禁用\" variant=\"tag\" disabled />\n </div>\n <div class=\"flex flex-wrap gap-4 items-center\">\n <MStatus label=\"自定义图标\" type=\"success\" icon=\"check\" />\n <MStatus label=\"已完成\" type=\"success\" variant=\"text\" />\n <MStatus label=\"同步中…\" type=\"info\" variant=\"text\" />\n <MStatus label=\"—\" variant=\"text\" />\n </div>\n </div>\n</template>",
|
|
25050
25050
|
"locale": "zh-CN"
|
|
25051
25051
|
},
|
|
25052
25052
|
{
|
|
@@ -25064,16 +25064,16 @@
|
|
|
25064
25064
|
"sectionId": "basic",
|
|
25065
25065
|
"lang": "vue",
|
|
25066
25066
|
"preview": true,
|
|
25067
|
-
"code": "<script setup lang=\"ts\">\nimport { MStatus } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-4 items-center\">\n <MStatus label=\"Idle\" />\n <MStatus label=\"Online\"
|
|
25067
|
+
"code": "<script setup lang=\"ts\">\nimport { MStatus } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-4 items-center\">\n <MStatus label=\"Idle\" />\n <MStatus label=\"Online\" type=\"success\" />\n <MStatus>From slot</MStatus>\n </div>\n</template>",
|
|
25068
25068
|
"locale": "en-US"
|
|
25069
25069
|
},
|
|
25070
25070
|
{
|
|
25071
|
-
"id": "
|
|
25072
|
-
"section": "
|
|
25073
|
-
"sectionId": "
|
|
25071
|
+
"id": "type-1",
|
|
25072
|
+
"section": "Type",
|
|
25073
|
+
"sectionId": "type",
|
|
25074
25074
|
"lang": "vue",
|
|
25075
25075
|
"preview": true,
|
|
25076
|
-
"code": "<script setup lang=\"ts\">\nimport { MStatus } from \"morya-ui\";\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-4 items-center\">\n <MStatus label=\"Primary\"
|
|
25076
|
+
"code": "<script setup lang=\"ts\">\nimport { MStatus } from \"morya-ui\";\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-4 items-center\">\n <MStatus label=\"Primary\" type=\"primary\" />\n <MStatus label=\"Secondary\" type=\"secondary\" />\n <MStatus label=\"Success\" type=\"success\" />\n <MStatus label=\"Info\" type=\"info\" />\n <MStatus label=\"Warning\" type=\"warning\" />\n <MStatus label=\"Danger\" type=\"danger\" />\n <MStatus label=\"Contrast\" type=\"contrast\" />\n <MStatus label=\"Disabled\" disabled />\n </div>\n</template>",
|
|
25077
25077
|
"locale": "en-US"
|
|
25078
25078
|
},
|
|
25079
25079
|
{
|
|
@@ -25082,7 +25082,7 @@
|
|
|
25082
25082
|
"sectionId": "size-processing",
|
|
25083
25083
|
"lang": "vue",
|
|
25084
25084
|
"preview": true,
|
|
25085
|
-
"code": "<script setup lang=\"ts\">\nimport { MStatus } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-4 items-center\">\n <MStatus label=\"Small\" size=\"small\"
|
|
25085
|
+
"code": "<script setup lang=\"ts\">\nimport { MStatus } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-4 items-center\">\n <MStatus label=\"Small\" size=\"small\" type=\"success\" />\n <MStatus label=\"Medium\" type=\"info\" />\n <MStatus label=\"Large\" size=\"large\" type=\"warning\" />\n <MStatus label=\"Processing\" type=\"primary\" processing />\n </div>\n</template>",
|
|
25086
25086
|
"locale": "en-US"
|
|
25087
25087
|
},
|
|
25088
25088
|
{
|
|
@@ -25091,7 +25091,7 @@
|
|
|
25091
25091
|
"sectionId": "tag-text-custom-icon",
|
|
25092
25092
|
"lang": "vue",
|
|
25093
25093
|
"preview": true,
|
|
25094
|
-
"code": "<script setup lang=\"ts\">\nimport { MStatus } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"grid gap-4\">\n <div class=\"flex flex-wrap gap-4 items-center\">\n <MStatus label=\"已完成\"
|
|
25094
|
+
"code": "<script setup lang=\"ts\">\nimport { MStatus } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"grid gap-4\">\n <div class=\"flex flex-wrap gap-4 items-center\">\n <MStatus label=\"已完成\" type=\"success\" variant=\"tag\" />\n <MStatus label=\"运行中\" type=\"info\" variant=\"tag\" processing />\n <MStatus label=\"待审核\" type=\"warning\" variant=\"tag\" />\n <MStatus label=\"失败\" type=\"danger\" variant=\"tag\" />\n <MStatus label=\"已归档\" variant=\"tag\" />\n <MStatus label=\"已禁用\" variant=\"tag\" disabled />\n </div>\n <div class=\"flex flex-wrap gap-4 items-center\">\n <MStatus label=\"自定义图标\" type=\"success\" icon=\"check\" />\n <MStatus label=\"已完成\" type=\"success\" variant=\"text\" />\n <MStatus label=\"同步中…\" type=\"info\" variant=\"text\" />\n <MStatus label=\"—\" variant=\"text\" />\n </div>\n </div>\n</template>",
|
|
25095
25095
|
"locale": "en-US"
|
|
25096
25096
|
}
|
|
25097
25097
|
],
|
|
@@ -25116,9 +25116,9 @@
|
|
|
25116
25116
|
"body": "通过 `label` 或默认插槽展示文案。中性态用圆点；成功 / 失败等自动显示图标。\n\n```vue preview src=\"./demos/Basic.vue\"\n\n```"
|
|
25117
25117
|
},
|
|
25118
25118
|
{
|
|
25119
|
-
"id": "
|
|
25120
|
-
"title": "
|
|
25121
|
-
"body": "使用 `
|
|
25119
|
+
"id": "type",
|
|
25120
|
+
"title": "Type",
|
|
25121
|
+
"body": "使用 `type` 定义语义色；默认 `secondary`（圆点、中性）。\n\n```vue preview src=\"./demos/Types.vue\"\n\n```"
|
|
25122
25122
|
},
|
|
25123
25123
|
{
|
|
25124
25124
|
"id": "size-processing",
|
|
@@ -25133,7 +25133,7 @@
|
|
|
25133
25133
|
{
|
|
25134
25134
|
"id": "props",
|
|
25135
25135
|
"title": "Props",
|
|
25136
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| ------------ | ------------------------------------------------------------------------------------------------------------ | ------------- | ------------------------------------------------------------ |\n| `label` | `string` | — | 状态文案。存在默认插槽内容时以插槽为准。 |\n| `
|
|
25136
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| ------------ | ------------------------------------------------------------------------------------------------------------ | ------------- | ------------------------------------------------------------ |\n| `label` | `string` | — | 状态文案。存在默认插槽内容时以插槽为准。 |\n| `type` | `'primary' \\| 'secondary' \\| 'success' \\| 'info' \\| 'warning' \\| 'help' \\| 'danger' \\| 'contrast'` | `'secondary'` | 语义色。非中性态默认带图标。 |\n| `processing` | `boolean` | `false` | 标识脉冲动画。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。 |\n| `color` | `string` | — | 自定义颜色，覆盖 `type`。 |\n| `variant` | `'dot' \\| 'tag' \\| 'text'` | `'dot'` | 展示形态：圆点/图标 / 胶囊 / 纯文字。 |\n| `icon` | [IconName](/docs/types#IconName) | — | 前导图标；覆盖自动图标。 |\n| `disabled` | `boolean` | `false` | 禁用弱化样式。 |"
|
|
25137
25137
|
},
|
|
25138
25138
|
{
|
|
25139
25139
|
"id": "slots",
|
|
@@ -25151,7 +25151,7 @@
|
|
|
25151
25151
|
"body": "无自定义事件。"
|
|
25152
25152
|
}
|
|
25153
25153
|
],
|
|
25154
|
-
"markdown": "---\ntitle: Status\ncategory: 01 / DATA\ndescription: 行内状态标识：圆点 / 语义图标 + 文案。\n---\n\n# Status\n\n用于表格、详情标题旁等场景，以彩色标识 + 文案展示业务状态。比 [Tag](/components/Tag) 更轻；需要分类标签或可关闭时用 Tag。\n\n语义色（非 `secondary` / `contrast`）默认带对应图标，避免「纯色文字」难以扫读。\n\n## 引入\n\n```ts\nimport { MStatus } from \"morya-ui\";\n```\n\n## 基础用法\n\n通过 `label` 或默认插槽展示文案。中性态用圆点；成功 / 失败等自动显示图标。\n\n```vue preview src=\"./demos/Basic.vue\"\n\n```\n\n##
|
|
25154
|
+
"markdown": "---\ntitle: Status\ncategory: 01 / DATA\ndescription: 行内状态标识：圆点 / 语义图标 + 文案。\n---\n\n# Status\n\n用于表格、详情标题旁等场景，以彩色标识 + 文案展示业务状态。比 [Tag](/components/Tag) 更轻；需要分类标签或可关闭时用 Tag。\n\n语义色（非 `secondary` / `contrast`）默认带对应图标，避免「纯色文字」难以扫读。\n\n## 引入\n\n```ts\nimport { MStatus } from \"morya-ui\";\n```\n\n## 基础用法\n\n通过 `label` 或默认插槽展示文案。中性态用圆点；成功 / 失败等自动显示图标。\n\n```vue preview src=\"./demos/Basic.vue\"\n\n```\n\n## Type\n\n使用 `type` 定义语义色；默认 `secondary`（圆点、中性）。\n\n```vue preview src=\"./demos/Types.vue\"\n\n```\n\n## Size & Processing\n\n`size` 支持 `small` / `large`；`processing` 为标识脉冲动画。\n\n```vue preview src=\"./demos/Processing.vue\"\n\n```\n\n## 标签 · 纯文字 · 自定义图标\n\n- `variant=\"tag\"`：柔和胶囊底 + 圆点 / 自动图标。\n- `variant=\"text\"`：仅文案，无标识、无自动图标。\n- `icon` / `#icon`：覆盖自动图标。\n- `disabled`：弱化禁用态。\n\n```vue preview src=\"./demos/Variants.vue\"\n\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| ------------ | ------------------------------------------------------------------------------------------------------------ | ------------- | ------------------------------------------------------------ |\n| `label` | `string` | — | 状态文案。存在默认插槽内容时以插槽为准。 |\n| `type` | `'primary' \\| 'secondary' \\| 'success' \\| 'info' \\| 'warning' \\| 'help' \\| 'danger' \\| 'contrast'` | `'secondary'` | 语义色。非中性态默认带图标。 |\n| `processing` | `boolean` | `false` | 标识脉冲动画。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。 |\n| `color` | `string` | — | 自定义颜色，覆盖 `type`。 |\n| `variant` | `'dot' \\| 'tag' \\| 'text'` | `'dot'` | 展示形态：圆点/图标 / 胶囊 / 纯文字。 |\n| `icon` | [IconName](/docs/types#IconName) | — | 前导图标；覆盖自动图标。 |\n| `disabled` | `boolean` | `false` | 禁用弱化样式。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --------- | ---------------- |\n| `default` | 状态文案。 |\n| `icon` | 自定义前导图标。 |\n\n## 无障碍\n\n- 根节点使用 `role=\"status\"`。\n- 不要仅靠颜色区分状态；保持可见文案。\n\n## Events\n\n无自定义事件。\n"
|
|
25155
25155
|
},
|
|
25156
25156
|
"en-US": {
|
|
25157
25157
|
"title": "Status",
|
|
@@ -25160,7 +25160,7 @@
|
|
|
25160
25160
|
{
|
|
25161
25161
|
"id": "overview",
|
|
25162
25162
|
"title": "",
|
|
25163
|
-
"body": "# Status\n\nLightweight status for tables and detail headers. Prefer [Tag](/components/Tag) when you need a chip-like label or closable control.\n\nNon-neutral
|
|
25163
|
+
"body": "# Status\n\nLightweight status for tables and detail headers. Prefer [Tag](/components/Tag) when you need a chip-like label or closable control.\n\nNon-neutral types show a semantic icon by default so the status reads as a marker, not plain tinted text."
|
|
25164
25164
|
},
|
|
25165
25165
|
{
|
|
25166
25166
|
"id": "import",
|
|
@@ -25173,9 +25173,9 @@
|
|
|
25173
25173
|
"body": "Pass `label` or use the default slot. Neutral status uses a dot; success / danger / etc. get an icon automatically.\n\n```vue preview src=\"./demos/Basic.vue\"\n\n```"
|
|
25174
25174
|
},
|
|
25175
25175
|
{
|
|
25176
|
-
"id": "
|
|
25177
|
-
"title": "
|
|
25178
|
-
"body": "Use `
|
|
25176
|
+
"id": "type",
|
|
25177
|
+
"title": "Type",
|
|
25178
|
+
"body": "Use `type` for semantic color; defaults to `secondary` (dot, neutral).\n\n```vue preview src=\"./demos/Types.vue\"\n\n```"
|
|
25179
25179
|
},
|
|
25180
25180
|
{
|
|
25181
25181
|
"id": "size-processing",
|
|
@@ -25190,7 +25190,7 @@
|
|
|
25190
25190
|
{
|
|
25191
25191
|
"id": "props",
|
|
25192
25192
|
"title": "Props",
|
|
25193
|
-
"body": "| Prop | Type | Default | Description |\n| ------------ | ------------------------------------------------------------------------------------------------------------ | ------------- | -------------------------------------------------------- |\n| `label` | `string` | — | Status text. Slot content wins when present. |\n| `
|
|
25193
|
+
"body": "| Prop | Type | Default | Description |\n| ------------ | ------------------------------------------------------------------------------------------------------------ | ------------- | -------------------------------------------------------- |\n| `label` | `string` | — | Status text. Slot content wins when present. |\n| `type` | `'primary' \\| 'secondary' \\| 'success' \\| 'info' \\| 'warning' \\| 'help' \\| 'danger' \\| 'contrast'` | `'secondary'` | Semantic color. Non-neutral tones get a default icon. |\n| `processing` | `boolean` | `false` | Pulse animation on the indicator. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size. |\n| `color` | `string` | — | Custom color; overrides `type`. |\n| `variant` | `'dot' \\| 'tag' \\| 'text'` | `'dot'` | Presentation: marker / soft pill / text only. |\n| `icon` | [IconName](/docs/types#IconName) | — | Leading icon; overrides auto icon. |\n| `disabled` | `boolean` | `false` | Muted disabled appearance. |"
|
|
25194
25194
|
},
|
|
25195
25195
|
{
|
|
25196
25196
|
"id": "slots",
|
|
@@ -25208,7 +25208,7 @@
|
|
|
25208
25208
|
"body": "No custom events."
|
|
25209
25209
|
}
|
|
25210
25210
|
],
|
|
25211
|
-
"markdown": "---\ntitle: Status\ncategory: 01 / DATA\ndescription: Inline status marker with a colored dot or semantic icon plus label.\n---\n\n# Status\n\nLightweight status for tables and detail headers. Prefer [Tag](/components/Tag) when you need a chip-like label or closable control.\n\nNon-neutral
|
|
25211
|
+
"markdown": "---\ntitle: Status\ncategory: 01 / DATA\ndescription: Inline status marker with a colored dot or semantic icon plus label.\n---\n\n# Status\n\nLightweight status for tables and detail headers. Prefer [Tag](/components/Tag) when you need a chip-like label or closable control.\n\nNon-neutral types show a semantic icon by default so the status reads as a marker, not plain tinted text.\n\n## Import\n\n```ts\nimport { MStatus } from \"morya-ui\";\n```\n\n## Basic\n\nPass `label` or use the default slot. Neutral status uses a dot; success / danger / etc. get an icon automatically.\n\n```vue preview src=\"./demos/Basic.vue\"\n\n```\n\n## Type\n\nUse `type` for semantic color; defaults to `secondary` (dot, neutral).\n\n```vue preview src=\"./demos/Types.vue\"\n\n```\n\n## Size & Processing\n\n`size` supports `small` / `large`. `processing` pulses the indicator.\n\n```vue preview src=\"./demos/Processing.vue\"\n\n```\n\n## Tag · Text · Custom icon\n\n- `variant=\"tag\"`: soft pill with dot or auto icon.\n- `variant=\"text\"`: label only — no indicator, no auto icon.\n- `icon` / `#icon`: overrides the auto icon.\n- `disabled`: muted inactive look.\n\n```vue preview src=\"./demos/Variants.vue\"\n\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| ------------ | ------------------------------------------------------------------------------------------------------------ | ------------- | -------------------------------------------------------- |\n| `label` | `string` | — | Status text. Slot content wins when present. |\n| `type` | `'primary' \\| 'secondary' \\| 'success' \\| 'info' \\| 'warning' \\| 'help' \\| 'danger' \\| 'contrast'` | `'secondary'` | Semantic color. Non-neutral tones get a default icon. |\n| `processing` | `boolean` | `false` | Pulse animation on the indicator. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size. |\n| `color` | `string` | — | Custom color; overrides `type`. |\n| `variant` | `'dot' \\| 'tag' \\| 'text'` | `'dot'` | Presentation: marker / soft pill / text only. |\n| `icon` | [IconName](/docs/types#IconName) | — | Leading icon; overrides auto icon. |\n| `disabled` | `boolean` | `false` | Muted disabled appearance. |\n\n## Slots\n\n| Slot | Description |\n| --------- | -------------------- |\n| `default` | Status text. |\n| `icon` | Custom leading icon. |\n\n## Accessibility\n\n- Root uses `role=\"status\"`.\n- Do not rely on color alone; keep visible text.\n\n## Events\n\nNo custom events.\n"
|
|
25212
25212
|
}
|
|
25213
25213
|
}
|
|
25214
25214
|
},
|
|
@@ -26510,7 +26510,7 @@
|
|
|
26510
26510
|
"sectionId": "基础用法",
|
|
26511
26511
|
"lang": "vue",
|
|
26512
26512
|
"preview": true,
|
|
26513
|
-
"code": "<script setup lang=\"ts\">\nimport { MTable, MTag } from 'morya-ui'\n\nconst columns = [\n { key: 'name', label: '项目', minWidth: 140, sortable: true },\n { key: 'status', label: '状态', width: 120 },\n { key: 'owner', label: '负责人', minWidth: 100 },\n { key: 'team', label: '团队', minWidth: 120 },\n { key: 'progress', label: '进度', width: 100, align: 'end' as const },\n]\nconst rows = [\n { id: 1, name: 'Landing Redesign', status: 'Published', owner: 'Ada', team: 'Design', progress: '100%' },\n { id: 2, name: 'Dashboard v2', status: 'Draft', owner: 'Lin', team: 'Frontend', progress: '62%' },\n { id: 3, name: 'Auth Gateway', status: 'Review', owner: 'Kai', team: 'Backend', progress: '88%' },\n]\n</script>\n\n<template>\n <MTable :columns=\"columns\" :rows=\"rows\" striped bordered>\n <template #cell-status=\"{ value }\">\n <MTag\n :value=\"String(value)\"\n :
|
|
26513
|
+
"code": "<script setup lang=\"ts\">\nimport { MTable, MTag } from 'morya-ui'\n\nconst columns = [\n { key: 'name', label: '项目', minWidth: 140, sortable: true },\n { key: 'status', label: '状态', width: 120 },\n { key: 'owner', label: '负责人', minWidth: 100 },\n { key: 'team', label: '团队', minWidth: 120 },\n { key: 'progress', label: '进度', width: 100, align: 'end' as const },\n]\nconst rows = [\n { id: 1, name: 'Landing Redesign', status: 'Published', owner: 'Ada', team: 'Design', progress: '100%' },\n { id: 2, name: 'Dashboard v2', status: 'Draft', owner: 'Lin', team: 'Frontend', progress: '62%' },\n { id: 3, name: 'Auth Gateway', status: 'Review', owner: 'Kai', team: 'Backend', progress: '88%' },\n]\n</script>\n\n<template>\n <MTable :columns=\"columns\" :rows=\"rows\" striped bordered>\n <template #cell-status=\"{ value }\">\n <MTag\n :value=\"String(value)\"\n :type=\"value === 'Published' ? 'success' : value === 'Review' ? 'warning' : 'secondary'\"\n />\n </template>\n </MTable>\n</template>",
|
|
26514
26514
|
"locale": "zh-CN"
|
|
26515
26515
|
},
|
|
26516
26516
|
{
|
|
@@ -26699,7 +26699,7 @@
|
|
|
26699
26699
|
"sectionId": "basic",
|
|
26700
26700
|
"lang": "vue",
|
|
26701
26701
|
"preview": true,
|
|
26702
|
-
"code": "<script setup lang=\"ts\">\nimport { MTable, MTag } from 'morya-ui'\n\nconst columns = [\n { key: 'name', label: 'Project', minWidth: 140, sortable: true },\n { key: 'status', label: 'Status', width: 120 },\n { key: 'owner', label: 'Owner', minWidth: 100 },\n]\nconst rows = [\n { id: 1, name: 'Landing Redesign', status: 'Published', owner: 'Ada' },\n { id: 2, name: 'Dashboard v2', status: 'Draft', owner: 'Lin' },\n]\n</script>\n\n<template>\n <MTable :columns=\"columns\" :rows=\"rows\" striped bordered>\n <template #cell-status=\"{ value }\">\n <MTag\n :value=\"String(value)\"\n :
|
|
26702
|
+
"code": "<script setup lang=\"ts\">\nimport { MTable, MTag } from 'morya-ui'\n\nconst columns = [\n { key: 'name', label: 'Project', minWidth: 140, sortable: true },\n { key: 'status', label: 'Status', width: 120 },\n { key: 'owner', label: 'Owner', minWidth: 100 },\n]\nconst rows = [\n { id: 1, name: 'Landing Redesign', status: 'Published', owner: 'Ada' },\n { id: 2, name: 'Dashboard v2', status: 'Draft', owner: 'Lin' },\n]\n</script>\n\n<template>\n <MTable :columns=\"columns\" :rows=\"rows\" striped bordered>\n <template #cell-status=\"{ value }\">\n <MTag\n :value=\"String(value)\"\n :type=\"value === 'Published' ? 'success' : 'secondary'\"\n />\n </template>\n </MTable>\n</template>",
|
|
26703
26703
|
"locale": "en-US"
|
|
26704
26704
|
},
|
|
26705
26705
|
{
|
|
@@ -27303,7 +27303,7 @@
|
|
|
27303
27303
|
"id": "Tag",
|
|
27304
27304
|
"name": "Tag",
|
|
27305
27305
|
"exportName": "MTag",
|
|
27306
|
-
"category": "01 /
|
|
27306
|
+
"category": "01 / DATA",
|
|
27307
27307
|
"description": "标签用于展示状态或分类。",
|
|
27308
27308
|
"descriptionEn": "Tag for status or category.",
|
|
27309
27309
|
"import": "import { MTag } from 'morya-ui'",
|
|
@@ -27315,10 +27315,10 @@
|
|
|
27315
27315
|
"description": "标签文案。存在默认插槽内容时以插槽为准。"
|
|
27316
27316
|
},
|
|
27317
27317
|
{
|
|
27318
|
-
"name": "
|
|
27319
|
-
"type": "'primary' | 'secondary' | 'success' | 'info' | '
|
|
27318
|
+
"name": "type",
|
|
27319
|
+
"type": "'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger' | 'contrast'",
|
|
27320
27320
|
"default": "'primary'",
|
|
27321
|
-
"description": "
|
|
27321
|
+
"description": "语义色。自定义 `color` 会覆盖 `type`。"
|
|
27322
27322
|
},
|
|
27323
27323
|
{
|
|
27324
27324
|
"name": "rounded",
|
|
@@ -27354,7 +27354,7 @@
|
|
|
27354
27354
|
"name": "color",
|
|
27355
27355
|
"type": "string",
|
|
27356
27356
|
"default": "—",
|
|
27357
|
-
"description": "
|
|
27357
|
+
"description": "自定义颜色，覆盖 `type`。"
|
|
27358
27358
|
},
|
|
27359
27359
|
{
|
|
27360
27360
|
"name": "disabled",
|
|
@@ -27425,12 +27425,12 @@
|
|
|
27425
27425
|
"locale": "zh-CN"
|
|
27426
27426
|
},
|
|
27427
27427
|
{
|
|
27428
|
-
"id": "
|
|
27429
|
-
"section": "
|
|
27430
|
-
"sectionId": "
|
|
27428
|
+
"id": "type-1",
|
|
27429
|
+
"section": "Type",
|
|
27430
|
+
"sectionId": "type",
|
|
27431
27431
|
"lang": "vue",
|
|
27432
27432
|
"preview": true,
|
|
27433
|
-
"code": "<script setup lang=\"ts\">\nimport { MTag } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MTag value=\"Primary\" />\n <MTag value=\"Secondary\"
|
|
27433
|
+
"code": "<script setup lang=\"ts\">\nimport { MTag } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MTag value=\"Primary\" />\n <MTag value=\"Secondary\" type=\"secondary\" />\n <MTag value=\"Success\" type=\"success\" />\n <MTag value=\"Info\" type=\"info\" />\n <MTag value=\"Warning\" type=\"warning\" />\n <MTag value=\"Danger\" type=\"danger\" />\n <MTag value=\"Contrast\" type=\"contrast\" />\n </div>\n</template>",
|
|
27434
27434
|
"locale": "zh-CN"
|
|
27435
27435
|
},
|
|
27436
27436
|
{
|
|
@@ -27439,7 +27439,7 @@
|
|
|
27439
27439
|
"sectionId": "icons",
|
|
27440
27440
|
"lang": "vue",
|
|
27441
27441
|
"preview": true,
|
|
27442
|
-
"code": "<script setup lang=\"ts\">\nimport { MTag } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MTag value=\"New\" icon=\"plus\"
|
|
27442
|
+
"code": "<script setup lang=\"ts\">\nimport { MTag } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MTag value=\"New\" icon=\"plus\" type=\"info\" />\n <MTag value=\"Done\" icon=\"check\" type=\"success\" />\n <MTag value=\"Alert\" icon=\"info\" type=\"warning\" rounded />\n </div>\n</template>",
|
|
27443
27443
|
"locale": "zh-CN"
|
|
27444
27444
|
},
|
|
27445
27445
|
{
|
|
@@ -27448,7 +27448,7 @@
|
|
|
27448
27448
|
"sectionId": "bordered",
|
|
27449
27449
|
"lang": "vue",
|
|
27450
27450
|
"preview": true,
|
|
27451
|
-
"code": "<script setup lang=\"ts\">\nimport { MTag } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MTag value=\"Filled\" />\n <MTag value=\"Bordered\" bordered />\n <MTag value=\"Success\"
|
|
27451
|
+
"code": "<script setup lang=\"ts\">\nimport { MTag } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MTag value=\"Filled\" />\n <MTag value=\"Bordered\" bordered />\n <MTag value=\"Success\" type=\"success\" bordered />\n <MTag value=\"Custom\" color=\"#1677ff\" bordered />\n </div>\n</template>",
|
|
27452
27452
|
"locale": "zh-CN"
|
|
27453
27453
|
},
|
|
27454
27454
|
{
|
|
@@ -27457,7 +27457,7 @@
|
|
|
27457
27457
|
"sectionId": "closable",
|
|
27458
27458
|
"lang": "vue",
|
|
27459
27459
|
"preview": true,
|
|
27460
|
-
"code": "<script setup lang=\"ts\">\nimport { MTag } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MTag value=\"Draft\" closable bordered />\n <MTag value=\"Small\" size=\"small\"
|
|
27460
|
+
"code": "<script setup lang=\"ts\">\nimport { MTag } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MTag value=\"Draft\" closable bordered />\n <MTag value=\"Small\" size=\"small\" type=\"success\" closable />\n </div>\n</template>",
|
|
27461
27461
|
"locale": "zh-CN"
|
|
27462
27462
|
},
|
|
27463
27463
|
{
|
|
@@ -27488,12 +27488,12 @@
|
|
|
27488
27488
|
"locale": "en-US"
|
|
27489
27489
|
},
|
|
27490
27490
|
{
|
|
27491
|
-
"id": "
|
|
27492
|
-
"section": "
|
|
27493
|
-
"sectionId": "
|
|
27491
|
+
"id": "type-1",
|
|
27492
|
+
"section": "Type",
|
|
27493
|
+
"sectionId": "type",
|
|
27494
27494
|
"lang": "vue",
|
|
27495
27495
|
"preview": true,
|
|
27496
|
-
"code": "<script setup lang=\"ts\">\nimport { MTag } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MTag value=\"Primary\" />\n <MTag value=\"Secondary\"
|
|
27496
|
+
"code": "<script setup lang=\"ts\">\nimport { MTag } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MTag value=\"Primary\" />\n <MTag value=\"Secondary\" type=\"secondary\" />\n <MTag value=\"Success\" type=\"success\" />\n <MTag value=\"Info\" type=\"info\" />\n <MTag value=\"Warning\" type=\"warning\" />\n <MTag value=\"Danger\" type=\"danger\" />\n <MTag value=\"Contrast\" type=\"contrast\" />\n </div>\n</template>",
|
|
27497
27497
|
"locale": "en-US"
|
|
27498
27498
|
},
|
|
27499
27499
|
{
|
|
@@ -27502,7 +27502,7 @@
|
|
|
27502
27502
|
"sectionId": "icons",
|
|
27503
27503
|
"lang": "vue",
|
|
27504
27504
|
"preview": true,
|
|
27505
|
-
"code": "<script setup lang=\"ts\">\nimport { MTag } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MTag value=\"New\" icon=\"plus\"
|
|
27505
|
+
"code": "<script setup lang=\"ts\">\nimport { MTag } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MTag value=\"New\" icon=\"plus\" type=\"info\" />\n <MTag value=\"Done\" icon=\"check\" type=\"success\" />\n <MTag value=\"Alert\" icon=\"info\" type=\"warning\" rounded />\n </div>\n</template>",
|
|
27506
27506
|
"locale": "en-US"
|
|
27507
27507
|
},
|
|
27508
27508
|
{
|
|
@@ -27511,7 +27511,7 @@
|
|
|
27511
27511
|
"sectionId": "bordered",
|
|
27512
27512
|
"lang": "vue",
|
|
27513
27513
|
"preview": true,
|
|
27514
|
-
"code": "<script setup lang=\"ts\">\nimport { MTag } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MTag value=\"Filled\" />\n <MTag value=\"Bordered\" bordered />\n <MTag value=\"Success\"
|
|
27514
|
+
"code": "<script setup lang=\"ts\">\nimport { MTag } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MTag value=\"Filled\" />\n <MTag value=\"Bordered\" bordered />\n <MTag value=\"Success\" type=\"success\" bordered />\n <MTag value=\"Custom\" color=\"#1677ff\" bordered />\n </div>\n</template>",
|
|
27515
27515
|
"locale": "en-US"
|
|
27516
27516
|
},
|
|
27517
27517
|
{
|
|
@@ -27520,7 +27520,7 @@
|
|
|
27520
27520
|
"sectionId": "closable",
|
|
27521
27521
|
"lang": "vue",
|
|
27522
27522
|
"preview": true,
|
|
27523
|
-
"code": "<script setup lang=\"ts\">\nimport { MTag } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MTag value=\"Draft\" closable bordered />\n <MTag value=\"Small\" size=\"small\"
|
|
27523
|
+
"code": "<script setup lang=\"ts\">\nimport { MTag } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MTag value=\"Draft\" closable bordered />\n <MTag value=\"Small\" size=\"small\" type=\"success\" closable />\n </div>\n</template>",
|
|
27524
27524
|
"locale": "en-US"
|
|
27525
27525
|
},
|
|
27526
27526
|
{
|
|
@@ -27554,9 +27554,9 @@
|
|
|
27554
27554
|
"body": "通过 `value` 或默认插槽展示文案。\n\n```vue preview src=\"./demos/Basic.vue\"\n```"
|
|
27555
27555
|
},
|
|
27556
27556
|
{
|
|
27557
|
-
"id": "
|
|
27558
|
-
"title": "
|
|
27559
|
-
"body": "使用 `
|
|
27557
|
+
"id": "type",
|
|
27558
|
+
"title": "Type",
|
|
27559
|
+
"body": "使用 `type` 定义语义色；省略时为 primary。\n\n```vue preview src=\"./demos/Types.vue\"\n```"
|
|
27560
27560
|
},
|
|
27561
27561
|
{
|
|
27562
27562
|
"id": "icons",
|
|
@@ -27581,7 +27581,7 @@
|
|
|
27581
27581
|
{
|
|
27582
27582
|
"id": "props",
|
|
27583
27583
|
"title": "Props",
|
|
27584
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `value` | `string` | — | 标签文案。存在默认插槽内容时以插槽为准。 |\n| `
|
|
27584
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `value` | `string` | — | 标签文案。存在默认插槽内容时以插槽为准。 |\n| `type` | `'primary' \\| 'secondary' \\| 'success' \\| 'info' \\| 'warning' \\| 'help' \\| 'danger' \\| 'contrast'` | `'primary'` | 语义色。自定义 `color` 会覆盖 `type`。 |\n| `rounded` | `boolean` | `false` | 全圆角。 |\n| `icon` | [IconName](/docs/types#IconName) | — | `MIcon` 图标名称。 |\n| `closable` | `boolean` | `false` | 显示关闭按钮（`checkable` 时忽略）。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。 |\n| `bordered` | `boolean` | `false` | 描边。 |\n| `color` | `string` | — | 自定义颜色，覆盖 `type`。 |\n| `disabled` | `boolean` | `false` | 禁用交互。 |\n| `checkable` | `boolean` | `false` | 可切换选中。 |\n| `checked` | `boolean` | `false` | 选中态；配合 `v-model:checked`。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
27585
27585
|
},
|
|
27586
27586
|
{
|
|
27587
27587
|
"id": "events",
|
|
@@ -27594,7 +27594,7 @@
|
|
|
27594
27594
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 标签内容，优先于 `value`。 |"
|
|
27595
27595
|
}
|
|
27596
27596
|
],
|
|
27597
|
-
"markdown": "---\ntitle: Tag\ncategory: 01 /
|
|
27597
|
+
"markdown": "---\ntitle: Tag\ncategory: 01 / DATA\ndescription: 标签用于展示状态或分类。\n---\n\n# Tag\n\n标签用于展示状态或分类。\n\n## 引入\n\n```ts\nimport { MTag } from 'morya-ui'\n```\n\n## 基础用法\n\n通过 `value` 或默认插槽展示文案。\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Type\n\n使用 `type` 定义语义色；省略时为 primary。\n\n```vue preview src=\"./demos/Types.vue\"\n```\n\n## Icons\n\n`icon` 传入 `MIcon` 的图标名称。\n\n```vue preview src=\"./demos/Icons.vue\"\n```\n\n## Bordered\n\n`bordered` 使用色调描边。默认无描边、填充色调背景。\n\n```vue preview src=\"./demos/Bordered.vue\"\n```\n\n## Closable\n\n```vue preview src=\"./demos/Closable.vue\"\n```\n\n## Checkable\n\n`checkable` + `v-model:checked` 可切换选中。与 `closable` 同时设置时关闭按钮不显示。\n\n```vue preview src=\"./demos/Checkable.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `value` | `string` | — | 标签文案。存在默认插槽内容时以插槽为准。 |\n| `type` | `'primary' \\| 'secondary' \\| 'success' \\| 'info' \\| 'warning' \\| 'help' \\| 'danger' \\| 'contrast'` | `'primary'` | 语义色。自定义 `color` 会覆盖 `type`。 |\n| `rounded` | `boolean` | `false` | 全圆角。 |\n| `icon` | [IconName](/docs/types#IconName) | — | `MIcon` 图标名称。 |\n| `closable` | `boolean` | `false` | 显示关闭按钮（`checkable` 时忽略）。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。 |\n| `bordered` | `boolean` | `false` | 描边。 |\n| `color` | `string` | — | 自定义颜色，覆盖 `type`。 |\n| `disabled` | `boolean` | `false` | 禁用交互。 |\n| `checkable` | `boolean` | `false` | 可切换选中。 |\n| `checked` | `boolean` | `false` | 选中态；配合 `v-model:checked`。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `close` | `MouseEvent` | 点击关闭。 |\n| `update:checked` | `boolean` | 选中态变更（`v-model:checked`）。 |\n| `change` | `boolean` | 选中态变更。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 标签内容，优先于 `value`。 |\n"
|
|
27598
27598
|
},
|
|
27599
27599
|
"en-US": {
|
|
27600
27600
|
"title": "Tag",
|
|
@@ -27616,9 +27616,9 @@
|
|
|
27616
27616
|
"body": "Show text via `value` or the default slot.\n\n```vue preview src=\"./demos/Basic.vue\"\n```"
|
|
27617
27617
|
},
|
|
27618
27618
|
{
|
|
27619
|
-
"id": "
|
|
27620
|
-
"title": "
|
|
27621
|
-
"body": "Use `
|
|
27619
|
+
"id": "type",
|
|
27620
|
+
"title": "Type",
|
|
27621
|
+
"body": "Use `type` for semantic color; defaults to primary when omitted.\n\n```vue preview src=\"./demos/Types.vue\"\n```"
|
|
27622
27622
|
},
|
|
27623
27623
|
{
|
|
27624
27624
|
"id": "icons",
|
|
@@ -27643,7 +27643,7 @@
|
|
|
27643
27643
|
{
|
|
27644
27644
|
"id": "props",
|
|
27645
27645
|
"title": "Props",
|
|
27646
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `value` | `string` |
|
|
27646
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `value` | `string` | — | Tag text. The default slot takes precedence when present. |\n| `type` | `'primary' \\| 'secondary' \\| 'success' \\| 'info' \\| 'warning' \\| 'help' \\| 'danger' \\| 'contrast'` | `'primary'` | Semantic color. Custom `color` overrides `type`. |\n| `rounded` | `boolean` | `false` | Fully rounded. |\n| `icon` | [IconName](/docs/types#IconName) | — | `MIcon` icon name. |\n| `closable` | `boolean` | `false` | Show a close control (ignored when `checkable`). |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size. |\n| `bordered` | `boolean` | `false` | Draw a border. |\n| `color` | `string` | — | Custom color; overrides `type`. |\n| `disabled` | `boolean` | `false` | Disable interaction. |\n| `checkable` | `boolean` | `false` | Toggleable selection. |\n| `checked` | `boolean` | `false` | Checked state; use with `v-model:checked`. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM pass-through; see [attrs](/docs/attrs). |"
|
|
27647
27647
|
},
|
|
27648
27648
|
{
|
|
27649
27649
|
"id": "events",
|
|
@@ -27656,7 +27656,7 @@
|
|
|
27656
27656
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Tag content; takes precedence over `value`. |"
|
|
27657
27657
|
}
|
|
27658
27658
|
],
|
|
27659
|
-
"markdown": "---\ntitle: Tag\ncategory: 01 /
|
|
27659
|
+
"markdown": "---\ntitle: Tag\ncategory: 01 / DATA\ndescription: Tag for status or category.\n---\n\n# Tag\n\nTags display status or category.\n\n## Import\n\n```ts\nimport { MTag } from 'morya-ui'\n```\n\n## Basic\n\nShow text via `value` or the default slot.\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Type\n\nUse `type` for semantic color; defaults to primary when omitted.\n\n```vue preview src=\"./demos/Types.vue\"\n```\n\n## Icons\n\nPass a `MIcon` icon name to `icon`.\n\n```vue preview src=\"./demos/Icons.vue\"\n```\n\n## Bordered\n\n`bordered` draws a tone-colored outline. Default is borderless with a filled tone background.\n\n```vue preview src=\"./demos/Bordered.vue\"\n```\n\n## Closable\n\n```vue preview src=\"./demos/Closable.vue\"\n```\n\n## Checkable\n\n`checkable` + `v-model:checked` toggles selection. When combined with `closable`, the close control is hidden.\n\n```vue preview src=\"./demos/Checkable.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `value` | `string` | — | Tag text. The default slot takes precedence when present. |\n| `type` | `'primary' \\| 'secondary' \\| 'success' \\| 'info' \\| 'warning' \\| 'help' \\| 'danger' \\| 'contrast'` | `'primary'` | Semantic color. Custom `color` overrides `type`. |\n| `rounded` | `boolean` | `false` | Fully rounded. |\n| `icon` | [IconName](/docs/types#IconName) | — | `MIcon` icon name. |\n| `closable` | `boolean` | `false` | Show a close control (ignored when `checkable`). |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size. |\n| `bordered` | `boolean` | `false` | Draw a border. |\n| `color` | `string` | — | Custom color; overrides `type`. |\n| `disabled` | `boolean` | `false` | Disable interaction. |\n| `checkable` | `boolean` | `false` | Toggleable selection. |\n| `checked` | `boolean` | `false` | Checked state; use with `v-model:checked`. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM pass-through; see [attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `close` | `MouseEvent` | Fired when close is clicked. |\n| `update:checked` | `boolean` | Checked state change (`v-model:checked`). |\n| `change` | `boolean` | Checked state change. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Tag content; takes precedence over `value`. |\n"
|
|
27660
27660
|
}
|
|
27661
27661
|
}
|
|
27662
27662
|
},
|
|
@@ -28596,7 +28596,7 @@
|
|
|
28596
28596
|
"sectionId": "基础用法",
|
|
28597
28597
|
"lang": "vue",
|
|
28598
28598
|
"preview": true,
|
|
28599
|
-
"code": "<script setup lang=\"ts\">\nimport type { TimelineEvent } from 'morya-ui'\nimport { MTimeline } from 'morya-ui'\n\nconst events: TimelineEvent[] = [\n { status: 'Ordered', date: '15/10/2024', content: 'Order placed', icon: 'check',
|
|
28599
|
+
"code": "<script setup lang=\"ts\">\nimport type { TimelineEvent } from 'morya-ui'\nimport { MTimeline } from 'morya-ui'\n\nconst events: TimelineEvent[] = [\n { status: 'Ordered', date: '15/10/2024', content: 'Order placed', icon: 'check', type: 'success' },\n { status: 'Shipped', date: '16/10/2024', content: 'On the way', icon: 'upload', type: 'info' },\n { status: 'Delivered', date: '17/10/2024', content: 'Arrived', icon: 'home', type: 'success' },\n]\n</script>\n\n<template>\n <MTimeline :value=\"events\" align=\"alternate\" />\n</template>",
|
|
28600
28600
|
"locale": "zh-CN"
|
|
28601
28601
|
},
|
|
28602
28602
|
{
|
|
@@ -28623,7 +28623,7 @@
|
|
|
28623
28623
|
"sectionId": "类型",
|
|
28624
28624
|
"lang": "ts",
|
|
28625
28625
|
"preview": false,
|
|
28626
|
-
"code": "interface TimelineEvent {\n status?: string\n content?: string\n date?: string\n /** Built-in IconName, or raw text glyph fallback. */\n icon?: IconName | string\n color?: string\n
|
|
28626
|
+
"code": "interface TimelineEvent {\n status?: string\n content?: string\n date?: string\n /** Built-in IconName, or raw text glyph fallback. */\n icon?: IconName | string\n color?: string\n type?: TimelineType\n}",
|
|
28627
28627
|
"locale": "zh-CN"
|
|
28628
28628
|
},
|
|
28629
28629
|
{
|
|
@@ -28641,7 +28641,7 @@
|
|
|
28641
28641
|
"sectionId": "basic",
|
|
28642
28642
|
"lang": "vue",
|
|
28643
28643
|
"preview": true,
|
|
28644
|
-
"code": "<script setup lang=\"ts\">\nimport type { TimelineEvent } from 'morya-ui'\nimport { MTimeline } from 'morya-ui'\n\nconst events: TimelineEvent[] = [\n { status: 'Ordered', date: '15/10/2024', content: 'Order placed', icon: 'check',
|
|
28644
|
+
"code": "<script setup lang=\"ts\">\nimport type { TimelineEvent } from 'morya-ui'\nimport { MTimeline } from 'morya-ui'\n\nconst events: TimelineEvent[] = [\n { status: 'Ordered', date: '15/10/2024', content: 'Order placed', icon: 'check', type: 'success' },\n { status: 'Shipped', date: '16/10/2024', content: 'On the way', icon: 'upload', type: 'info' },\n { status: 'Delivered', date: '17/10/2024', content: 'Arrived', icon: 'home', type: 'success' },\n]\n</script>\n\n<template>\n <MTimeline :value=\"events\" align=\"alternate\" />\n</template>",
|
|
28645
28645
|
"locale": "en-US"
|
|
28646
28646
|
},
|
|
28647
28647
|
{
|
|
@@ -28668,7 +28668,7 @@
|
|
|
28668
28668
|
"sectionId": "types",
|
|
28669
28669
|
"lang": "ts",
|
|
28670
28670
|
"preview": false,
|
|
28671
|
-
"code": "interface TimelineEvent {\n status?: string\n content?: string\n date?: string\n /** Built-in IconName, or raw text glyph fallback. */\n icon?: IconName | string\n color?: string\n
|
|
28671
|
+
"code": "interface TimelineEvent {\n status?: string\n content?: string\n date?: string\n /** Built-in IconName, or raw text glyph fallback. */\n icon?: IconName | string\n color?: string\n type?: TimelineType\n}",
|
|
28672
28672
|
"locale": "en-US"
|
|
28673
28673
|
}
|
|
28674
28674
|
],
|
|
@@ -28705,7 +28705,7 @@
|
|
|
28705
28705
|
{
|
|
28706
28706
|
"id": "props",
|
|
28707
28707
|
"title": "Props",
|
|
28708
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `value` | `TimelineEvent[]` | — | 事件。 |\n| `align` | `'left' \\| 'right' \\| 'alternate'` | `'left'` | 垂直布局对齐。 |\n| `layout` | `'vertical' \\| 'horizontal'` | `'vertical'` | 方向。 |\n| `pending` | `boolean \\| string` | — | 追加末尾待处理项；字符串作为文案。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n`TimelineEvent`：`status` / `content` / `date` / `icon`（`IconName` 或文字）/ `color` / `
|
|
28708
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `value` | `TimelineEvent[]` | — | 事件。 |\n| `align` | `'left' \\| 'right' \\| 'alternate'` | `'left'` | 垂直布局对齐。 |\n| `layout` | `'vertical' \\| 'horizontal'` | `'vertical'` | 方向。 |\n| `pending` | `boolean \\| string` | — | 追加末尾待处理项；字符串作为文案。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n`TimelineEvent`：`status` / `content` / `date` / `icon`（`IconName` 或文字）/ `color` / `type`。"
|
|
28709
28709
|
},
|
|
28710
28710
|
{
|
|
28711
28711
|
"id": "slots",
|
|
@@ -28720,10 +28720,10 @@
|
|
|
28720
28720
|
{
|
|
28721
28721
|
"id": "类型",
|
|
28722
28722
|
"title": "类型",
|
|
28723
|
-
"body": "<h4 id=\"TimelineEvent\">TimelineEvent</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface TimelineEvent {\n status?: string\n content?: string\n date?: string\n /** Built-in IconName, or raw text glyph fallback. */\n icon?: IconName | string\n color?: string\n
|
|
28723
|
+
"body": "<h4 id=\"TimelineEvent\">TimelineEvent</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface TimelineEvent {\n status?: string\n content?: string\n date?: string\n /** Built-in IconName, or raw text glyph fallback. */\n icon?: IconName | string\n color?: string\n type?: TimelineType\n}\n```"
|
|
28724
28724
|
}
|
|
28725
28725
|
],
|
|
28726
|
-
"markdown": "---\ntitle: Timeline\ncategory: 03 / DATA\ndescription: 垂直 / 水平时间轴，支持图标 marker 与自定义插槽。\n---\n\n# Timeline\n\n按时间顺序展示事件节点。\n\n## 引入\n\n```ts\nimport { MTimeline } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Horizontal\n\n```vue preview src=\"./demos/Horizontal.zh.vue\"\n```\n\n## Pending & item slot\n\n`pending` 为 `true` 或文案时追加末尾待处理节点。`#item` 可整项自定义。\n\n```vue preview src=\"./demos/PendingAndItemSlot.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `value` | `TimelineEvent[]` | — | 事件。 |\n| `align` | `'left' \\| 'right' \\| 'alternate'` | `'left'` | 垂直布局对齐。 |\n| `layout` | `'vertical' \\| 'horizontal'` | `'vertical'` | 方向。 |\n| `pending` | `boolean \\| string` | — | 追加末尾待处理项；字符串作为文案。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n`TimelineEvent`：`status` / `content` / `date` / `icon`（`IconName` 或文字）/ `color` / `
|
|
28726
|
+
"markdown": "---\ntitle: Timeline\ncategory: 03 / DATA\ndescription: 垂直 / 水平时间轴，支持图标 marker 与自定义插槽。\n---\n\n# Timeline\n\n按时间顺序展示事件节点。\n\n## 引入\n\n```ts\nimport { MTimeline } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Horizontal\n\n```vue preview src=\"./demos/Horizontal.zh.vue\"\n```\n\n## Pending & item slot\n\n`pending` 为 `true` 或文案时追加末尾待处理节点。`#item` 可整项自定义。\n\n```vue preview src=\"./demos/PendingAndItemSlot.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `value` | `TimelineEvent[]` | — | 事件。 |\n| `align` | `'left' \\| 'right' \\| 'alternate'` | `'left'` | 垂直布局对齐。 |\n| `layout` | `'vertical' \\| 'horizontal'` | `'vertical'` | 方向。 |\n| `pending` | `boolean \\| string` | — | 追加末尾待处理项；字符串作为文案。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n`TimelineEvent`：`status` / `content` / `date` / `icon`（`IconName` 或文字）/ `color` / `type`。\n\n## Slots\n\n| 插槽 | 说明 |\n| --- | --- |\n| `item` | 整项自定义，`{ item, index }`；不传时使用 opposite / marker / content。 |\n| `content` | 主内容，`{ item, index }`。 |\n| `opposite` | 对侧内容，默认显示 `date`。 |\n| `marker` | 自定义节点圆点。 |\n| `connector` | 自定义连接线。 |\n\n## Events\n\n无自定义事件。\n\n## 类型\n\n<h4 id=\"TimelineEvent\">TimelineEvent</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface TimelineEvent {\n status?: string\n content?: string\n date?: string\n /** Built-in IconName, or raw text glyph fallback. */\n icon?: IconName | string\n color?: string\n type?: TimelineType\n}\n```\n"
|
|
28727
28727
|
},
|
|
28728
28728
|
"en-US": {
|
|
28729
28729
|
"title": "Timeline",
|
|
@@ -28757,7 +28757,7 @@
|
|
|
28757
28757
|
{
|
|
28758
28758
|
"id": "props",
|
|
28759
28759
|
"title": "Props",
|
|
28760
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `value` | `TimelineEvent[]` | — | Events. |\n| `align` | `'left' \\| 'right' \\| 'alternate'` | `'left'` | Alignment for vertical layout. |\n| `layout` | `'vertical' \\| 'horizontal'` | `'vertical'` | Direction. |\n| `pending` | `boolean \\| string` | — | Append a trailing pending item; a string is used as the label. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n`TimelineEvent`: `status` / `content` / `date` / `icon` (`IconName` or text) / `color` / `
|
|
28760
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `value` | `TimelineEvent[]` | — | Events. |\n| `align` | `'left' \\| 'right' \\| 'alternate'` | `'left'` | Alignment for vertical layout. |\n| `layout` | `'vertical' \\| 'horizontal'` | `'vertical'` | Direction. |\n| `pending` | `boolean \\| string` | — | Append a trailing pending item; a string is used as the label. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n`TimelineEvent`: `status` / `content` / `date` / `icon` (`IconName` or text) / `color` / `type`."
|
|
28761
28761
|
},
|
|
28762
28762
|
{
|
|
28763
28763
|
"id": "slots",
|
|
@@ -28772,10 +28772,10 @@
|
|
|
28772
28772
|
{
|
|
28773
28773
|
"id": "types",
|
|
28774
28774
|
"title": "Types",
|
|
28775
|
-
"body": "<h4 id=\"TimelineEvent\">TimelineEvent</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface TimelineEvent {\n status?: string\n content?: string\n date?: string\n /** Built-in IconName, or raw text glyph fallback. */\n icon?: IconName | string\n color?: string\n
|
|
28775
|
+
"body": "<h4 id=\"TimelineEvent\">TimelineEvent</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface TimelineEvent {\n status?: string\n content?: string\n date?: string\n /** Built-in IconName, or raw text glyph fallback. */\n icon?: IconName | string\n color?: string\n type?: TimelineType\n}\n```"
|
|
28776
28776
|
}
|
|
28777
28777
|
],
|
|
28778
|
-
"markdown": "---\ntitle: Timeline\ncategory: 03 / DATA\ndescription: Vertical or horizontal timeline with icon markers and custom slots.\n---\n\n# Timeline\n\nDisplay event nodes in chronological order.\n\n## Import\n\n```ts\nimport { MTimeline } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Horizontal\n\n```vue preview src=\"./demos/Horizontal.en.vue\"\n```\n\n## Pending & item slot\n\n`pending` (`true` or a string) appends a trailing item. `#item` replaces the whole event.\n\n```vue preview src=\"./demos/PendingAndItemSlot.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `value` | `TimelineEvent[]` | — | Events. |\n| `align` | `'left' \\| 'right' \\| 'alternate'` | `'left'` | Alignment for vertical layout. |\n| `layout` | `'vertical' \\| 'horizontal'` | `'vertical'` | Direction. |\n| `pending` | `boolean \\| string` | — | Append a trailing pending item; a string is used as the label. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n`TimelineEvent`: `status` / `content` / `date` / `icon` (`IconName` or text) / `color` / `
|
|
28778
|
+
"markdown": "---\ntitle: Timeline\ncategory: 03 / DATA\ndescription: Vertical or horizontal timeline with icon markers and custom slots.\n---\n\n# Timeline\n\nDisplay event nodes in chronological order.\n\n## Import\n\n```ts\nimport { MTimeline } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Horizontal\n\n```vue preview src=\"./demos/Horizontal.en.vue\"\n```\n\n## Pending & item slot\n\n`pending` (`true` or a string) appends a trailing item. `#item` replaces the whole event.\n\n```vue preview src=\"./demos/PendingAndItemSlot.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `value` | `TimelineEvent[]` | — | Events. |\n| `align` | `'left' \\| 'right' \\| 'alternate'` | `'left'` | Alignment for vertical layout. |\n| `layout` | `'vertical' \\| 'horizontal'` | `'vertical'` | Direction. |\n| `pending` | `boolean \\| string` | — | Append a trailing pending item; a string is used as the label. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n`TimelineEvent`: `status` / `content` / `date` / `icon` (`IconName` or text) / `color` / `type`.\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `item` | Whole event, `{ item, index }`; falls back to opposite / marker / content. |\n| `content` | Main content, `{ item, index }`. |\n| `opposite` | Opposite-side content; shows `date` by default. |\n| `marker` | Custom node marker. |\n| `connector` | Custom connector line. |\n\n## Events\n\nNo custom events.\n\n## Types\n\n<h4 id=\"TimelineEvent\">TimelineEvent</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface TimelineEvent {\n status?: string\n content?: string\n date?: string\n /** Built-in IconName, or raw text glyph fallback. */\n icon?: IconName | string\n color?: string\n type?: TimelineType\n}\n```\n"
|
|
28779
28779
|
}
|
|
28780
28780
|
}
|
|
28781
28781
|
},
|
|
@@ -28972,10 +28972,10 @@
|
|
|
28972
28972
|
{
|
|
28973
28973
|
"id": "faq",
|
|
28974
28974
|
"title": "FAQ",
|
|
28975
|
-
"body": "### 和 `MDatePicker type=\"time\"` 有何区别？\n\n行为一致。`MTimePicker` 只是独立入口与更清晰的类型（无 `type` prop），便于文档站与按需引入。\n\n### 何时用本组件？\n\n只需要时间（无日期）时用它，API 更窄（`
|
|
28975
|
+
"body": "### 和 `MDatePicker type=\"time\"` 有何区别？\n\n行为一致。`MTimePicker` 只是独立入口与更清晰的类型（无 `type` prop），便于文档站与按需引入。\n\n### 何时用本组件？\n\n只需要时间（无日期）时用它，API 更窄（`size` / `showSeconds` 等）。"
|
|
28976
28976
|
}
|
|
28977
28977
|
],
|
|
28978
|
-
"markdown": "---\ntitle: TimePicker\ncategory: 02 / FORM\ndescription: 独立时间选择入口；内部等价于 `MDatePicker` 的 `type=\"time\"`。\n---\n\n# TimePicker\n\n只选择时分（可选秒）的时间选择器。实现上是对 `MDatePicker` 的薄封装，`type` 固定为 `time`。\n\n## 何时使用\n\n- 表单里只要「时刻」，不需要日期网格\n- 想从组件总览 / 搜索直接找到 TimePicker（而不是翻 DatePicker 类型章节）\n- 优先用本组件；仍可用 `MDatePicker type=\"time\"`\n\n与 `MDatePicker` 的边界：日期、日期时间、范围请继续用 [DatePicker](/components/DatePicker)。\n\n## 引入\n\n```ts\nimport { MTimePicker } from 'morya-ui'\n```\n\n## 基础用法\n\n值为 `HH:mm`；`showSeconds` 时为 `HH:mm:ss`。\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Props\n\n继承 [DatePicker](/components/DatePicker) 除 `type` 外的 props（`type` 固定为 `time`）。常用：\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| Date \\| null` | `null` | `HH:mm` 或含秒时 `HH:mm:ss` |\n| `showSeconds` | `boolean` | `false` | 是否包含秒列 |\n| `format` | `string` | `'HH:mm'` | 输入框展示格式 |\n| `label` | `string` | — | 标签 |\n| `placeholder` | `string` | locale | 占位（默认 `timePickerPlaceholder`） |\n| `clearable` | `boolean` | `true` | 清除按钮 |\n| `fluid` | `boolean` | `false` | 通栏 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | 尺寸 |\n| `disabled` / `invalid` | `boolean` | `false` | 禁用 / 校验失败 |\n| `teleport` / `appendTo` | — | 同 DatePicker | 面板挂载 |\n| `transition` | `string \\| false` | `'scale-fade'` | 动效 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string \\| Date \\| null` | 值变化。 |\n| `change` | `string \\| Date \\| null` | 选择完成。 |\n| `clear` | — | 点击清除。 |\n| `show` | — | 面板打开。 |\n| `hide` | — | 面板关闭。 |\n\n## FAQ\n\n### 和 `MDatePicker type=\"time\"` 有何区别？\n\n行为一致。`MTimePicker` 只是独立入口与更清晰的类型（无 `type` prop），便于文档站与按需引入。\n\n### 何时用本组件？\n\n只需要时间（无日期）时用它，API 更窄（`
|
|
28978
|
+
"markdown": "---\ntitle: TimePicker\ncategory: 02 / FORM\ndescription: 独立时间选择入口；内部等价于 `MDatePicker` 的 `type=\"time\"`。\n---\n\n# TimePicker\n\n只选择时分（可选秒）的时间选择器。实现上是对 `MDatePicker` 的薄封装，`type` 固定为 `time`。\n\n## 何时使用\n\n- 表单里只要「时刻」，不需要日期网格\n- 想从组件总览 / 搜索直接找到 TimePicker（而不是翻 DatePicker 类型章节）\n- 优先用本组件；仍可用 `MDatePicker type=\"time\"`\n\n与 `MDatePicker` 的边界：日期、日期时间、范围请继续用 [DatePicker](/components/DatePicker)。\n\n## 引入\n\n```ts\nimport { MTimePicker } from 'morya-ui'\n```\n\n## 基础用法\n\n值为 `HH:mm`；`showSeconds` 时为 `HH:mm:ss`。\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Props\n\n继承 [DatePicker](/components/DatePicker) 除 `type` 外的 props（`type` 固定为 `time`）。常用：\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| Date \\| null` | `null` | `HH:mm` 或含秒时 `HH:mm:ss` |\n| `showSeconds` | `boolean` | `false` | 是否包含秒列 |\n| `format` | `string` | `'HH:mm'` | 输入框展示格式 |\n| `label` | `string` | — | 标签 |\n| `placeholder` | `string` | locale | 占位（默认 `timePickerPlaceholder`） |\n| `clearable` | `boolean` | `true` | 清除按钮 |\n| `fluid` | `boolean` | `false` | 通栏 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | 尺寸 |\n| `disabled` / `invalid` | `boolean` | `false` | 禁用 / 校验失败 |\n| `teleport` / `appendTo` | — | 同 DatePicker | 面板挂载 |\n| `transition` | `string \\| false` | `'scale-fade'` | 动效 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string \\| Date \\| null` | 值变化。 |\n| `change` | `string \\| Date \\| null` | 选择完成。 |\n| `clear` | — | 点击清除。 |\n| `show` | — | 面板打开。 |\n| `hide` | — | 面板关闭。 |\n\n## FAQ\n\n### 和 `MDatePicker type=\"time\"` 有何区别？\n\n行为一致。`MTimePicker` 只是独立入口与更清晰的类型（无 `type` prop），便于文档站与按需引入。\n\n### 何时用本组件？\n\n只需要时间（无日期）时用它，API 更窄（`size` / `showSeconds` 等）。\n"
|
|
28979
28979
|
},
|
|
28980
28980
|
"en-US": {
|
|
28981
28981
|
"title": "TimePicker",
|
|
@@ -29014,10 +29014,10 @@
|
|
|
29014
29014
|
{
|
|
29015
29015
|
"id": "faq",
|
|
29016
29016
|
"title": "FAQ",
|
|
29017
|
-
"body": "### Difference from `MDatePicker type=\"time\"`?\n\nSame behavior. `MTimePicker` is a dedicated entry and clearer types (no `type` prop).\n\n### When to use this one?\n\nUse it when you need a time only (no date) and a narrower API (`
|
|
29017
|
+
"body": "### Difference from `MDatePicker type=\"time\"`?\n\nSame behavior. `MTimePicker` is a dedicated entry and clearer types (no `type` prop).\n\n### When to use this one?\n\nUse it when you need a time only (no date) and a narrower API (`size` / `showSeconds`, etc.)."
|
|
29018
29018
|
}
|
|
29019
29019
|
],
|
|
29020
|
-
"markdown": "---\ntitle: TimePicker\ncategory: 02 / FORM\ndescription: Dedicated time picker entry; equivalent to `MDatePicker` with `type=\"time\"`.\n---\n\n# TimePicker\n\nPick hours and minutes (optional seconds). Thin wrapper around `MDatePicker` with `type` fixed to `time`.\n\n## When to use\n\n- Forms that need a clock time only (no day grid)\n- Discoverability from the component overview / search as TimePicker\n- Prefer this export; `MDatePicker type=\"time\"` still works\n\nFor dates, date-times, and ranges, use [DatePicker](/components/DatePicker).\n\n## Import\n\n```ts\nimport { MTimePicker } from 'morya-ui'\n```\n\n## Basic\n\nValue is `HH:mm`, or `HH:mm:ss` when `showSeconds` is set.\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Props\n\nInherits [DatePicker](/components/DatePicker) props except `type` (always `time`). Common ones:\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| Date \\| null` | `null` | `HH:mm` or `HH:mm:ss` with seconds |\n| `showSeconds` | `boolean` | `false` | Include seconds column |\n| `format` | `string` | `'HH:mm'` | Input display pattern |\n| `label` | `string` | — | Label |\n| `placeholder` | `string` | locale | Placeholder (`timePickerPlaceholder`) |\n| `clearable` | `boolean` | `true` | Clear button |\n| `fluid` | `boolean` | `false` | Full width |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | Size |\n| `disabled` / `invalid` | `boolean` | `false` | Disabled / invalid |\n| `teleport` / `appendTo` | — | same as DatePicker | Panel mount |\n| `transition` | `string \\| false` | `'scale-fade'` | Motion |\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string \\| Date \\| null` | Value changed. |\n| `change` | `string \\| Date \\| null` | Selection finished. |\n| `clear` | — | Clear clicked. |\n| `show` | — | Panel opened. |\n| `hide` | — | Panel closed. |\n\n## FAQ\n\n### Difference from `MDatePicker type=\"time\"`?\n\nSame behavior. `MTimePicker` is a dedicated entry and clearer types (no `type` prop).\n\n### When to use this one?\n\nUse it when you need a time only (no date) and a narrower API (`
|
|
29020
|
+
"markdown": "---\ntitle: TimePicker\ncategory: 02 / FORM\ndescription: Dedicated time picker entry; equivalent to `MDatePicker` with `type=\"time\"`.\n---\n\n# TimePicker\n\nPick hours and minutes (optional seconds). Thin wrapper around `MDatePicker` with `type` fixed to `time`.\n\n## When to use\n\n- Forms that need a clock time only (no day grid)\n- Discoverability from the component overview / search as TimePicker\n- Prefer this export; `MDatePicker type=\"time\"` still works\n\nFor dates, date-times, and ranges, use [DatePicker](/components/DatePicker).\n\n## Import\n\n```ts\nimport { MTimePicker } from 'morya-ui'\n```\n\n## Basic\n\nValue is `HH:mm`, or `HH:mm:ss` when `showSeconds` is set.\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Props\n\nInherits [DatePicker](/components/DatePicker) props except `type` (always `time`). Common ones:\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| Date \\| null` | `null` | `HH:mm` or `HH:mm:ss` with seconds |\n| `showSeconds` | `boolean` | `false` | Include seconds column |\n| `format` | `string` | `'HH:mm'` | Input display pattern |\n| `label` | `string` | — | Label |\n| `placeholder` | `string` | locale | Placeholder (`timePickerPlaceholder`) |\n| `clearable` | `boolean` | `true` | Clear button |\n| `fluid` | `boolean` | `false` | Full width |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | Size |\n| `disabled` / `invalid` | `boolean` | `false` | Disabled / invalid |\n| `teleport` / `appendTo` | — | same as DatePicker | Panel mount |\n| `transition` | `string \\| false` | `'scale-fade'` | Motion |\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string \\| Date \\| null` | Value changed. |\n| `change` | `string \\| Date \\| null` | Selection finished. |\n| `clear` | — | Clear clicked. |\n| `show` | — | Panel opened. |\n| `hide` | — | Panel closed. |\n\n## FAQ\n\n### Difference from `MDatePicker type=\"time\"`?\n\nSame behavior. `MTimePicker` is a dedicated entry and clearer types (no `type` prop).\n\n### When to use this one?\n\nUse it when you need a time only (no date) and a narrower API (`size` / `showSeconds`, etc.).\n"
|
|
29021
29021
|
}
|
|
29022
29022
|
}
|
|
29023
29023
|
},
|
|
@@ -29090,7 +29090,7 @@
|
|
|
29090
29090
|
"methods": [
|
|
29091
29091
|
{
|
|
29092
29092
|
"name": "toast.success / info / warn / error",
|
|
29093
|
-
"description": "
|
|
29093
|
+
"description": "按语义添加（`warn`→`warning`，`error`→`danger`）"
|
|
29094
29094
|
},
|
|
29095
29095
|
{
|
|
29096
29096
|
"name": "toast.add",
|
|
@@ -29126,19 +29126,19 @@
|
|
|
29126
29126
|
},
|
|
29127
29127
|
{
|
|
29128
29128
|
"name": "info",
|
|
29129
|
-
"description": "
|
|
29129
|
+
"description": "类型快捷方法（`error`→`danger`）"
|
|
29130
29130
|
},
|
|
29131
29131
|
{
|
|
29132
29132
|
"name": "success",
|
|
29133
|
-
"description": "
|
|
29133
|
+
"description": "类型快捷方法（`error`→`danger`）"
|
|
29134
29134
|
},
|
|
29135
29135
|
{
|
|
29136
29136
|
"name": "warning",
|
|
29137
|
-
"description": "
|
|
29137
|
+
"description": "类型快捷方法（`error`→`danger`）"
|
|
29138
29138
|
},
|
|
29139
29139
|
{
|
|
29140
29140
|
"name": "error",
|
|
29141
|
-
"description": "
|
|
29141
|
+
"description": "类型快捷方法（`error`→`danger`）"
|
|
29142
29142
|
},
|
|
29143
29143
|
{
|
|
29144
29144
|
"name": "close",
|
|
@@ -29183,7 +29183,7 @@
|
|
|
29183
29183
|
"sectionId": "controlled",
|
|
29184
29184
|
"lang": "vue",
|
|
29185
29185
|
"preview": true,
|
|
29186
|
-
"code": "<script setup lang=\"ts\">\nimport type { ToastMessage } from 'morya-ui'\nimport { MButton, MToast } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst messages = ref<ToastMessage[]>([])\nlet seq = 0\n\nfunction push(
|
|
29186
|
+
"code": "<script setup lang=\"ts\">\nimport type { ToastMessage } from 'morya-ui'\nimport { MButton, MToast } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst messages = ref<ToastMessage[]>([])\nlet seq = 0\n\nfunction push(type: ToastMessage['type'], summary: string, detail?: string) {\n messages.value = [\n ...messages.value,\n { id: `toast-${++seq}`, summary, detail, type, life: 0 },\n ]\n}\n\nfunction onClose(message: ToastMessage) {\n messages.value = messages.value.filter((item) => item.id !== message.id)\n}\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MButton label=\"Success\" @click=\"push('success', 'Saved', 'Your changes are live.')\" color=\"success\" variant=\"solid\"/>\n <MButton label=\"Info\" @click=\"push('info', 'Tip', 'Something to know.')\" color=\"info\" variant=\"solid\"/>\n </div>\n <MToast :messages=\"messages\" position=\"top-right\" @close=\"onClose\" />\n</template>",
|
|
29187
29187
|
"locale": "zh-CN"
|
|
29188
29188
|
},
|
|
29189
29189
|
{
|
|
@@ -29192,7 +29192,7 @@
|
|
|
29192
29192
|
"sectionId": "类型",
|
|
29193
29193
|
"lang": "ts",
|
|
29194
29194
|
"preview": false,
|
|
29195
|
-
"code": "interface ToastMessage {\n id: string | number\n summary: MRenderable\n detail?: MRenderable\n
|
|
29195
|
+
"code": "interface ToastMessage {\n id: string | number\n summary: MRenderable\n detail?: MRenderable\n type?: ToastType\n closable?: boolean\n /** 自定义前置图标 */\n icon?: IconName\n /** 详情下方的操作区（通常是按钮） */\n actions?: MRenderable\n /** Auto-close delay in ms. `0` keeps it open. Default `3000` for API calls. */\n life?: number\n}",
|
|
29196
29196
|
"locale": "zh-CN"
|
|
29197
29197
|
},
|
|
29198
29198
|
{
|
|
@@ -29237,7 +29237,7 @@
|
|
|
29237
29237
|
"sectionId": "controlled",
|
|
29238
29238
|
"lang": "vue",
|
|
29239
29239
|
"preview": true,
|
|
29240
|
-
"code": "<script setup lang=\"ts\">\nimport type { ToastMessage } from 'morya-ui'\nimport { MButton, MToast } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst messages = ref<ToastMessage[]>([])\nlet seq = 0\n\nfunction push(
|
|
29240
|
+
"code": "<script setup lang=\"ts\">\nimport type { ToastMessage } from 'morya-ui'\nimport { MButton, MToast } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst messages = ref<ToastMessage[]>([])\nlet seq = 0\n\nfunction push(type: ToastMessage['type'], summary: string, detail?: string) {\n messages.value = [\n ...messages.value,\n { id: `toast-${++seq}`, summary, detail, type, life: 0 },\n ]\n}\n\nfunction onClose(message: ToastMessage) {\n messages.value = messages.value.filter((item) => item.id !== message.id)\n}\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MButton label=\"Success\" @click=\"push('success', 'Saved', 'Your changes are live.')\" color=\"success\" variant=\"solid\"/>\n <MButton label=\"Info\" @click=\"push('info', 'Tip', 'Something to know.')\" color=\"info\" variant=\"solid\"/>\n </div>\n <MToast :messages=\"messages\" position=\"top-right\" @close=\"onClose\" />\n</template>",
|
|
29241
29241
|
"locale": "en-US"
|
|
29242
29242
|
},
|
|
29243
29243
|
{
|
|
@@ -29246,7 +29246,7 @@
|
|
|
29246
29246
|
"sectionId": "types",
|
|
29247
29247
|
"lang": "ts",
|
|
29248
29248
|
"preview": false,
|
|
29249
|
-
"code": "interface ToastMessage {\n id: string | number\n summary: MRenderable\n detail?: MRenderable\n
|
|
29249
|
+
"code": "interface ToastMessage {\n id: string | number\n summary: MRenderable\n detail?: MRenderable\n type?: ToastType\n closable?: boolean\n /** Custom leading icon */\n icon?: IconName\n /** Action area rendered under the detail (usually buttons) */\n actions?: MRenderable\n /** Auto-close delay in ms. `0` keeps it open. Default `3000` for API calls. */\n life?: number\n}",
|
|
29250
29250
|
"locale": "en-US"
|
|
29251
29251
|
},
|
|
29252
29252
|
{
|
|
@@ -29292,7 +29292,7 @@
|
|
|
29292
29292
|
{
|
|
29293
29293
|
"id": "methods",
|
|
29294
29294
|
"title": "Methods",
|
|
29295
|
-
"body": "| 方法 | 说明 |\n| --- | --- |\n| `toast.success / info / warn / error` |
|
|
29295
|
+
"body": "| 方法 | 说明 |\n| --- | --- |\n| `toast.success / info / warn / error` | 按语义添加（`warn`→`warning`，`error`→`danger`） |\n| `toast.add(options)` | 添加一条 |\n| `toast.remove(id)` / `toast.close(id)` | 移除 |\n| `toast.clear()` / `toast.closeAll()` / `toast.destroyAll()` | 清空 |\n| `toast.setDefaults({ position, max })` | 默认角落位置与并发上限 |\n\n字符串入参视为 `summary`。默认 `life` 为 `3000`；`0` 表示不自动关闭。"
|
|
29296
29296
|
},
|
|
29297
29297
|
{
|
|
29298
29298
|
"id": "props",
|
|
@@ -29312,15 +29312,15 @@
|
|
|
29312
29312
|
{
|
|
29313
29313
|
"id": "类型",
|
|
29314
29314
|
"title": "类型",
|
|
29315
|
-
"body": "<h4 id=\"ToastMessage\">ToastMessage</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface ToastMessage {\n id: string | number\n summary: MRenderable\n detail?: MRenderable\n
|
|
29315
|
+
"body": "<h4 id=\"ToastMessage\">ToastMessage</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface ToastMessage {\n id: string | number\n summary: MRenderable\n detail?: MRenderable\n type?: ToastType\n closable?: boolean\n /** 自定义前置图标 */\n icon?: IconName\n /** 详情下方的操作区（通常是按钮） */\n actions?: MRenderable\n /** Auto-close delay in ms. `0` keeps it open. Default `3000` for API calls. */\n life?: number\n}\n```"
|
|
29316
29316
|
},
|
|
29317
29317
|
{
|
|
29318
29318
|
"id": "notification-usenotification-notification",
|
|
29319
29319
|
"title": "Notification（useNotification / notification）",
|
|
29320
|
-
"body": "底层复用同一套 toast 服务（单一浮层宿主与动画栈）：\n\n```ts\nimport { notification, useNotification } from 'morya-ui'\n\nconst api = useNotification()\n\napi.success({ message: '已保存', description: '所有修改已写入', duration: 3 })\napi.open({ message: '后台任务', key: 'job', btn: h(MButton, {}, () => '查看') })\n// 同 key 再次 open 会原位更新，而不是堆叠新的一条\napi.open({ message: '完成', key: 'job', type: 'success' })\n```\n\n| 方法 | 说明 |\n| --- | --- |\n| `open(options)` | 打开一条通知 |\n| `info` / `success` / `warning` / `error` |
|
|
29320
|
+
"body": "底层复用同一套 toast 服务（单一浮层宿主与动画栈）：\n\n```ts\nimport { notification, useNotification } from 'morya-ui'\n\nconst api = useNotification()\n\napi.success({ message: '已保存', description: '所有修改已写入', duration: 3 })\napi.open({ message: '后台任务', key: 'job', btn: h(MButton, {}, () => '查看') })\n// 同 key 再次 open 会原位更新，而不是堆叠新的一条\napi.open({ message: '完成', key: 'job', type: 'success' })\n```\n\n| 方法 | 说明 |\n| --- | --- |\n| `open(options)` | 打开一条通知 |\n| `info` / `success` / `warning` / `error` | 类型快捷方法（`error`→`danger`） |\n| `close(key)` | 按 key 关闭 |\n| `destroy()` | 关闭全部 |\n\n| 字段 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `message` | `MRenderable` | — | 标题 |\n| `description` | `MRenderable` | — | 正文 |\n| `btn` | `MRenderable` | — | 操作区 |\n| `icon` | `IconName` | — | 自定义图标 |\n| `type` | `NotificationType` | `'info'` | 语义色调与默认图标 |\n| `key` | `string \\| number` | — | 唯一键；重复传入会原位更新 |\n| `duration` | `number` | `4.5` | 自动关闭秒数（`0` 不自动关闭） |\n| `placement` | `NotificationPlacement` | `'topRight'` | `topLeft` / `topRight` / `bottomLeft` / `bottomRight` / `top` / `bottom` |\n| `closable` | `boolean` | `true` | 显示关闭按钮 |\n| `onClose` | `() => void` | — | 关闭后回调 |\n\n> `duration` 单位是**秒**，而 `toast` 原生 API 的 `life` 是毫秒。"
|
|
29321
29321
|
}
|
|
29322
29322
|
],
|
|
29323
|
-
"markdown": "---\ntitle: Toast\ncategory: 05 / FEEDBACK\ndescription: 四角浮层通知，支持 API 与受控列表。\n---\n\n# Toast\n\n带标题 / 详情的四角通知。可用 `toast` API，或继续用 `:messages` 受控渲染。\n\n与 [Message](/components/Message) 的分工：Message 是**默认**的轻量单行反馈；Toast 仅在需要 `summary` / `detail` 或角落通知时使用。受控 `:messages` 时请自行限制条数，`max` 只作用于服务队列。\n\n> AI / 业务代码选型细则见 [`feedback.md`](../../../../design-kit/.agents/skills/morya-ui-pages/references/feedback.md)。\n\n**不要**用 `toast.add({ summary: '已保存' })` 代替 `message.success('已保存')`。\n\n## 引入\n\n```ts\nimport { MToast, toast, useToast } from 'morya-ui'\n```\n\n## API\n\n```vue preview src=\"./demos/Api.zh.vue\"\n```\n\n## 自定义内容\n\n`summary` / `detail` 同样支持字符串、`h()`、组件或渲染工厂。\n\n```vue preview src=\"./demos/CustomContent.zh.vue\"\n```\n\n## Controlled\n\n仍可通过 `messages` + `close` 自行管理列表。\n\n```vue preview src=\"./demos/Controlled.vue\"\n```\n\n## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `toast.success / info / warn / error` |
|
|
29323
|
+
"markdown": "---\ntitle: Toast\ncategory: 05 / FEEDBACK\ndescription: 四角浮层通知，支持 API 与受控列表。\n---\n\n# Toast\n\n带标题 / 详情的四角通知。可用 `toast` API，或继续用 `:messages` 受控渲染。\n\n与 [Message](/components/Message) 的分工：Message 是**默认**的轻量单行反馈；Toast 仅在需要 `summary` / `detail` 或角落通知时使用。受控 `:messages` 时请自行限制条数，`max` 只作用于服务队列。\n\n> AI / 业务代码选型细则见 [`feedback.md`](../../../../design-kit/.agents/skills/morya-ui-pages/references/feedback.md)。\n\n**不要**用 `toast.add({ summary: '已保存' })` 代替 `message.success('已保存')`。\n\n## 引入\n\n```ts\nimport { MToast, toast, useToast } from 'morya-ui'\n```\n\n## API\n\n```vue preview src=\"./demos/Api.zh.vue\"\n```\n\n## 自定义内容\n\n`summary` / `detail` 同样支持字符串、`h()`、组件或渲染工厂。\n\n```vue preview src=\"./demos/CustomContent.zh.vue\"\n```\n\n## Controlled\n\n仍可通过 `messages` + `close` 自行管理列表。\n\n```vue preview src=\"./demos/Controlled.vue\"\n```\n\n## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `toast.success / info / warn / error` | 按语义添加（`warn`→`warning`，`error`→`danger`） |\n| `toast.add(options)` | 添加一条 |\n| `toast.remove(id)` / `toast.close(id)` | 移除 |\n| `toast.clear()` / `toast.closeAll()` / `toast.destroyAll()` | 清空 |\n| `toast.setDefaults({ position, max })` | 默认角落位置与并发上限 |\n\n字符串入参视为 `summary`。默认 `life` 为 `3000`；`0` 表示不自动关闭。\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `messages` | `ToastMessage[]` | — | 受控列表；省略则绑定 `toast` 服务队列 |\n| `position` | `'top-right' \\| 'top-left' \\| 'bottom-right' \\| 'bottom-left'` | `'top-right'` | 容器定位 |\n| `max` | `number` | — | 同时可见条数；超出丢掉最旧一条（仅服务队列） |\n| `teleport` | `boolean` | `true` | 浮层 Teleport |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标 |\n| `auto` | `boolean` | — | — |\n| `transition` | `string \\| false` | `'slide-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `close` | `ToastMessage` | 点击关闭；受控模式下由调用方移除 |\n\n## Slots\n\n无插槽；通过 `messages` prop 或 toast API 驱动。\n\n## 类型\n\n<h4 id=\"ToastMessage\">ToastMessage</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface ToastMessage {\n id: string | number\n summary: MRenderable\n detail?: MRenderable\n type?: ToastType\n closable?: boolean\n /** 自定义前置图标 */\n icon?: IconName\n /** 详情下方的操作区（通常是按钮） */\n actions?: MRenderable\n /** Auto-close delay in ms. `0` keeps it open. Default `3000` for API calls. */\n life?: number\n}\n```\n\n## Notification（useNotification / notification）\n\n底层复用同一套 toast 服务（单一浮层宿主与动画栈）：\n\n```ts\nimport { notification, useNotification } from 'morya-ui'\n\nconst api = useNotification()\n\napi.success({ message: '已保存', description: '所有修改已写入', duration: 3 })\napi.open({ message: '后台任务', key: 'job', btn: h(MButton, {}, () => '查看') })\n// 同 key 再次 open 会原位更新，而不是堆叠新的一条\napi.open({ message: '完成', key: 'job', type: 'success' })\n```\n\n| 方法 | 说明 |\n| --- | --- |\n| `open(options)` | 打开一条通知 |\n| `info` / `success` / `warning` / `error` | 类型快捷方法（`error`→`danger`） |\n| `close(key)` | 按 key 关闭 |\n| `destroy()` | 关闭全部 |\n\n| 字段 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `message` | `MRenderable` | — | 标题 |\n| `description` | `MRenderable` | — | 正文 |\n| `btn` | `MRenderable` | — | 操作区 |\n| `icon` | `IconName` | — | 自定义图标 |\n| `type` | `NotificationType` | `'info'` | 语义色调与默认图标 |\n| `key` | `string \\| number` | — | 唯一键；重复传入会原位更新 |\n| `duration` | `number` | `4.5` | 自动关闭秒数（`0` 不自动关闭） |\n| `placement` | `NotificationPlacement` | `'topRight'` | `topLeft` / `topRight` / `bottomLeft` / `bottomRight` / `top` / `bottom` |\n| `closable` | `boolean` | `true` | 显示关闭按钮 |\n| `onClose` | `() => void` | — | 关闭后回调 |\n\n> `duration` 单位是**秒**，而 `toast` 原生 API 的 `life` 是毫秒。\n"
|
|
29324
29324
|
},
|
|
29325
29325
|
"en-US": {
|
|
29326
29326
|
"title": "Toast",
|
|
@@ -29354,7 +29354,7 @@
|
|
|
29354
29354
|
{
|
|
29355
29355
|
"id": "methods",
|
|
29356
29356
|
"title": "Methods",
|
|
29357
|
-
"body": "| Method | Description |\n| --- | --- |\n| `toast.success / info / warn / error` | Add by
|
|
29357
|
+
"body": "| Method | Description |\n| --- | --- |\n| `toast.success / info / warn / error` | Add by type (`warn`→`warning`, `error`→`danger`) |\n| `toast.add(options)` | Add one |\n| `toast.remove(id)` / `toast.close(id)` | Remove |\n| `toast.clear()` / `toast.closeAll()` / `toast.destroyAll()` | Clear all |\n| `toast.setDefaults({ position, max })` | Default corner and concurrency cap |\n\nA string argument is treated as `summary`. Default `life` is `3000`; use `0` to keep open."
|
|
29358
29358
|
},
|
|
29359
29359
|
{
|
|
29360
29360
|
"id": "props",
|
|
@@ -29374,15 +29374,15 @@
|
|
|
29374
29374
|
{
|
|
29375
29375
|
"id": "types",
|
|
29376
29376
|
"title": "Types",
|
|
29377
|
-
"body": "<h4 id=\"ToastMessage\">ToastMessage</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface ToastMessage {\n id: string | number\n summary: MRenderable\n detail?: MRenderable\n
|
|
29377
|
+
"body": "<h4 id=\"ToastMessage\">ToastMessage</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface ToastMessage {\n id: string | number\n summary: MRenderable\n detail?: MRenderable\n type?: ToastType\n closable?: boolean\n /** Custom leading icon */\n icon?: IconName\n /** Action area rendered under the detail (usually buttons) */\n actions?: MRenderable\n /** Auto-close delay in ms. `0` keeps it open. Default `3000` for API calls. */\n life?: number\n}\n```"
|
|
29378
29378
|
},
|
|
29379
29379
|
{
|
|
29380
29380
|
"id": "notification-usenotification-notification",
|
|
29381
29381
|
"title": "Notification (useNotification / notification)",
|
|
29382
|
-
"body": "Reuses the same toast service underneath, so every transient message shares one overlay host and motion stack:\n\n```ts\nimport { notification, useNotification } from 'morya-ui'\n\nconst api = useNotification()\n\napi.success({ message: 'Saved', description: 'All changes are stored.', duration: 3 })\napi.open({ message: 'Background job', key: 'job', btn: h(MButton, {}, () => 'View') })\n// Re-opening with the same key updates in place instead of stacking\napi.open({ message: 'Done', key: 'job', type: 'success' })\n```\n\n| Method | Description |\n| --- | --- |\n| `open(options)` | Open one notification |\n| `info` / `success` / `warning` / `error` | Type shortcuts |\n| `close(key)` | Close by key |\n| `destroy()` | Close all |\n\n| Field | Type | Default | Description |\n| --- | --- | --- | --- |\n| `message` | `MRenderable` | — | Title |\n| `description` | `MRenderable` | — | Body |\n| `btn` | `MRenderable` | — | Action area |\n| `icon` | `IconName` | — | Custom icon |\n| `type` | `NotificationType` | `'info'` | Tone and default icon |\n| `key` | `string \\| number` | — | Unique key; passing it again updates in place |\n| `duration` | `number` | `4.5` | Auto-close in **seconds** (`0` keeps it open) |\n| `placement` | `NotificationPlacement` | `'topRight'` | `topLeft` / `topRight` / `bottomLeft` / `bottomRight` / `top` / `bottom` |\n| `closable` | `boolean` | `true` | Show the close button |\n| `onClose` | `() => void` | — | Called after closing |\n\n> `duration` is in **seconds**, while the native `toast` API uses `life` in milliseconds."
|
|
29382
|
+
"body": "Reuses the same toast service underneath, so every transient message shares one overlay host and motion stack:\n\n```ts\nimport { notification, useNotification } from 'morya-ui'\n\nconst api = useNotification()\n\napi.success({ message: 'Saved', description: 'All changes are stored.', duration: 3 })\napi.open({ message: 'Background job', key: 'job', btn: h(MButton, {}, () => 'View') })\n// Re-opening with the same key updates in place instead of stacking\napi.open({ message: 'Done', key: 'job', type: 'success' })\n```\n\n| Method | Description |\n| --- | --- |\n| `open(options)` | Open one notification |\n| `info` / `success` / `warning` / `error` | Type shortcuts (`error`→`danger`) |\n| `close(key)` | Close by key |\n| `destroy()` | Close all |\n\n| Field | Type | Default | Description |\n| --- | --- | --- | --- |\n| `message` | `MRenderable` | — | Title |\n| `description` | `MRenderable` | — | Body |\n| `btn` | `MRenderable` | — | Action area |\n| `icon` | `IconName` | — | Custom icon |\n| `type` | `NotificationType` | `'info'` | Tone and default icon |\n| `key` | `string \\| number` | — | Unique key; passing it again updates in place |\n| `duration` | `number` | `4.5` | Auto-close in **seconds** (`0` keeps it open) |\n| `placement` | `NotificationPlacement` | `'topRight'` | `topLeft` / `topRight` / `bottomLeft` / `bottomRight` / `top` / `bottom` |\n| `closable` | `boolean` | `true` | Show the close button |\n| `onClose` | `() => void` | — | Called after closing |\n\n> `duration` is in **seconds**, while the native `toast` API uses `life` in milliseconds."
|
|
29383
29383
|
}
|
|
29384
29384
|
],
|
|
29385
|
-
"markdown": "---\ntitle: Toast\ncategory: 05 / FEEDBACK\ndescription: Corner floating notifications with API and controlled lists.\n---\n\n# Toast\n\nCorner notifications with a title and optional detail. Use the `toast` API, or keep rendering with a controlled `:messages` list.\n\nVs [Message](/components/Message): Message is the **default** for short single-line feedback; Toast is for `summary` / `detail` or corner notifications. `max` applies to the service queue only.\n\n> Selection guide: [`feedback.md`](../../../../design-kit/.agents/skills/morya-ui-pages/references/feedback.md).\n\nDo **not** use `toast.add({ summary: 'Saved' })` when `message.success('Saved')` is enough.\n\n## Import\n\n```ts\nimport { MToast, toast, useToast } from 'morya-ui'\n```\n\n## API\n\n```vue preview src=\"./demos/Api.en.vue\"\n```\n\n## Custom content\n\n`summary` / `detail` also accept strings, `h()` VNodes, components, or render factories.\n\n```vue preview src=\"./demos/CustomContent.en.vue\"\n```\n\n## Controlled\n\nYou can still manage the list yourself with `messages` + `close`.\n\n```vue preview src=\"./demos/Controlled.vue\"\n```\n\n## Methods\n\n| Method | Description |\n| --- | --- |\n| `toast.success / info / warn / error` | Add by
|
|
29385
|
+
"markdown": "---\ntitle: Toast\ncategory: 05 / FEEDBACK\ndescription: Corner floating notifications with API and controlled lists.\n---\n\n# Toast\n\nCorner notifications with a title and optional detail. Use the `toast` API, or keep rendering with a controlled `:messages` list.\n\nVs [Message](/components/Message): Message is the **default** for short single-line feedback; Toast is for `summary` / `detail` or corner notifications. `max` applies to the service queue only.\n\n> Selection guide: [`feedback.md`](../../../../design-kit/.agents/skills/morya-ui-pages/references/feedback.md).\n\nDo **not** use `toast.add({ summary: 'Saved' })` when `message.success('Saved')` is enough.\n\n## Import\n\n```ts\nimport { MToast, toast, useToast } from 'morya-ui'\n```\n\n## API\n\n```vue preview src=\"./demos/Api.en.vue\"\n```\n\n## Custom content\n\n`summary` / `detail` also accept strings, `h()` VNodes, components, or render factories.\n\n```vue preview src=\"./demos/CustomContent.en.vue\"\n```\n\n## Controlled\n\nYou can still manage the list yourself with `messages` + `close`.\n\n```vue preview src=\"./demos/Controlled.vue\"\n```\n\n## Methods\n\n| Method | Description |\n| --- | --- |\n| `toast.success / info / warn / error` | Add by type (`warn`→`warning`, `error`→`danger`) |\n| `toast.add(options)` | Add one |\n| `toast.remove(id)` / `toast.close(id)` | Remove |\n| `toast.clear()` / `toast.closeAll()` / `toast.destroyAll()` | Clear all |\n| `toast.setDefaults({ position, max })` | Default corner and concurrency cap |\n\nA string argument is treated as `summary`. Default `life` is `3000`; use `0` to keep open.\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `messages` | `ToastMessage[]` | — | Controlled list; omit to bind the `toast` service queue |\n| `position` | `'top-right' \\| 'top-left' \\| 'bottom-right' \\| 'bottom-left'` | `'top-right'` | Container placement |\n| `max` | `number` | — | Max visible items; oldest is dropped (service queue only) |\n| `teleport` | `boolean` | `true` | Whether to Teleport |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target |\n| `transition` | `string \\| false` | `'slide-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `close` | `ToastMessage` | Close clicked; remove it yourself in controlled mode |\n\n## Slots\n\nNo slots; driven by the `messages` prop or toast API.\n\n## Types\n\n<h4 id=\"ToastMessage\">ToastMessage</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface ToastMessage {\n id: string | number\n summary: MRenderable\n detail?: MRenderable\n type?: ToastType\n closable?: boolean\n /** Custom leading icon */\n icon?: IconName\n /** Action area rendered under the detail (usually buttons) */\n actions?: MRenderable\n /** Auto-close delay in ms. `0` keeps it open. Default `3000` for API calls. */\n life?: number\n}\n```\n\n## Notification (useNotification / notification)\n\nReuses the same toast service underneath, so every transient message shares one overlay host and motion stack:\n\n```ts\nimport { notification, useNotification } from 'morya-ui'\n\nconst api = useNotification()\n\napi.success({ message: 'Saved', description: 'All changes are stored.', duration: 3 })\napi.open({ message: 'Background job', key: 'job', btn: h(MButton, {}, () => 'View') })\n// Re-opening with the same key updates in place instead of stacking\napi.open({ message: 'Done', key: 'job', type: 'success' })\n```\n\n| Method | Description |\n| --- | --- |\n| `open(options)` | Open one notification |\n| `info` / `success` / `warning` / `error` | Type shortcuts (`error`→`danger`) |\n| `close(key)` | Close by key |\n| `destroy()` | Close all |\n\n| Field | Type | Default | Description |\n| --- | --- | --- | --- |\n| `message` | `MRenderable` | — | Title |\n| `description` | `MRenderable` | — | Body |\n| `btn` | `MRenderable` | — | Action area |\n| `icon` | `IconName` | — | Custom icon |\n| `type` | `NotificationType` | `'info'` | Tone and default icon |\n| `key` | `string \\| number` | — | Unique key; passing it again updates in place |\n| `duration` | `number` | `4.5` | Auto-close in **seconds** (`0` keeps it open) |\n| `placement` | `NotificationPlacement` | `'topRight'` | `topLeft` / `topRight` / `bottomLeft` / `bottomRight` / `top` / `bottom` |\n| `closable` | `boolean` | `true` | Show the close button |\n| `onClose` | `() => void` | — | Called after closing |\n\n> `duration` is in **seconds**, while the native `toast` API uses `life` in milliseconds.\n"
|
|
29386
29386
|
}
|
|
29387
29387
|
}
|
|
29388
29388
|
},
|
|
@@ -32107,12 +32107,12 @@
|
|
|
32107
32107
|
"zh-CN": {
|
|
32108
32108
|
"title": "设计语言",
|
|
32109
32109
|
"description": "Morya 设计原则与 Design Spec 章节入口。",
|
|
32110
|
-
"markdown": "---\ntitle: 设计语言\norder: 4.5\ndescription: Morya 设计原则与 Design Spec 章节入口。\n---\n\n# 设计语言\n\nMorya UI 是一套**令牌驱动**的 Vue 3 组件库：颜色、间距、圆角、字号与动效统一走 `--m
|
|
32110
|
+
"markdown": "---\ntitle: 设计语言\norder: 4.5\ndescription: Morya 设计原则与 Design Spec 章节入口。\n---\n\n# 设计语言\n\nMorya UI 是一套**令牌驱动**的 Vue 3 组件库：颜色、间距、圆角、字号与动效统一走 `--m-*`，交互词表用语义 `type` / `variant` / `size`（Button 另有 `color`），全局行为由 `MConfigProvider`、`useTheme`、`useDensity`、`useMotion` 协同。\n\n本文是 Design Spec 总览。原则摘要来自仓库 [`design-kit/DESIGN.md`](https://github.com/morya-space/morya-ui/blob/main/design-kit/DESIGN.md)；完整变量目录见 [设计令牌](/docs/design-tokens)。\n\n## 原则\n\n1. **组件优先**：交互与布局优先用库内 `M*`，避免手写等价 DOM。\n2. **令牌优先**：页面与业务样式只消费 `--m-*`；禁止在业务代码写裸 `#hex` / `rgb()`（换品牌改主题入口）。\n3. **语义一致**：主操作用 `type=\"primary\"`；破坏性操作用 `danger` / `color=\"danger\"` 或确认流。\n4. **可访问**：控件有可访问名称；纯图标按钮提供 `aria-label`；浮层可键盘关闭。\n5. **单一事实源**：API 以组件文档 / MCP 为准，勿臆造 prop。\n\n## 章节\n\n| 章节 | 内容 |\n| ------------------------------------- | ------------------------------------------ |\n| [色彩](/docs/design-color) | 品牌色、语义色、中性面、对比与覆盖 |\n| [字体与排版](/docs/design-typography) | 字号阶梯、字重、控件字号 |\n| [间距](/docs/design-spacing) | `--m-space-*` 节奏与密度缩放 |\n| [布局](/docs/design-layout) | `MLayout` / `MPage*` / `MSpace` 与页面框架 |\n| [动效](/docs/motion) | 设计原则、时长、缓动、减弱与 API |\n| [反馈](/docs/design-feedback) | Message / Toast / Dialog / Alert 层级 |\n\n工程接入另见 [主题](/docs/theme)、[全局配置](/docs/config)、[约定](/docs/conventions)、[Common Props](/docs/common-props)。\n\n## 主题编辑器\n\n在线调色、密度与动效预览：[主题编辑器](/theme-editor)（独立交互路由）。编程侧用 `createTheme` / `useTheme`，见 [主题](/docs/theme)。\n",
|
|
32111
32111
|
"sections": [
|
|
32112
32112
|
{
|
|
32113
32113
|
"title": "",
|
|
32114
32114
|
"id": "overview",
|
|
32115
|
-
"body": "# 设计语言\n\nMorya UI 是一套**令牌驱动**的 Vue 3 组件库：颜色、间距、圆角、字号与动效统一走 `--m
|
|
32115
|
+
"body": "# 设计语言\n\nMorya UI 是一套**令牌驱动**的 Vue 3 组件库：颜色、间距、圆角、字号与动效统一走 `--m-*`，交互词表用语义 `type` / `variant` / `size`（Button 另有 `color`），全局行为由 `MConfigProvider`、`useTheme`、`useDensity`、`useMotion` 协同。\n\n本文是 Design Spec 总览。原则摘要来自仓库 [`design-kit/DESIGN.md`](https://github.com/morya-space/morya-ui/blob/main/design-kit/DESIGN.md)；完整变量目录见 [设计令牌](/docs/design-tokens)。"
|
|
32116
32116
|
},
|
|
32117
32117
|
{
|
|
32118
32118
|
"title": "原则",
|
|
@@ -32134,12 +32134,12 @@
|
|
|
32134
32134
|
"en-US": {
|
|
32135
32135
|
"title": "Design language",
|
|
32136
32136
|
"description": "Entry to Morya design principles and Design Spec chapters.",
|
|
32137
|
-
"markdown": "---\ntitle: Design language\norder: 4.5\ndescription: Entry to Morya design principles and Design Spec chapters.\n---\n\n# Design language\n\nMorya UI is a **token-driven** Vue 3 library: color, spacing, radius, type, and motion share `--m-*` variables; interaction vocabulary uses `
|
|
32137
|
+
"markdown": "---\ntitle: Design language\norder: 4.5\ndescription: Entry to Morya design principles and Design Spec chapters.\n---\n\n# Design language\n\nMorya UI is a **token-driven** Vue 3 library: color, spacing, radius, type, and motion share `--m-*` variables; interaction vocabulary uses semantic `type` / `variant` / `size` (Button also has `color`); global behavior is coordinated by `MConfigProvider`, `useTheme`, `useDensity`, and `useMotion`.\n\nThis page is the Design Spec hub. Principles come from [`design-kit/DESIGN.md`](https://github.com/morya-space/morya-ui/blob/main/design-kit/DESIGN.md); the full variable catalog is in [Design tokens](/docs/design-tokens).\n\n## Principles\n\n1. **Components first**: Prefer library `M*` controls over hand-rolled DOM equivalents.\n2. **Tokens first**: App styles consume `--m-*` only; no raw `#hex` / `rgb()` in product CSS (change brand at the theme entry).\n3. **Semantic consistency**: Primary actions use `type=\"primary\"`; destructive work uses `danger` / `color=\"danger\"` or a confirm flow.\n4. **Accessibility**: Controls need accessible names; icon-only buttons need `aria-label`; overlays dismiss via keyboard.\n5. **Single source of truth**: Trust component docs / MCP for APIs; do not invent props.\n\n## Chapters\n\n| Chapter | Focus |\n| ------------------------------------- | ------------------------------------------------------------- |\n| [Color](/docs/design-color) | Brand, semantic type, neutrals, contrast, overrides |\n| [Typography](/docs/design-typography) | Type ramp, weights, control fonts |\n| [Spacing](/docs/design-spacing) | `--m-space-*` rhythm and density scaling |\n| [Layout](/docs/design-layout) | `MLayout` / `MPage*` / `MSpace` and app chrome |\n| [Motion](/docs/motion) | Design principles, duration, easing, reduced motion, and APIs |\n| [Feedback](/docs/design-feedback) | Message / Toast / Dialog / Alert hierarchy |\n\nEngineering guides: [Theme](/docs/theme), [Configuration](/docs/config), [Conventions](/docs/conventions), [Common Props](/docs/common-props).\n\n## Theme editor\n\nLive accent, density, and motion preview: [Theme editor](/theme-editor) (interactive route). Programmatic APIs: `createTheme` / `useTheme` — see [Theme](/docs/theme).\n",
|
|
32138
32138
|
"sections": [
|
|
32139
32139
|
{
|
|
32140
32140
|
"title": "",
|
|
32141
32141
|
"id": "overview",
|
|
32142
|
-
"body": "# Design language\n\nMorya UI is a **token-driven** Vue 3 library: color, spacing, radius, type, and motion share `--m-*` variables; interaction vocabulary uses `
|
|
32142
|
+
"body": "# Design language\n\nMorya UI is a **token-driven** Vue 3 library: color, spacing, radius, type, and motion share `--m-*` variables; interaction vocabulary uses semantic `type` / `variant` / `size` (Button also has `color`); global behavior is coordinated by `MConfigProvider`, `useTheme`, `useDensity`, and `useMotion`.\n\nThis page is the Design Spec hub. Principles come from [`design-kit/DESIGN.md`](https://github.com/morya-space/morya-ui/blob/main/design-kit/DESIGN.md); the full variable catalog is in [Design tokens](/docs/design-tokens)."
|
|
32143
32143
|
},
|
|
32144
32144
|
{
|
|
32145
32145
|
"title": "Principles",
|
|
@@ -32149,7 +32149,7 @@
|
|
|
32149
32149
|
{
|
|
32150
32150
|
"title": "Chapters",
|
|
32151
32151
|
"id": "chapters",
|
|
32152
|
-
"body": "| Chapter | Focus |\n| ------------------------------------- | ------------------------------------------------------------- |\n| [Color](/docs/design-color) | Brand,
|
|
32152
|
+
"body": "| Chapter | Focus |\n| ------------------------------------- | ------------------------------------------------------------- |\n| [Color](/docs/design-color) | Brand, semantic type, neutrals, contrast, overrides |\n| [Typography](/docs/design-typography) | Type ramp, weights, control fonts |\n| [Spacing](/docs/design-spacing) | `--m-space-*` rhythm and density scaling |\n| [Layout](/docs/design-layout) | `MLayout` / `MPage*` / `MSpace` and app chrome |\n| [Motion](/docs/motion) | Design principles, duration, easing, reduced motion, and APIs |\n| [Feedback](/docs/design-feedback) | Message / Toast / Dialog / Alert hierarchy |\n\nEngineering guides: [Theme](/docs/theme), [Configuration](/docs/config), [Conventions](/docs/conventions), [Common Props](/docs/common-props)."
|
|
32153
32153
|
},
|
|
32154
32154
|
{
|
|
32155
32155
|
"title": "Theme editor",
|
|
@@ -32165,13 +32165,13 @@
|
|
|
32165
32165
|
"title": "色彩",
|
|
32166
32166
|
"titleEn": "Color",
|
|
32167
32167
|
"description": "品牌色、语义色、中性色与对比度约定。",
|
|
32168
|
-
"descriptionEn": "Brand,
|
|
32168
|
+
"descriptionEn": "Brand, semantic type, neutrals, and contrast conventions.",
|
|
32169
32169
|
"order": 4.51,
|
|
32170
32170
|
"locales": {
|
|
32171
32171
|
"zh-CN": {
|
|
32172
32172
|
"title": "色彩",
|
|
32173
32173
|
"description": "品牌色、语义色、中性色与对比度约定。",
|
|
32174
|
-
"markdown": "---\ntitle: 色彩\norder: 4.51\ndescription: 品牌色、语义色、中性色与对比度约定。\n---\n\n# 色彩\n\n组件只消费语义化 `--m-*` 颜色变量，不维护第二套业务色板。亮 / 暗色由 `document.documentElement` 的 `data-theme` 切换（`useTheme`）。\n\n## 原则\n\n- **换品牌改令牌**：在主题入口覆盖 `--m-color-primary`（及派生 hover / active / bg），页面仍写 `var(--m-*)`。\n-
|
|
32174
|
+
"markdown": "---\ntitle: 色彩\norder: 4.51\ndescription: 品牌色、语义色、中性色与对比度约定。\n---\n\n# 色彩\n\n组件只消费语义化 `--m-*` 颜色变量，不维护第二套业务色板。亮 / 暗色由 `document.documentElement` 的 `data-theme` 切换（`useTheme`）。\n\n## 原则\n\n- **换品牌改令牌**：在主题入口覆盖 `--m-color-primary`（及派生 hover / active / bg），页面仍写 `var(--m-*)`。\n- **语义先于色相**：Tag / Alert 等用语义 `type`，Button 用 `type` / `color` / `variant`，不要用裸色冒充状态。\n- **暗色必须可跟随**：业务 CSS 勿写死浅色专用 hex；依赖 `[data-theme=\"dark\"]` 覆盖。\n- **不只靠颜色传达**：错误 / 成功同时给文案或图标（见 [无障碍](/docs/accessibility)）。\n\n## 核心令牌\n\n| Token | 默认（亮色） | 用途 |\n| --- | --- | --- |\n| `--m-color-primary` | `#1677ff` | 品牌主色、链接、默认主按钮 |\n| `--m-color-primary-hover` | `#4096ff` | 主色悬浮 |\n| `--m-color-surface` | `#ffffff` | 容器 / 卡片底 |\n| `--m-color-text` | `rgba(0,0,0,0.88)` | 正文 |\n| `--m-color-text-muted` | `rgba(0,0,0,0.45)` | 次要说明 |\n| `--m-color-border` | `#d9d9d9` | 描边 |\n| `--m-color-split` | `#f0f0f0` | 弱分割（弱于 border） |\n| `--m-color-success` | `#52c41a` | 成功 |\n| `--m-color-info` | `#1677ff` | 信息 |\n| `--m-color-warning` / `--m-color-warn` | `#faad14` | 警告（`warn` 为别名） |\n| `--m-color-danger` | `#ff4d4f` | 危险 / 错误 |\n| `--m-color-help` | `#9333ea` | 帮助提示 |\n| `--m-color-on-emphasis` | `#ffffff` | 实心强调面上的前景 |\n| `--m-color-focus-ring` | 跟主色 | 聚焦相关 |\n| `--m-opacity-disabled` | `0.55` | 禁用透明度 |\n\n暗色示例：`--m-color-surface: #141414`，正文 `rgba(255,255,255,0.85)`。完整表见 [设计令牌](/docs/design-tokens)。\n\n## type 映射\n\n| 语义 `type` | 对应色 |\n| --- | --- |\n| （省略 / primary） | `--m-color-primary` |\n| `secondary` | 中性次要外观 |\n| `success` | `--m-color-success` |\n| `info` | `--m-color-info` |\n| `warning` | `--m-color-warning` |\n| `help` | `--m-color-help` |\n| `danger` | `--m-color-danger` |\n| `contrast` | `--m-color-contrast` 系 |\n\n破坏性操作：按钮 / 确认用 `danger` 或 `color=\"danger\"`，不要用主色冒充删除。\n\n## 覆盖方式\n\n```css\n:root {\n --m-color-primary: #0b6e4f;\n}\n[data-theme=\"dark\"] {\n --m-color-primary: #3ecf8e;\n}\n```\n\n也可用 `createTheme({ seed: { colorPrimary: '…' } })` 派生 hover / bg 等（见 [主题](/docs/theme)）。在线预览：[主题编辑器](/theme-editor)。\n\n## 建议与避免\n\n| 建议 | 避免 |\n| --- | --- |\n| 主操作默认 primary，次要用 `secondary` / `outlined` | 一屏多个同等实心主按钮 |\n| 错误态用 `danger` + 文案 | 只用红色边框表达错误 |\n| 弱分隔用 `--m-color-split` | 到处加粗边框抢层级 |\n| 聚焦用 `--m-focus-shadow` | 手写外扩 outline 与主题脱节 |\n\n下一章：[字体与排版](/docs/design-typography)。\n",
|
|
32175
32175
|
"sections": [
|
|
32176
32176
|
{
|
|
32177
32177
|
"title": "",
|
|
@@ -32181,7 +32181,7 @@
|
|
|
32181
32181
|
{
|
|
32182
32182
|
"title": "原则",
|
|
32183
32183
|
"id": "原则",
|
|
32184
|
-
"body": "- **换品牌改令牌**：在主题入口覆盖 `--m-color-primary`（及派生 hover / active / bg），页面仍写 `var(--m-*)`。\n-
|
|
32184
|
+
"body": "- **换品牌改令牌**：在主题入口覆盖 `--m-color-primary`（及派生 hover / active / bg），页面仍写 `var(--m-*)`。\n- **语义先于色相**：Tag / Alert 等用语义 `type`，Button 用 `type` / `color` / `variant`，不要用裸色冒充状态。\n- **暗色必须可跟随**：业务 CSS 勿写死浅色专用 hex；依赖 `[data-theme=\"dark\"]` 覆盖。\n- **不只靠颜色传达**：错误 / 成功同时给文案或图标（见 [无障碍](/docs/accessibility)）。"
|
|
32185
32185
|
},
|
|
32186
32186
|
{
|
|
32187
32187
|
"title": "核心令牌",
|
|
@@ -32189,9 +32189,9 @@
|
|
|
32189
32189
|
"body": "| Token | 默认（亮色） | 用途 |\n| --- | --- | --- |\n| `--m-color-primary` | `#1677ff` | 品牌主色、链接、默认主按钮 |\n| `--m-color-primary-hover` | `#4096ff` | 主色悬浮 |\n| `--m-color-surface` | `#ffffff` | 容器 / 卡片底 |\n| `--m-color-text` | `rgba(0,0,0,0.88)` | 正文 |\n| `--m-color-text-muted` | `rgba(0,0,0,0.45)` | 次要说明 |\n| `--m-color-border` | `#d9d9d9` | 描边 |\n| `--m-color-split` | `#f0f0f0` | 弱分割（弱于 border） |\n| `--m-color-success` | `#52c41a` | 成功 |\n| `--m-color-info` | `#1677ff` | 信息 |\n| `--m-color-warning` / `--m-color-warn` | `#faad14` | 警告（`warn` 为别名） |\n| `--m-color-danger` | `#ff4d4f` | 危险 / 错误 |\n| `--m-color-help` | `#9333ea` | 帮助提示 |\n| `--m-color-on-emphasis` | `#ffffff` | 实心强调面上的前景 |\n| `--m-color-focus-ring` | 跟主色 | 聚焦相关 |\n| `--m-opacity-disabled` | `0.55` | 禁用透明度 |\n\n暗色示例：`--m-color-surface: #141414`，正文 `rgba(255,255,255,0.85)`。完整表见 [设计令牌](/docs/design-tokens)。"
|
|
32190
32190
|
},
|
|
32191
32191
|
{
|
|
32192
|
-
"title": "
|
|
32193
|
-
"id": "
|
|
32194
|
-
"body": "| `
|
|
32192
|
+
"title": "type 映射",
|
|
32193
|
+
"id": "type-映射",
|
|
32194
|
+
"body": "| 语义 `type` | 对应色 |\n| --- | --- |\n| （省略 / primary） | `--m-color-primary` |\n| `secondary` | 中性次要外观 |\n| `success` | `--m-color-success` |\n| `info` | `--m-color-info` |\n| `warning` | `--m-color-warning` |\n| `help` | `--m-color-help` |\n| `danger` | `--m-color-danger` |\n| `contrast` | `--m-color-contrast` 系 |\n\n破坏性操作：按钮 / 确认用 `danger` 或 `color=\"danger\"`，不要用主色冒充删除。"
|
|
32195
32195
|
},
|
|
32196
32196
|
{
|
|
32197
32197
|
"title": "覆盖方式",
|
|
@@ -32207,8 +32207,8 @@
|
|
|
32207
32207
|
},
|
|
32208
32208
|
"en-US": {
|
|
32209
32209
|
"title": "Color",
|
|
32210
|
-
"description": "Brand,
|
|
32211
|
-
"markdown": "---\ntitle: Color\norder: 4.51\ndescription: Brand,
|
|
32210
|
+
"description": "Brand, semantic type, neutrals, and contrast conventions.",
|
|
32211
|
+
"markdown": "---\ntitle: Color\norder: 4.51\ndescription: Brand, semantic type, neutrals, and contrast conventions.\n---\n\n# Color\n\nComponents consume semantic `--m-*` color variables only—there is no second product palette. Light / dark follows `data-theme` on `document.documentElement` via `useTheme`.\n\n## Principles\n\n- **Brand at the theme entry**: Override `--m-color-primary` (and derived hover / active / bg); pages keep `var(--m-*)`.\n- **Semantics over hue**: Tags / alerts use semantic `type`; buttons use `type` / `color` / `variant`—do not fake status with raw colors.\n- **Dark must follow**: Avoid light-only hex in app CSS; rely on `[data-theme=\"dark\"]` overrides.\n- **Never color alone**: Pair error / success with copy or icons (see [Accessibility](/docs/accessibility)).\n\n## Core tokens\n\n| Token | Default (light) | Role |\n| --- | --- | --- |\n| `--m-color-primary` | `#1677ff` | Brand, links, default primary button |\n| `--m-color-primary-hover` | `#4096ff` | Primary hover |\n| `--m-color-surface` | `#ffffff` | Container / card surface |\n| `--m-color-text` | `rgba(0,0,0,0.88)` | Body text |\n| `--m-color-text-muted` | `rgba(0,0,0,0.45)` | Secondary copy |\n| `--m-color-border` | `#d9d9d9` | Borders |\n| `--m-color-split` | `#f0f0f0` | Weaker dividers |\n| `--m-color-success` | `#52c41a` | Success |\n| `--m-color-info` | `#1677ff` | Info |\n| `--m-color-warning` / `--m-color-warn` | `#faad14` | Warning (`warn` alias) |\n| `--m-color-danger` | `#ff4d4f` | Danger / error |\n| `--m-color-help` | `#9333ea` | Help accent |\n| `--m-color-on-emphasis` | `#ffffff` | Foreground on solid emphasis |\n| `--m-color-focus-ring` | Tracks primary | Focus-related |\n| `--m-opacity-disabled` | `0.55` | Disabled opacity |\n\nDark example: `--m-color-surface: #141414`, body `rgba(255,255,255,0.85)`. Full catalog: [Design tokens](/docs/design-tokens).\n\n## Type mapping\n\n| Semantic `type` | Maps to |\n| --- | --- |\n| (omit / primary) | `--m-color-primary` |\n| `secondary` | Neutral secondary treatment |\n| `success` | `--m-color-success` |\n| `info` | `--m-color-info` |\n| `warning` | `--m-color-warning` |\n| `help` | `--m-color-help` |\n| `danger` | `--m-color-danger` |\n| `contrast` | `--m-color-contrast` family |\n\nDestructive actions: use `danger` or `color=\"danger\"` on buttons / confirms—do not paint delete as primary.\n\n## Overrides\n\n```css\n:root {\n --m-color-primary: #0b6e4f;\n}\n[data-theme=\"dark\"] {\n --m-color-primary: #3ecf8e;\n}\n```\n\nOr derive with `createTheme({ seed: { colorPrimary: '…' } })` (see [Theme](/docs/theme)). Live preview: [Theme editor](/theme-editor).\n\n## Do / Don't\n\n| Do | Don't |\n| --- | --- |\n| One clear primary action; secondary via `secondary` / `outlined` | Several equally solid primary buttons |\n| Errors: `danger` + message | Red border alone for validation |\n| Weak rules with `--m-color-split` | Heavy borders everywhere |\n| Focus with `--m-focus-shadow` | Ad-hoc outline rings that ignore theme |\n\nNext: [Typography](/docs/design-typography).\n",
|
|
32212
32212
|
"sections": [
|
|
32213
32213
|
{
|
|
32214
32214
|
"title": "",
|
|
@@ -32218,7 +32218,7 @@
|
|
|
32218
32218
|
{
|
|
32219
32219
|
"title": "Principles",
|
|
32220
32220
|
"id": "principles",
|
|
32221
|
-
"body": "- **Brand at the theme entry**: Override `--m-color-primary` (and derived hover / active / bg); pages keep `var(--m-*)`.\n- **Semantics over hue**:
|
|
32221
|
+
"body": "- **Brand at the theme entry**: Override `--m-color-primary` (and derived hover / active / bg); pages keep `var(--m-*)`.\n- **Semantics over hue**: Tags / alerts use semantic `type`; buttons use `type` / `color` / `variant`—do not fake status with raw colors.\n- **Dark must follow**: Avoid light-only hex in app CSS; rely on `[data-theme=\"dark\"]` overrides.\n- **Never color alone**: Pair error / success with copy or icons (see [Accessibility](/docs/accessibility))."
|
|
32222
32222
|
},
|
|
32223
32223
|
{
|
|
32224
32224
|
"title": "Core tokens",
|
|
@@ -32226,9 +32226,9 @@
|
|
|
32226
32226
|
"body": "| Token | Default (light) | Role |\n| --- | --- | --- |\n| `--m-color-primary` | `#1677ff` | Brand, links, default primary button |\n| `--m-color-primary-hover` | `#4096ff` | Primary hover |\n| `--m-color-surface` | `#ffffff` | Container / card surface |\n| `--m-color-text` | `rgba(0,0,0,0.88)` | Body text |\n| `--m-color-text-muted` | `rgba(0,0,0,0.45)` | Secondary copy |\n| `--m-color-border` | `#d9d9d9` | Borders |\n| `--m-color-split` | `#f0f0f0` | Weaker dividers |\n| `--m-color-success` | `#52c41a` | Success |\n| `--m-color-info` | `#1677ff` | Info |\n| `--m-color-warning` / `--m-color-warn` | `#faad14` | Warning (`warn` alias) |\n| `--m-color-danger` | `#ff4d4f` | Danger / error |\n| `--m-color-help` | `#9333ea` | Help accent |\n| `--m-color-on-emphasis` | `#ffffff` | Foreground on solid emphasis |\n| `--m-color-focus-ring` | Tracks primary | Focus-related |\n| `--m-opacity-disabled` | `0.55` | Disabled opacity |\n\nDark example: `--m-color-surface: #141414`, body `rgba(255,255,255,0.85)`. Full catalog: [Design tokens](/docs/design-tokens)."
|
|
32227
32227
|
},
|
|
32228
32228
|
{
|
|
32229
|
-
"title": "
|
|
32230
|
-
"id": "
|
|
32231
|
-
"body": "| `
|
|
32229
|
+
"title": "Type mapping",
|
|
32230
|
+
"id": "type-mapping",
|
|
32231
|
+
"body": "| Semantic `type` | Maps to |\n| --- | --- |\n| (omit / primary) | `--m-color-primary` |\n| `secondary` | Neutral secondary treatment |\n| `success` | `--m-color-success` |\n| `info` | `--m-color-info` |\n| `warning` | `--m-color-warning` |\n| `help` | `--m-color-help` |\n| `danger` | `--m-color-danger` |\n| `contrast` | `--m-color-contrast` family |\n\nDestructive actions: use `danger` or `color=\"danger\"` on buttons / confirms—do not paint delete as primary."
|
|
32232
32232
|
},
|
|
32233
32233
|
{
|
|
32234
32234
|
"title": "Overrides",
|
|
@@ -32507,7 +32507,7 @@
|
|
|
32507
32507
|
"zh-CN": {
|
|
32508
32508
|
"title": "反馈",
|
|
32509
32509
|
"description": "Message、Toast、Dialog、Alert 等反馈层级与选型。",
|
|
32510
|
-
"markdown": "---\ntitle: 反馈\norder: 4.56\ndescription: Message、Toast、Dialog、Alert 等反馈层级与选型。\n---\n\n# 反馈\n\n反馈回答三件事：**发生了什么、要不要打断、用户下一步做什么**。Morya 用不同组件表达打断程度，而不是一律弹窗。\n\n## 层级（轻 → 重）\n\n| 打断度 | 组件 / API | 适用 |\n| ----------- | ------------------------------------------------- | ------------------------------------ |\n| 页面内常驻 | `MAlert` | 规则说明、部分失败摘要、可关闭提示条 |\n| 短暂结果 | `message` / `MMessage` | 保存成功、复制成功等一句话结果 |\n| 摘要 + 过程 | `toast` / `MToast` | 带详情、异步进度、可操作的短暂通知 |\n| 需抉择 | `MConfirmDialog` / `MConfirmPopup` / `useConfirm` | 删除、放弃编辑等确认 |\n| 任务流模态 | `MDialog` / `MDrawer` | 表单、详情、多步（非单纯确认） |\n| 阻塞等待 | `MLoading`（细环可用 `MProgressSpinner`） | 全页 / 区域加载 |\n| 可量化进度 | `MProgressBar` | 上传、长任务百分比 |\n| 空 / 结果页 | `MEmpty` / `MResult` | 无数据、404、提交成功落地 |\n\n选型摘要亦见 [约定](/docs/conventions)。\n\n## 原则\n\n- **能不打断就不打断**：成功保存优先 `message`，不要每次 `Dialog`。\n- **破坏性必须确认**：删除 / 清空用 `danger` + Confirm，文案说清后果。\n- **同源语义色**：成功 / 警告 /
|
|
32510
|
+
"markdown": "---\ntitle: 反馈\norder: 4.56\ndescription: Message、Toast、Dialog、Alert 等反馈层级与选型。\n---\n\n# 反馈\n\n反馈回答三件事：**发生了什么、要不要打断、用户下一步做什么**。Morya 用不同组件表达打断程度，而不是一律弹窗。\n\n## 层级（轻 → 重）\n\n| 打断度 | 组件 / API | 适用 |\n| ----------- | ------------------------------------------------- | ------------------------------------ |\n| 页面内常驻 | `MAlert` | 规则说明、部分失败摘要、可关闭提示条 |\n| 短暂结果 | `message` / `MMessage` | 保存成功、复制成功等一句话结果 |\n| 摘要 + 过程 | `toast` / `MToast` | 带详情、异步进度、可操作的短暂通知 |\n| 需抉择 | `MConfirmDialog` / `MConfirmPopup` / `useConfirm` | 删除、放弃编辑等确认 |\n| 任务流模态 | `MDialog` / `MDrawer` | 表单、详情、多步（非单纯确认） |\n| 阻塞等待 | `MLoading`（细环可用 `MProgressSpinner`） | 全页 / 区域加载 |\n| 可量化进度 | `MProgressBar` | 上传、长任务百分比 |\n| 空 / 结果页 | `MEmpty` / `MResult` | 无数据、404、提交成功落地 |\n\n选型摘要亦见 [约定](/docs/conventions)。\n\n## 原则\n\n- **能不打断就不打断**：成功保存优先 `message`，不要每次 `Dialog`。\n- **破坏性必须确认**：删除 / 清空用 `danger` + Confirm，文案说清后果。\n- **同源语义色**：成功 / 警告 / 危险与语义 `type` / Button `color=\"danger\"` 同一套令牌（见 [色彩](/docs/design-color)）。\n- **层叠有序**：Toast 高于下拉，Dialog 遮罩统一走 `--m-z-*` / Config `zIndex`。\n- **可关闭与焦点**：模态应支持 Esc；打开后焦点进入面板（见 [无障碍](/docs/accessibility)）。\n\n## Message vs Toast\n\n| | Message | Toast |\n| ------ | ---------- | ------------------------ |\n| 信息量 | 短句 | 标题 / 内容 / 操作更完整 |\n| 时长 | 较短 | 可较长，适合异步 |\n| 典型 | 「已保存」 | 「导出完成，点击下载」 |\n\n两者都是轻反馈；需要用户填表或阅读长文请改用 Dialog / Drawer。\n\n## 加载与空态\n\n| 场景 | 用法 |\n| ------------ | ------------------------------------------ |\n| 首屏结构已知 | `MSkeleton`，避免布局跳动 |\n| 未知时长阻塞 | `MLoading` |\n| 列表无行 | `MEmpty` + 明确次要操作（新建 / 清空筛选） |\n| 流程结束 | `MResult`（成功 / 失败）+ 返回入口 |\n\n动效强度影响 spinner / skeleton 循环——见 [动效](/docs/motion)。\n\n## 建议与避免\n\n| 建议 | 避免 |\n| ---------------------------------- | -------------------------------- |\n| 同一操作路径固定一种成功反馈 | 成功同时 Toast + Message + Alert |\n| Confirm 主按钮用 `danger` 表达破坏 | 用主色按钮标「删除」 |\n| 错误给出可执行下一步 | 只写「失败」无原因 |\n| 区域加载包住该区域 | 局部请求却全屏 Loading |\n\n返回总览：[设计语言](/docs/design)。工程配置见 [全局配置](/docs/config)。\n",
|
|
32511
32511
|
"sections": [
|
|
32512
32512
|
{
|
|
32513
32513
|
"title": "",
|
|
@@ -32522,7 +32522,7 @@
|
|
|
32522
32522
|
{
|
|
32523
32523
|
"title": "原则",
|
|
32524
32524
|
"id": "原则",
|
|
32525
|
-
"body": "- **能不打断就不打断**：成功保存优先 `message`，不要每次 `Dialog`。\n- **破坏性必须确认**：删除 / 清空用 `danger` + Confirm，文案说清后果。\n- **同源语义色**：成功 / 警告 /
|
|
32525
|
+
"body": "- **能不打断就不打断**：成功保存优先 `message`，不要每次 `Dialog`。\n- **破坏性必须确认**：删除 / 清空用 `danger` + Confirm，文案说清后果。\n- **同源语义色**：成功 / 警告 / 危险与语义 `type` / Button `color=\"danger\"` 同一套令牌（见 [色彩](/docs/design-color)）。\n- **层叠有序**：Toast 高于下拉，Dialog 遮罩统一走 `--m-z-*` / Config `zIndex`。\n- **可关闭与焦点**：模态应支持 Esc；打开后焦点进入面板（见 [无障碍](/docs/accessibility)）。"
|
|
32526
32526
|
},
|
|
32527
32527
|
{
|
|
32528
32528
|
"title": "Message vs Toast",
|
|
@@ -32544,7 +32544,7 @@
|
|
|
32544
32544
|
"en-US": {
|
|
32545
32545
|
"title": "Feedback",
|
|
32546
32546
|
"description": "Message, Toast, Dialog, Alert hierarchy and selection.",
|
|
32547
|
-
"markdown": "---\ntitle: Feedback\norder: 4.56\ndescription: Message, Toast, Dialog, Alert hierarchy and selection.\n---\n\n# Feedback\n\nFeedback answers three questions: **what happened, how interrupting it is, and what the user does next**. Morya expresses interruption with different components—not every event needs a modal.\n\n## Hierarchy (light → heavy)\n\n| Interruption | Component / API | Use when |\n| -------------------- | ------------------------------------------------- | --------------------------------------------- |\n| In-page persistent | `MAlert` | Rules, partial failures, dismissible banners |\n| Brief outcome | `message` / `MMessage` | Saved, copied, one-line results |\n| Summary + process | `toast` / `MToast` | Detail, async progress, actionable notices |\n| Decision required | `MConfirmDialog` / `MConfirmPopup` / `useConfirm` | Delete, discard edits |\n| Task modal | `MDialog` / `MDrawer` | Forms, detail, multi-step (not bare confirms) |\n| Blocking wait | `MLoading` (thin ring: `MProgressSpinner`) | Full-page / region loading |\n| Quantified progress | `MProgressBar` | Uploads, long jobs |\n| Empty / outcome page | `MEmpty` / `MResult` | No data, 404, success landings |\n\nAlso summarized in [Conventions](/docs/conventions).\n\n## Principles\n\n- **Prefer non-blocking success**: save → `message`, not a Dialog every time.\n- **Confirm destruction**: delete / clear with `danger` + Confirm and clear consequence copy.\n- **Shared
|
|
32547
|
+
"markdown": "---\ntitle: Feedback\norder: 4.56\ndescription: Message, Toast, Dialog, Alert hierarchy and selection.\n---\n\n# Feedback\n\nFeedback answers three questions: **what happened, how interrupting it is, and what the user does next**. Morya expresses interruption with different components—not every event needs a modal.\n\n## Hierarchy (light → heavy)\n\n| Interruption | Component / API | Use when |\n| -------------------- | ------------------------------------------------- | --------------------------------------------- |\n| In-page persistent | `MAlert` | Rules, partial failures, dismissible banners |\n| Brief outcome | `message` / `MMessage` | Saved, copied, one-line results |\n| Summary + process | `toast` / `MToast` | Detail, async progress, actionable notices |\n| Decision required | `MConfirmDialog` / `MConfirmPopup` / `useConfirm` | Delete, discard edits |\n| Task modal | `MDialog` / `MDrawer` | Forms, detail, multi-step (not bare confirms) |\n| Blocking wait | `MLoading` (thin ring: `MProgressSpinner`) | Full-page / region loading |\n| Quantified progress | `MProgressBar` | Uploads, long jobs |\n| Empty / outcome page | `MEmpty` / `MResult` | No data, 404, success landings |\n\nAlso summarized in [Conventions](/docs/conventions).\n\n## Principles\n\n- **Prefer non-blocking success**: save → `message`, not a Dialog every time.\n- **Confirm destruction**: delete / clear with `danger` + Confirm and clear consequence copy.\n- **Shared semantic colors**: success / warning / danger align with semantic `type` / Button `color=\"danger\"` ([Color](/docs/design-color)).\n- **Ordered stacking**: Toast above menus; Dialog scrims use `--m-z-*` / Config `zIndex`.\n- **Dismiss + focus**: modals support Esc; focus moves into the panel ([Accessibility](/docs/accessibility)).\n\n## Message vs Toast\n\n| | Message | Toast |\n| -------- | ---------- | ---------------------------- |\n| Payload | Short line | Richer title / body / action |\n| Duration | Shorter | Can linger for async work |\n| Typical | “Saved” | “Export ready—download” |\n\nBoth are light feedback; long reading or forms belong in Dialog / Drawer.\n\n## Loading and empty\n\n| Scenario | Pattern |\n| --------------------------- | ---------------------------------------- |\n| Known first-paint structure | `MSkeleton` to avoid layout jump |\n| Unknown blocking wait | `MLoading` |\n| Empty list | `MEmpty` + a clear secondary action |\n| Flow finished | `MResult` (success / error) + a way back |\n\nMotion intensity affects spinner / skeleton loops—see [Motion](/docs/motion).\n\n## Do / Don't\n\n| Do | Don't |\n| ------------------------------------------------ | -------------------------------------------- |\n| One success channel per action path | Toast + Message + Alert for the same success |\n| Confirm primary as `danger` for destructive acts | Primary-colored “Delete” |\n| Errors with a next step | “Failed” with no reason |\n| Scope loading to the region | Full-screen Loading for a local fetch |\n\nHub: [Design language](/docs/design). Engineering defaults: [Configuration](/docs/config).\n",
|
|
32548
32548
|
"sections": [
|
|
32549
32549
|
{
|
|
32550
32550
|
"title": "",
|
|
@@ -32559,7 +32559,7 @@
|
|
|
32559
32559
|
{
|
|
32560
32560
|
"title": "Principles",
|
|
32561
32561
|
"id": "principles",
|
|
32562
|
-
"body": "- **Prefer non-blocking success**: save → `message`, not a Dialog every time.\n- **Confirm destruction**: delete / clear with `danger` + Confirm and clear consequence copy.\n- **Shared
|
|
32562
|
+
"body": "- **Prefer non-blocking success**: save → `message`, not a Dialog every time.\n- **Confirm destruction**: delete / clear with `danger` + Confirm and clear consequence copy.\n- **Shared semantic colors**: success / warning / danger align with semantic `type` / Button `color=\"danger\"` ([Color](/docs/design-color)).\n- **Ordered stacking**: Toast above menus; Dialog scrims use `--m-z-*` / Config `zIndex`.\n- **Dismiss + focus**: modals support Esc; focus moves into the panel ([Accessibility](/docs/accessibility))."
|
|
32563
32563
|
},
|
|
32564
32564
|
{
|
|
32565
32565
|
"title": "Message vs Toast",
|
|
@@ -32873,7 +32873,7 @@
|
|
|
32873
32873
|
"zh-CN": {
|
|
32874
32874
|
"title": "Common Props",
|
|
32875
32875
|
"description": "跨组件公共 props、Semantic DOM 与 pt 约定。",
|
|
32876
|
-
"markdown": "---\ntitle: Common Props\norder: 7.5\ndescription: 跨组件公共 props、Semantic DOM 与 pt 约定。\n---\n\n# Common Props\n\n多数 Morya 组件共享同一套交互词表与样式落点，本页说明 morya 自己的命名与语义。细节交叉阅读：[约定](/docs/conventions)、[样式与 attrs](/docs/attrs)、[API 类型](/docs/types)、[设计令牌](/docs/design-tokens)。\n\n## 语义与外观\n\n| Prop | 含义 | 常见取值 |\n| -------------------- | ------------ | ------------------------------------------------------------------------------------------------------------- |\n| `
|
|
32876
|
+
"markdown": "---\ntitle: Common Props\norder: 7.5\ndescription: 跨组件公共 props、Semantic DOM 与 pt 约定。\n---\n\n# Common Props\n\n多数 Morya 组件共享同一套交互词表与样式落点，本页说明 morya 自己的命名与语义。细节交叉阅读：[约定](/docs/conventions)、[样式与 attrs](/docs/attrs)、[API 类型](/docs/types)、[设计令牌](/docs/design-tokens)。\n\n## 语义与外观\n\n| Prop | 含义 | 常见取值 |\n| -------------------- | ------------ | ------------------------------------------------------------------------------------------------------------- |\n| `type`（语义色） | 语义色调 | Badge / Tag / Status / Alert / Message / Toast 等：`primary` / `secondary` / `success` / `info` / `warning` / `danger` / `contrast`（Alert 子集为 `info` / `success` / `warning` / `danger`） |\n| `type` / `color` / `variant`（Button） | Button 外观 | Button 用 `type`（糖）+ `color` + `variant`（`solid` / `outlined` / `dashed` / `filled` / `text` / `link`）；默认 `color=default` + `variant=outlined`；主实心用 `type=\"primary\"` |\n| `size` | 控件尺寸 | `small` / `medium` / `large`（兼容 `sm` / `md` / `lg`）；未传常继承 Config |\n| `disabled` | 禁用 | 交互与点击关闭；视觉用 `--m-opacity-disabled` 等 |\n| `loading` | 加载中 | 常见于 Button；阻止重复提交 |\n| `fluid` / `block` | 通栏 | 多数字段用 `fluid`；Button / ButtonGroup 用 `block` |\n| `status` / `invalid` | 表单校验态 | 如 `error` / `warning`；配合 `error-message` |\n\n**语义组件**：`type` 管色调（如 `type=\"success\"`）。**Button**：同一个 `type` 名是外观糖，配合 `color` / `variant`（如 `type=\"primary\"`，或 `color=\"danger\"` + `variant=\"outlined\"`）；危险实心可用 `type=\"primary\" danger`。\n\n## 样式落点：class / style / 事件\n\n复合组件不是「根 = 原生控件」。attrs 三类落点：\n\n| 类型 | 例子 | `class` / `style` / 多数 attrs | 事件 `@xxx` |\n| ---------- | ---------------- | -------------------------------- | ----------------- |\n| 字段 | Input、Select | 外层 field 根 | 内层 input / 控件 |\n| Label 控件 | Checkbox、Switch | 可见 `<label>` | hidden `<input>` |\n| 容器 | Card、Tabs | 对外根（Dialog 的 class 在遮罩） | 同层 |\n| 叶子 | Button、Tag | 交互元素本身 | 同元素 |\n\n完整规则与演示：[样式与 attrs](/docs/attrs)。\n\n## Semantic DOM 与 `pt`\n\n**Semantic DOM**：文档里用稳定的结构名描述可定制节点（如 Button 的 root / icon / label），方便主题与测试定位。\n\n**`pt`（pass-through）**：按分段把 `class` / `style` / 原生属性合并到内层 DOM，键名即分段名。\n\n```vue\n<MInput\n label=\"API Key\"\n :pt=\"{\n root: { class: 'col-span-2' },\n input: { class: 'font-mono', autocomplete: 'off' },\n }\"\n/>\n```\n\n常见键：\n\n| 形态 | `pt` 键 |\n| ----------- | ------------------------------------------------------------------------- |\n| 字段 | `root`、`label`、`input` / `control`，部分有 `prefix` / `suffix` / `help` |\n| Checkbox 等 | `root`、`input` |\n| 单根容器 | `root` |\n| 复杂组件 | 额外键见该组件文档（如 Splitter 的 `gutter`） |\n\n类型：`PassThroughPart`、`FieldPassThrough`、`RootPassThrough` 等见 [API 类型](/docs/types)。同名 `class` / `style` 与已有绑定**合并**，非整段覆盖。\n\n叶子组件（如 `MButton`）通常直接把 `class` 绑在 `<button>` 上；`MButtonGroup` 等仍可用 `pt.root`。结构说明写在各组件 **Semantic DOM** 小节（示范：[Button](/components/Button)）。\n\n## 全局默认\n\n`MConfigProvider` / `createMoryaUI` 可下发默认 `size`、`density`、`inputVariant`、`appendTo`、`zIndex`、`locale`、`componentDefaults`、`motion` 等——见 [全局配置](/docs/config)。视觉层仍用 [主题](/docs/theme) 的 `useTheme` / 令牌覆盖。\n\n## 建议与避免\n\n| 建议 | 避免 |\n| ----------------------------------------------------- | ------------------------------------- |\n| 语义组件用 `type` 管色；Button 用 `type` / `color` / `variant` 管外观 | 在 Button 上继续写已移除的 `severity` / `fluid` / `outlined` 布尔；把 Button 外观糖和语义 `type` 混用 |\n| 布局 class 加在字段根 | 指望 `class` 自动落到内层 input |\n| 用 `pt` 改前缀 / 控件细节 | 为改一处 class 去 fork 组件 |\n| Semantic DOM 名称与 BEM（`.m-button__label`）对齐记忆 | 臆造未文档化的 `pt` 键 |\n",
|
|
32877
32877
|
"sections": [
|
|
32878
32878
|
{
|
|
32879
32879
|
"title": "",
|
|
@@ -32883,7 +32883,7 @@
|
|
|
32883
32883
|
{
|
|
32884
32884
|
"title": "语义与外观",
|
|
32885
32885
|
"id": "语义与外观",
|
|
32886
|
-
"body": "| Prop | 含义 | 常见取值 |\n| -------------------- | ------------ | ------------------------------------------------------------------------------------------------------------- |\n| `
|
|
32886
|
+
"body": "| Prop | 含义 | 常见取值 |\n| -------------------- | ------------ | ------------------------------------------------------------------------------------------------------------- |\n| `type`（语义色） | 语义色调 | Badge / Tag / Status / Alert / Message / Toast 等：`primary` / `secondary` / `success` / `info` / `warning` / `danger` / `contrast`（Alert 子集为 `info` / `success` / `warning` / `danger`） |\n| `type` / `color` / `variant`（Button） | Button 外观 | Button 用 `type`（糖）+ `color` + `variant`（`solid` / `outlined` / `dashed` / `filled` / `text` / `link`）；默认 `color=default` + `variant=outlined`；主实心用 `type=\"primary\"` |\n| `size` | 控件尺寸 | `small` / `medium` / `large`（兼容 `sm` / `md` / `lg`）；未传常继承 Config |\n| `disabled` | 禁用 | 交互与点击关闭；视觉用 `--m-opacity-disabled` 等 |\n| `loading` | 加载中 | 常见于 Button；阻止重复提交 |\n| `fluid` / `block` | 通栏 | 多数字段用 `fluid`；Button / ButtonGroup 用 `block` |\n| `status` / `invalid` | 表单校验态 | 如 `error` / `warning`；配合 `error-message` |\n\n**语义组件**：`type` 管色调（如 `type=\"success\"`）。**Button**：同一个 `type` 名是外观糖，配合 `color` / `variant`（如 `type=\"primary\"`，或 `color=\"danger\"` + `variant=\"outlined\"`）；危险实心可用 `type=\"primary\" danger`。"
|
|
32887
32887
|
},
|
|
32888
32888
|
{
|
|
32889
32889
|
"title": "样式落点：class / style / 事件",
|
|
@@ -32903,14 +32903,14 @@
|
|
|
32903
32903
|
{
|
|
32904
32904
|
"title": "建议与避免",
|
|
32905
32905
|
"id": "建议与避免",
|
|
32906
|
-
"body": "| 建议 | 避免 |\n| ----------------------------------------------------- | ------------------------------------- |\n|
|
|
32906
|
+
"body": "| 建议 | 避免 |\n| ----------------------------------------------------- | ------------------------------------- |\n| 语义组件用 `type` 管色；Button 用 `type` / `color` / `variant` 管外观 | 在 Button 上继续写已移除的 `severity` / `fluid` / `outlined` 布尔；把 Button 外观糖和语义 `type` 混用 |\n| 布局 class 加在字段根 | 指望 `class` 自动落到内层 input |\n| 用 `pt` 改前缀 / 控件细节 | 为改一处 class 去 fork 组件 |\n| Semantic DOM 名称与 BEM（`.m-button__label`）对齐记忆 | 臆造未文档化的 `pt` 键 |"
|
|
32907
32907
|
}
|
|
32908
32908
|
]
|
|
32909
32909
|
},
|
|
32910
32910
|
"en-US": {
|
|
32911
32911
|
"title": "Common Props",
|
|
32912
32912
|
"description": "Shared props, Semantic DOM, and pt conventions across components.",
|
|
32913
|
-
"markdown": "---\ntitle: Common Props\norder: 7.5\ndescription: Shared props, Semantic DOM, and pt conventions across components.\n---\n\n# Common Props\n\nMost Morya components share one interaction vocabulary and style targeting model. This page documents morya's own names and semantics. Cross-links: [Conventions](/docs/conventions), [Attrs](/docs/attrs), [API types](/docs/types), [Design tokens](/docs/design-tokens).\n\n## Semantics and appearance\n\n| Prop | Meaning | Common values |\n| -------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------ |\n| `
|
|
32913
|
+
"markdown": "---\ntitle: Common Props\norder: 7.5\ndescription: Shared props, Semantic DOM, and pt conventions across components.\n---\n\n# Common Props\n\nMost Morya components share one interaction vocabulary and style targeting model. This page documents morya's own names and semantics. Cross-links: [Conventions](/docs/conventions), [Attrs](/docs/attrs), [API types](/docs/types), [Design tokens](/docs/design-tokens).\n\n## Semantics and appearance\n\n| Prop | Meaning | Common values |\n| -------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------ |\n| `type` (semantic) | Semantic tone | Badge / Tag / Status / Alert / Message / Toast: `primary` / `secondary` / `success` / `info` / `warning` / `danger` / `contrast` (Alert subset: `info` / `success` / `warning` / `danger`) |\n| `type` / `color` / `variant` (Button) | Button appearance | Button uses `type` (sugar) + `color` + `variant` (`solid` / `outlined` / `dashed` / `filled` / `text` / `link`); default is `color=default` + `variant=outlined`; solid primary needs `type=\"primary\"` |\n| `size` | Control size | `small` / `medium` / `large` (`sm` / `md` / `lg` aliases); often inherits Config when omitted |\n| `disabled` | Disabled | Blocks interaction; visuals use `--m-opacity-disabled` and related tokens |\n| `loading` | Busy | Common on Button; prevents double submit |\n| `fluid` / `block` | Full width | Most fields use `fluid`; Button / ButtonGroup use `block` |\n| `status` / `invalid` | Form validation | e.g. `error` / `warning`; pair with `error-message` |\n\n**Semantic components**: `type` sets tone (e.g. `type=\"success\"`). **Button**: the same prop name is appearance sugar with `color` / `variant` (e.g. `type=\"primary\"`, or `color=\"danger\"` + `variant=\"outlined\"`); solid danger can be `type=\"primary\" danger`.\n\n## Where class / style / events land\n\nComposite components are not “root = native control”. Three targeting patterns:\n\n| Kind | Examples | `class` / `style` / most attrs | Events `@xxx` |\n| ------------- | ---------------- | ------------------------------------- | --------------------- |\n| Field | Input, Select | Outer field root | Inner input / control |\n| Label control | Checkbox, Switch | Visible `<label>` | Hidden `<input>` |\n| Container | Card, Tabs | Public root (Dialog `class` on scrim) | Same layer |\n| Leaf | Button, Tag | Interactive element itself | Same element |\n\nFull rules and demos: [Attrs](/docs/attrs).\n\n## Semantic DOM and `pt`\n\n**Semantic DOM**: stable structural names in docs for customizable nodes (e.g. Button root / icon / label)—handy for theming and tests.\n\n**`pt` (pass-through)**: merge `class` / `style` / native attrs onto inner DOM by segment key.\n\n```vue\n<MInput\n label=\"API Key\"\n :pt=\"{\n root: { class: 'col-span-2' },\n input: { class: 'font-mono', autocomplete: 'off' },\n }\"\n/>\n```\n\nCommon keys:\n\n| Shape | `pt` keys |\n| --------------------- | ---------------------------------------------------------------------------- |\n| Field | `root`, `label`, `input` / `control`; sometimes `prefix` / `suffix` / `help` |\n| Checkbox-like | `root`, `input` |\n| Single-root container | `root` |\n| Complex | Extra keys in that component’s docs (e.g. Splitter `gutter`) |\n\nTypes: `PassThroughPart`, `FieldPassThrough`, `RootPassThrough`, … in [API types](/docs/types). Same-named `class` / `style` **merge** with existing bindings rather than replace wholesale.\n\nLeaf components such as `MButton` bind `class` on the `<button>` directly; groups like `MButtonGroup` still accept `pt.root`. Structure notes live under each component’s **Semantic DOM** section (example: [Button](/components/Button)).\n\n## Global defaults\n\n`MConfigProvider` / `createMoryaUI` can supply default `size`, `density`, `inputVariant`, `appendTo`, `zIndex`, `locale`, `componentDefaults`, `motion`, and more — see [Configuration](/docs/config). Visual layer remains [Theme](/docs/theme) via `useTheme` / token overrides.\n\n## Do / Don't\n\n| Do | Don't |\n| ------------------------------------------------------ | ---------------------------------------------------------- |\n| Use semantic `type` for tone; Button `type` / `color` / `variant` for appearance | Keep removed Button props (`severity` / `fluid` / boolean `outlined`); mix Button sugar `type` with semantic tone `type` blindly |\n| Put layout `class` on the field root | Expect `class` to fall through onto the inner input |\n| Use `pt` for prefix / inner tweaks | Fork a component to change one class |\n| Align Semantic DOM names with BEM (`.m-button__label`) | Invent undocumented `pt` keys |\n",
|
|
32914
32914
|
"sections": [
|
|
32915
32915
|
{
|
|
32916
32916
|
"title": "",
|
|
@@ -32920,7 +32920,7 @@
|
|
|
32920
32920
|
{
|
|
32921
32921
|
"title": "Semantics and appearance",
|
|
32922
32922
|
"id": "semantics-and-appearance",
|
|
32923
|
-
"body": "| Prop | Meaning | Common values |\n| -------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------ |\n| `
|
|
32923
|
+
"body": "| Prop | Meaning | Common values |\n| -------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------ |\n| `type` (semantic) | Semantic tone | Badge / Tag / Status / Alert / Message / Toast: `primary` / `secondary` / `success` / `info` / `warning` / `danger` / `contrast` (Alert subset: `info` / `success` / `warning` / `danger`) |\n| `type` / `color` / `variant` (Button) | Button appearance | Button uses `type` (sugar) + `color` + `variant` (`solid` / `outlined` / `dashed` / `filled` / `text` / `link`); default is `color=default` + `variant=outlined`; solid primary needs `type=\"primary\"` |\n| `size` | Control size | `small` / `medium` / `large` (`sm` / `md` / `lg` aliases); often inherits Config when omitted |\n| `disabled` | Disabled | Blocks interaction; visuals use `--m-opacity-disabled` and related tokens |\n| `loading` | Busy | Common on Button; prevents double submit |\n| `fluid` / `block` | Full width | Most fields use `fluid`; Button / ButtonGroup use `block` |\n| `status` / `invalid` | Form validation | e.g. `error` / `warning`; pair with `error-message` |\n\n**Semantic components**: `type` sets tone (e.g. `type=\"success\"`). **Button**: the same prop name is appearance sugar with `color` / `variant` (e.g. `type=\"primary\"`, or `color=\"danger\"` + `variant=\"outlined\"`); solid danger can be `type=\"primary\" danger`."
|
|
32924
32924
|
},
|
|
32925
32925
|
{
|
|
32926
32926
|
"title": "Where class / style / events land",
|
|
@@ -32940,7 +32940,7 @@
|
|
|
32940
32940
|
{
|
|
32941
32941
|
"title": "Do / Don't",
|
|
32942
32942
|
"id": "do-don-t",
|
|
32943
|
-
"body": "| Do | Don't |\n| ------------------------------------------------------ | ---------------------------------------------------------- |\n| Use `
|
|
32943
|
+
"body": "| Do | Don't |\n| ------------------------------------------------------ | ---------------------------------------------------------- |\n| Use semantic `type` for tone; Button `type` / `color` / `variant` for appearance | Keep removed Button props (`severity` / `fluid` / boolean `outlined`); mix Button sugar `type` with semantic tone `type` blindly |\n| Put layout `class` on the field root | Expect `class` to fall through onto the inner input |\n| Use `pt` for prefix / inner tweaks | Fork a component to change one class |\n| Align Semantic DOM names with BEM (`.m-button__label`) | Invent undocumented `pt` keys |"
|
|
32944
32944
|
}
|
|
32945
32945
|
]
|
|
32946
32946
|
}
|
|
@@ -32957,24 +32957,24 @@
|
|
|
32957
32957
|
"zh-CN": {
|
|
32958
32958
|
"title": "API 类型",
|
|
32959
32959
|
"description": "文档 Props 里常见类型名的结构与含义。",
|
|
32960
|
-
"markdown": "---\ntitle: API 类型\norder: 8\ndescription: 文档 Props 里常见类型名的结构与含义。\n---\n\n# API 类型\n\n组件文档 Props 表里出现的类型名，在这里查具体结构。包入口也导出同名类型，可在业务代码里 `import type { … } from 'morya-ui'`（以各组件 `types.ts` 为准）。\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\n单个 DOM 节点上要合并的属性 bag。`pt.<part>` 的值就是这个类型。\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\n常用键：`class`、`style`、`data-*`、`onClick` / `onKeydown`（Vue 事件监听写法）、以及该节点合法的原生 HTML 属性。\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\n单根容器（Card、Dialog 遮罩、Tabs 等）：\n\n```ts\ninterface RootPassThrough {\n root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch（可见根是 `<label>`，hidden input 单独一段）：\n\n```ts\ninterface ControlPassThrough {\n root?: PassThroughPart // 一般是 label\n input?: PassThroughPart // 原生 input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\n表单字段（Input、Select、DatePicker 等）：\n\n```ts\ninterface FieldPassThrough {\n root?: PassThroughPart // 外层 .m-*-field\n label?: PassThroughPart\n control?: PassThroughPart // 触发器 / 组合控件（Select 等）\n input?: PassThroughPart // 原生 input / textarea\n}\n```\n\n具体组件支持哪些键，见该组件文档的 **类型** 或 **pt** 小节。\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) 在 `FieldPassThrough` 基础上多了前后缀等：\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) 在 `RootPassThrough` 上增加分隔条与面板：\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n gutter?: PassThroughPart\n panel1?: PassThroughPart\n panel2?: PassThroughPart\n}\n```\n\n分隔条外观也可用 `resizeTriggerClass` / `resizeTriggerStyle`，内容用 `#resize-trigger`（别名 `#gutter`）。\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\n控件尺寸，多数表单 / 按钮组件的 `size` prop：\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` 为兼容别名；未传时通常继承 [ConfigProvider](/docs/config) 的 `size`。\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n输入框视觉变体：\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\n按钮类型糖（[`Button`](/components/Button)）：\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\n按钮颜色轴（Button、ConfirmDialog `acceptColor`、Dialog `positiveColor` 等）：\n\n```ts\ntype ButtonColor =\n | 'default'\n | 'primary'\n | 'danger'\n | 'success'\n | 'info'\n | 'warning'\n | 'help'\n | 'contrast'\n | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\n按钮变体轴：\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\n浮层 Teleport 挂载目标（Dialog、Select 菜单、Toast 等）：\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'`（默认）：挂到 document.body \n- `'self'`：不 Teleport，就地渲染 \n- 也常见 `appendTo: false`（运行时兼容，同 `'self'`）\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\n关闭 / 确认前的拦截函数。返回 `false`（含 Promise 解析为 `false`）则**不继续**：\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n ...args: T\n) => unknown | Promise<unknown>\n```\n\n用于 Dialog `beforeClose`、`onPositiveClick`，ConfirmDialog / ConfirmPopup 的 `beforeAccept` 等。\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) 选项项：\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) 选项分组（混入 `options` 渲染分组标题行）：\n\n```ts\ninterface SelectOptionGroup {\n label: string\n items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\n单选为标量；`multiple` 时为数组。\n\n<h3 id=\"IconName\">IconName</h3>\n\n[`MIcon`](/components/Icon) / [`Button`](/components/Button) 的 `icon` / `name` 使用的注册名，例如 `'search'`、`'chevron-down'`。完整列表见 Icon 文档注册表。\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nMenu / Dropdown / ContextMenu 等导航项的公共字段：\n\n```ts\ninterface MenuNodeBase {\n key?: string\n label?: string\n value?: string\n icon?: string\n disabled?: boolean\n separator?: boolean\n shortcut?: string\n command?: () => void\n items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"
|
|
32960
|
+
"markdown": "---\ntitle: API 类型\norder: 8\ndescription: 文档 Props 里常见类型名的结构与含义。\n---\n\n# API 类型\n\n组件文档 Props 表里出现的类型名，在这里查具体结构。包入口也导出同名类型，可在业务代码里 `import type { … } from 'morya-ui'`（以各组件 `types.ts` 为准）。\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\n单个 DOM 节点上要合并的属性 bag。`pt.<part>` 的值就是这个类型。\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\n常用键：`class`、`style`、`data-*`、`onClick` / `onKeydown`（Vue 事件监听写法）、以及该节点合法的原生 HTML 属性。\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\n单根容器（Card、Dialog 遮罩、Tabs 等）：\n\n```ts\ninterface RootPassThrough {\n root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch（可见根是 `<label>`，hidden input 单独一段）：\n\n```ts\ninterface ControlPassThrough {\n root?: PassThroughPart // 一般是 label\n input?: PassThroughPart // 原生 input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\n表单字段（Input、Select、DatePicker 等）：\n\n```ts\ninterface FieldPassThrough {\n root?: PassThroughPart // 外层 .m-*-field\n label?: PassThroughPart\n control?: PassThroughPart // 触发器 / 组合控件（Select 等）\n input?: PassThroughPart // 原生 input / textarea\n}\n```\n\n具体组件支持哪些键，见该组件文档的 **类型** 或 **pt** 小节。\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) 在 `FieldPassThrough` 基础上多了前后缀等：\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) 在 `RootPassThrough` 上增加分隔条与面板：\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n gutter?: PassThroughPart\n panel1?: PassThroughPart\n panel2?: PassThroughPart\n}\n```\n\n分隔条外观也可用 `resizeTriggerClass` / `resizeTriggerStyle`，内容用 `#resize-trigger`（别名 `#gutter`）。\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\n控件尺寸，多数表单 / 按钮组件的 `size` prop：\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` 为兼容别名；未传时通常继承 [ConfigProvider](/docs/config) 的 `size`。\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n输入框视觉变体：\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\n按钮类型糖（[`Button`](/components/Button)）：\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\n按钮颜色轴（Button、ConfirmDialog `acceptColor`、Dialog `positiveColor` 等）：\n\n```ts\ntype ButtonColor =\n | 'default'\n | 'primary'\n | 'danger'\n | 'success'\n | 'info'\n | 'warning'\n | 'help'\n | 'contrast'\n | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\n按钮变体轴：\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\n浮层 Teleport 挂载目标（Dialog、Select 菜单、Toast 等）：\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'`（默认）：挂到 document.body \n- `'self'`：不 Teleport，就地渲染 \n- 也常见 `appendTo: false`（运行时兼容，同 `'self'`）\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\n关闭 / 确认前的拦截函数。返回 `false`（含 Promise 解析为 `false`）则**不继续**：\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n ...args: T\n) => unknown | Promise<unknown>\n```\n\n用于 Dialog `beforeClose`、`onPositiveClick`，ConfirmDialog / ConfirmPopup 的 `beforeAccept` 等。\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) 选项项：\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) 选项分组（混入 `options` 渲染分组标题行）：\n\n```ts\ninterface SelectOptionGroup {\n label: string\n items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\n单选为标量；`multiple` 时为数组。\n\n<h3 id=\"IconName\">IconName</h3>\n\n[`MIcon`](/components/Icon) / [`Button`](/components/Button) 的 `icon` / `name` 使用的注册名，例如 `'search'`、`'chevron-down'`。完整列表见 Icon 文档注册表。\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nMenu / Dropdown / ContextMenu 等导航项的公共字段：\n\n```ts\ninterface MenuNodeBase {\n key?: string\n label?: string\n value?: string\n icon?: string\n disabled?: boolean\n separator?: boolean\n shortcut?: string\n command?: () => void\n items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MToneType\">MToneType</h3>\n\n显示 / 反馈组件的语义色基集：\n\n```ts\ntype MToneType =\n | 'secondary'\n | 'success'\n | 'info'\n | 'warning'\n | 'help'\n | 'danger'\n | 'contrast'\n```\n\n<h3 id=\"MTagType\">MTagType</h3>\n\nTag / Badge / Chip / Status：`MToneType` 加上品牌色 `primary`。\n\n```ts\ntype MTagType = MToneType | 'primary'\n```\n\n<h3 id=\"MToastType\">MToastType</h3>\n\nMessage / Toast / Timeline 的语义色：\n\n```ts\ntype MToastType =\n | 'success'\n | 'info'\n | 'warning'\n | 'danger'\n | 'secondary'\n | 'contrast'\n```\n\n---\n\n更细的组件专属类型（如 `TableServerOptions`、`MenuItem`）写在对应组件页 **类型** 小节；这里只列跨组件复用的名字。\n",
|
|
32961
32961
|
"sections": [
|
|
32962
32962
|
{
|
|
32963
32963
|
"title": "",
|
|
32964
32964
|
"id": "overview",
|
|
32965
|
-
"body": "# API 类型\n\n组件文档 Props 表里出现的类型名，在这里查具体结构。包入口也导出同名类型，可在业务代码里 `import type { … } from 'morya-ui'`（以各组件 `types.ts` 为准）。\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\n单个 DOM 节点上要合并的属性 bag。`pt.<part>` 的值就是这个类型。\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\n常用键：`class`、`style`、`data-*`、`onClick` / `onKeydown`（Vue 事件监听写法）、以及该节点合法的原生 HTML 属性。\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\n单根容器（Card、Dialog 遮罩、Tabs 等）：\n\n```ts\ninterface RootPassThrough {\n root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch（可见根是 `<label>`，hidden input 单独一段）：\n\n```ts\ninterface ControlPassThrough {\n root?: PassThroughPart // 一般是 label\n input?: PassThroughPart // 原生 input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\n表单字段（Input、Select、DatePicker 等）：\n\n```ts\ninterface FieldPassThrough {\n root?: PassThroughPart // 外层 .m-*-field\n label?: PassThroughPart\n control?: PassThroughPart // 触发器 / 组合控件（Select 等）\n input?: PassThroughPart // 原生 input / textarea\n}\n```\n\n具体组件支持哪些键，见该组件文档的 **类型** 或 **pt** 小节。\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) 在 `FieldPassThrough` 基础上多了前后缀等：\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) 在 `RootPassThrough` 上增加分隔条与面板：\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n gutter?: PassThroughPart\n panel1?: PassThroughPart\n panel2?: PassThroughPart\n}\n```\n\n分隔条外观也可用 `resizeTriggerClass` / `resizeTriggerStyle`，内容用 `#resize-trigger`（别名 `#gutter`）。\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\n控件尺寸，多数表单 / 按钮组件的 `size` prop：\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` 为兼容别名；未传时通常继承 [ConfigProvider](/docs/config) 的 `size`。\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n输入框视觉变体：\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\n按钮类型糖（[`Button`](/components/Button)）：\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\n按钮颜色轴（Button、ConfirmDialog `acceptColor`、Dialog `positiveColor` 等）：\n\n```ts\ntype ButtonColor =\n | 'default'\n | 'primary'\n | 'danger'\n | 'success'\n | 'info'\n | 'warning'\n | 'help'\n | 'contrast'\n | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\n按钮变体轴：\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\n浮层 Teleport 挂载目标（Dialog、Select 菜单、Toast 等）：\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'`（默认）：挂到 document.body \n- `'self'`：不 Teleport，就地渲染 \n- 也常见 `appendTo: false`（运行时兼容，同 `'self'`）\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\n关闭 / 确认前的拦截函数。返回 `false`（含 Promise 解析为 `false`）则**不继续**：\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n ...args: T\n) => unknown | Promise<unknown>\n```\n\n用于 Dialog `beforeClose`、`onPositiveClick`，ConfirmDialog / ConfirmPopup 的 `beforeAccept` 等。\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) 选项项：\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) 选项分组（混入 `options` 渲染分组标题行）：\n\n```ts\ninterface SelectOptionGroup {\n label: string\n items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\n单选为标量；`multiple` 时为数组。\n\n<h3 id=\"IconName\">IconName</h3>\n\n[`MIcon`](/components/Icon) / [`Button`](/components/Button) 的 `icon` / `name` 使用的注册名，例如 `'search'`、`'chevron-down'`。完整列表见 Icon 文档注册表。\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nMenu / Dropdown / ContextMenu 等导航项的公共字段：\n\n```ts\ninterface MenuNodeBase {\n key?: string\n label?: string\n value?: string\n icon?: string\n disabled?: boolean\n separator?: boolean\n shortcut?: string\n command?: () => void\n items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"
|
|
32965
|
+
"body": "# API 类型\n\n组件文档 Props 表里出现的类型名，在这里查具体结构。包入口也导出同名类型，可在业务代码里 `import type { … } from 'morya-ui'`（以各组件 `types.ts` 为准）。\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\n单个 DOM 节点上要合并的属性 bag。`pt.<part>` 的值就是这个类型。\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\n常用键：`class`、`style`、`data-*`、`onClick` / `onKeydown`（Vue 事件监听写法）、以及该节点合法的原生 HTML 属性。\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\n单根容器（Card、Dialog 遮罩、Tabs 等）：\n\n```ts\ninterface RootPassThrough {\n root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch（可见根是 `<label>`，hidden input 单独一段）：\n\n```ts\ninterface ControlPassThrough {\n root?: PassThroughPart // 一般是 label\n input?: PassThroughPart // 原生 input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\n表单字段（Input、Select、DatePicker 等）：\n\n```ts\ninterface FieldPassThrough {\n root?: PassThroughPart // 外层 .m-*-field\n label?: PassThroughPart\n control?: PassThroughPart // 触发器 / 组合控件（Select 等）\n input?: PassThroughPart // 原生 input / textarea\n}\n```\n\n具体组件支持哪些键，见该组件文档的 **类型** 或 **pt** 小节。\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) 在 `FieldPassThrough` 基础上多了前后缀等：\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) 在 `RootPassThrough` 上增加分隔条与面板：\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n gutter?: PassThroughPart\n panel1?: PassThroughPart\n panel2?: PassThroughPart\n}\n```\n\n分隔条外观也可用 `resizeTriggerClass` / `resizeTriggerStyle`，内容用 `#resize-trigger`（别名 `#gutter`）。\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\n控件尺寸，多数表单 / 按钮组件的 `size` prop：\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` 为兼容别名；未传时通常继承 [ConfigProvider](/docs/config) 的 `size`。\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n输入框视觉变体：\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\n按钮类型糖（[`Button`](/components/Button)）：\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\n按钮颜色轴（Button、ConfirmDialog `acceptColor`、Dialog `positiveColor` 等）：\n\n```ts\ntype ButtonColor =\n | 'default'\n | 'primary'\n | 'danger'\n | 'success'\n | 'info'\n | 'warning'\n | 'help'\n | 'contrast'\n | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\n按钮变体轴：\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\n浮层 Teleport 挂载目标（Dialog、Select 菜单、Toast 等）：\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'`（默认）：挂到 document.body \n- `'self'`：不 Teleport，就地渲染 \n- 也常见 `appendTo: false`（运行时兼容，同 `'self'`）\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\n关闭 / 确认前的拦截函数。返回 `false`（含 Promise 解析为 `false`）则**不继续**：\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n ...args: T\n) => unknown | Promise<unknown>\n```\n\n用于 Dialog `beforeClose`、`onPositiveClick`，ConfirmDialog / ConfirmPopup 的 `beforeAccept` 等。\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) 选项项：\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) 选项分组（混入 `options` 渲染分组标题行）：\n\n```ts\ninterface SelectOptionGroup {\n label: string\n items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\n单选为标量；`multiple` 时为数组。\n\n<h3 id=\"IconName\">IconName</h3>\n\n[`MIcon`](/components/Icon) / [`Button`](/components/Button) 的 `icon` / `name` 使用的注册名，例如 `'search'`、`'chevron-down'`。完整列表见 Icon 文档注册表。\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nMenu / Dropdown / ContextMenu 等导航项的公共字段：\n\n```ts\ninterface MenuNodeBase {\n key?: string\n label?: string\n value?: string\n icon?: string\n disabled?: boolean\n separator?: boolean\n shortcut?: string\n command?: () => void\n items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MToneType\">MToneType</h3>\n\n显示 / 反馈组件的语义色基集：\n\n```ts\ntype MToneType =\n | 'secondary'\n | 'success'\n | 'info'\n | 'warning'\n | 'help'\n | 'danger'\n | 'contrast'\n```\n\n<h3 id=\"MTagType\">MTagType</h3>\n\nTag / Badge / Chip / Status：`MToneType` 加上品牌色 `primary`。\n\n```ts\ntype MTagType = MToneType | 'primary'\n```\n\n<h3 id=\"MToastType\">MToastType</h3>\n\nMessage / Toast / Timeline 的语义色：\n\n```ts\ntype MToastType =\n | 'success'\n | 'info'\n | 'warning'\n | 'danger'\n | 'secondary'\n | 'contrast'\n```\n\n---\n\n更细的组件专属类型（如 `TableServerOptions`、`MenuItem`）写在对应组件页 **类型** 小节；这里只列跨组件复用的名字。"
|
|
32966
32966
|
}
|
|
32967
32967
|
]
|
|
32968
32968
|
},
|
|
32969
32969
|
"en-US": {
|
|
32970
32970
|
"title": "API types",
|
|
32971
32971
|
"description": "Shapes behind type names in component Props tables.",
|
|
32972
|
-
"markdown": "---\ntitle: API types\norder: 8\ndescription: Shapes behind type names in component Props tables.\n---\n\n# API types\n\nLook up structures for names that appear in Props tables. The package re-exports the same names as TypeScript types (`import type { … } from 'morya-ui'`), per component `types.ts`.\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\nAttribute bag merged onto one DOM node—the value of `pt.<part>`.\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\nCommon keys: `class`, `style`, `data-*`, `onClick` / `onKeydown`, and valid native attributes for that element.\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\nSingle-root containers (Card, Dialog backdrop, Tabs, …):\n\n```ts\ninterface RootPassThrough {\n root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch (visible `<label>` root + hidden input):\n\n```ts\ninterface ControlPassThrough {\n root?: PassThroughPart // usually the label\n input?: PassThroughPart // native input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\nForm fields (Input, Select, DatePicker, …):\n\n```ts\ninterface FieldPassThrough {\n root?: PassThroughPart // outer .m-*-field\n label?: PassThroughPart\n control?: PassThroughPart // trigger / composite control\n input?: PassThroughPart // native input / textarea\n}\n```\n\nWhich keys a component accepts is listed on that component’s **Types** or **pt** section.\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) extends `FieldPassThrough` with affixes:\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) extends `RootPassThrough` with gutter and panes:\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n gutter?: PassThroughPart\n panel1?: PassThroughPart\n panel2?: PassThroughPart\n}\n```\n\nGutter look can also use `resizeTriggerClass` / `resizeTriggerStyle`; content goes in `#resize-trigger` (alias `#gutter`).\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\nControl size for many form / button props:\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` are legacy aliases. Omitted `size` usually inherits [ConfigProvider](/docs/config).\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\nButton type sugar ([`Button`](/components/Button)):\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\nButton color axis (Button, ConfirmDialog `acceptColor`, Dialog `positiveColor`, …):\n\n```ts\ntype ButtonColor =\n | 'default'\n | 'primary'\n | 'danger'\n | 'success'\n | 'info'\n | 'warning'\n | 'help'\n | 'contrast'\n | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\nButton variant axis:\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\nOverlay Teleport target:\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'` (default) \n- `'self'` — render in place (no Teleport) \n- `false` is accepted at runtime (same idea as `'self'`)\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\nGuard before close / confirm. Return `false` (including from a Promise) to **abort**:\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n ...args: T\n) => unknown | Promise<unknown>\n```\n\nUsed by Dialog `beforeClose`, ConfirmDialog `beforeAccept`, and similar.\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) option row:\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) option group (mix into `options` to render a group header row):\n\n```ts\ninterface SelectOptionGroup {\n label: string\n items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\nScalar when single-select; array when `multiple`.\n\n<h3 id=\"IconName\">IconName</h3>\n\nRegistered icon id for [`MIcon`](/components/Icon) / [`Button`](/components/Button), e.g. `'search'`. See the Icon registry.\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nShared fields for Menu / Dropdown / ContextMenu items:\n\n```ts\ninterface MenuNodeBase {\n key?: string\n label?: string\n value?: string\n icon?: string\n disabled?: boolean\n separator?: boolean\n shortcut?: string\n command?: () => void\n items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"
|
|
32972
|
+
"markdown": "---\ntitle: API types\norder: 8\ndescription: Shapes behind type names in component Props tables.\n---\n\n# API types\n\nLook up structures for names that appear in Props tables. The package re-exports the same names as TypeScript types (`import type { … } from 'morya-ui'`), per component `types.ts`.\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\nAttribute bag merged onto one DOM node—the value of `pt.<part>`.\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\nCommon keys: `class`, `style`, `data-*`, `onClick` / `onKeydown`, and valid native attributes for that element.\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\nSingle-root containers (Card, Dialog backdrop, Tabs, …):\n\n```ts\ninterface RootPassThrough {\n root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch (visible `<label>` root + hidden input):\n\n```ts\ninterface ControlPassThrough {\n root?: PassThroughPart // usually the label\n input?: PassThroughPart // native input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\nForm fields (Input, Select, DatePicker, …):\n\n```ts\ninterface FieldPassThrough {\n root?: PassThroughPart // outer .m-*-field\n label?: PassThroughPart\n control?: PassThroughPart // trigger / composite control\n input?: PassThroughPart // native input / textarea\n}\n```\n\nWhich keys a component accepts is listed on that component’s **Types** or **pt** section.\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) extends `FieldPassThrough` with affixes:\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) extends `RootPassThrough` with gutter and panes:\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n gutter?: PassThroughPart\n panel1?: PassThroughPart\n panel2?: PassThroughPart\n}\n```\n\nGutter look can also use `resizeTriggerClass` / `resizeTriggerStyle`; content goes in `#resize-trigger` (alias `#gutter`).\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\nControl size for many form / button props:\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` are legacy aliases. Omitted `size` usually inherits [ConfigProvider](/docs/config).\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\nButton type sugar ([`Button`](/components/Button)):\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\nButton color axis (Button, ConfirmDialog `acceptColor`, Dialog `positiveColor`, …):\n\n```ts\ntype ButtonColor =\n | 'default'\n | 'primary'\n | 'danger'\n | 'success'\n | 'info'\n | 'warning'\n | 'help'\n | 'contrast'\n | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\nButton variant axis:\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\nOverlay Teleport target:\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'` (default) \n- `'self'` — render in place (no Teleport) \n- `false` is accepted at runtime (same idea as `'self'`)\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\nGuard before close / confirm. Return `false` (including from a Promise) to **abort**:\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n ...args: T\n) => unknown | Promise<unknown>\n```\n\nUsed by Dialog `beforeClose`, ConfirmDialog `beforeAccept`, and similar.\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) option row:\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) option group (mix into `options` to render a group header row):\n\n```ts\ninterface SelectOptionGroup {\n label: string\n items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\nScalar when single-select; array when `multiple`.\n\n<h3 id=\"IconName\">IconName</h3>\n\nRegistered icon id for [`MIcon`](/components/Icon) / [`Button`](/components/Button), e.g. `'search'`. See the Icon registry.\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nShared fields for Menu / Dropdown / ContextMenu items:\n\n```ts\ninterface MenuNodeBase {\n key?: string\n label?: string\n value?: string\n icon?: string\n disabled?: boolean\n separator?: boolean\n shortcut?: string\n command?: () => void\n items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MToneType\">MToneType</h3>\n\nBase semantic tones for display / feedback components:\n\n```ts\ntype MToneType =\n | 'secondary'\n | 'success'\n | 'info'\n | 'warning'\n | 'help'\n | 'danger'\n | 'contrast'\n```\n\n<h3 id=\"MTagType\">MTagType</h3>\n\nTag / Badge / Chip / Status: `MToneType` plus brand `primary`.\n\n```ts\ntype MTagType = MToneType | 'primary'\n```\n\n<h3 id=\"MToastType\">MToastType</h3>\n\nMessage / Toast / Timeline tones:\n\n```ts\ntype MToastType =\n | 'success'\n | 'info'\n | 'warning'\n | 'danger'\n | 'secondary'\n | 'contrast'\n```\n\n---\n\nComponent-only types (`TableServerOptions`, `MenuItem`, …) live under each component’s **Types** section; this page is for shared names only.\n",
|
|
32973
32973
|
"sections": [
|
|
32974
32974
|
{
|
|
32975
32975
|
"title": "",
|
|
32976
32976
|
"id": "overview",
|
|
32977
|
-
"body": "# API types\n\nLook up structures for names that appear in Props tables. The package re-exports the same names as TypeScript types (`import type { … } from 'morya-ui'`), per component `types.ts`.\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\nAttribute bag merged onto one DOM node—the value of `pt.<part>`.\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\nCommon keys: `class`, `style`, `data-*`, `onClick` / `onKeydown`, and valid native attributes for that element.\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\nSingle-root containers (Card, Dialog backdrop, Tabs, …):\n\n```ts\ninterface RootPassThrough {\n root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch (visible `<label>` root + hidden input):\n\n```ts\ninterface ControlPassThrough {\n root?: PassThroughPart // usually the label\n input?: PassThroughPart // native input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\nForm fields (Input, Select, DatePicker, …):\n\n```ts\ninterface FieldPassThrough {\n root?: PassThroughPart // outer .m-*-field\n label?: PassThroughPart\n control?: PassThroughPart // trigger / composite control\n input?: PassThroughPart // native input / textarea\n}\n```\n\nWhich keys a component accepts is listed on that component’s **Types** or **pt** section.\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) extends `FieldPassThrough` with affixes:\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) extends `RootPassThrough` with gutter and panes:\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n gutter?: PassThroughPart\n panel1?: PassThroughPart\n panel2?: PassThroughPart\n}\n```\n\nGutter look can also use `resizeTriggerClass` / `resizeTriggerStyle`; content goes in `#resize-trigger` (alias `#gutter`).\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\nControl size for many form / button props:\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` are legacy aliases. Omitted `size` usually inherits [ConfigProvider](/docs/config).\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\nButton type sugar ([`Button`](/components/Button)):\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\nButton color axis (Button, ConfirmDialog `acceptColor`, Dialog `positiveColor`, …):\n\n```ts\ntype ButtonColor =\n | 'default'\n | 'primary'\n | 'danger'\n | 'success'\n | 'info'\n | 'warning'\n | 'help'\n | 'contrast'\n | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\nButton variant axis:\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\nOverlay Teleport target:\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'` (default) \n- `'self'` — render in place (no Teleport) \n- `false` is accepted at runtime (same idea as `'self'`)\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\nGuard before close / confirm. Return `false` (including from a Promise) to **abort**:\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n ...args: T\n) => unknown | Promise<unknown>\n```\n\nUsed by Dialog `beforeClose`, ConfirmDialog `beforeAccept`, and similar.\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) option row:\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) option group (mix into `options` to render a group header row):\n\n```ts\ninterface SelectOptionGroup {\n label: string\n items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\nScalar when single-select; array when `multiple`.\n\n<h3 id=\"IconName\">IconName</h3>\n\nRegistered icon id for [`MIcon`](/components/Icon) / [`Button`](/components/Button), e.g. `'search'`. See the Icon registry.\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nShared fields for Menu / Dropdown / ContextMenu items:\n\n```ts\ninterface MenuNodeBase {\n key?: string\n label?: string\n value?: string\n icon?: string\n disabled?: boolean\n separator?: boolean\n shortcut?: string\n command?: () => void\n items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"
|
|
32977
|
+
"body": "# API types\n\nLook up structures for names that appear in Props tables. The package re-exports the same names as TypeScript types (`import type { … } from 'morya-ui'`), per component `types.ts`.\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\nAttribute bag merged onto one DOM node—the value of `pt.<part>`.\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\nCommon keys: `class`, `style`, `data-*`, `onClick` / `onKeydown`, and valid native attributes for that element.\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\nSingle-root containers (Card, Dialog backdrop, Tabs, …):\n\n```ts\ninterface RootPassThrough {\n root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch (visible `<label>` root + hidden input):\n\n```ts\ninterface ControlPassThrough {\n root?: PassThroughPart // usually the label\n input?: PassThroughPart // native input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\nForm fields (Input, Select, DatePicker, …):\n\n```ts\ninterface FieldPassThrough {\n root?: PassThroughPart // outer .m-*-field\n label?: PassThroughPart\n control?: PassThroughPart // trigger / composite control\n input?: PassThroughPart // native input / textarea\n}\n```\n\nWhich keys a component accepts is listed on that component’s **Types** or **pt** section.\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) extends `FieldPassThrough` with affixes:\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) extends `RootPassThrough` with gutter and panes:\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n gutter?: PassThroughPart\n panel1?: PassThroughPart\n panel2?: PassThroughPart\n}\n```\n\nGutter look can also use `resizeTriggerClass` / `resizeTriggerStyle`; content goes in `#resize-trigger` (alias `#gutter`).\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\nControl size for many form / button props:\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` are legacy aliases. Omitted `size` usually inherits [ConfigProvider](/docs/config).\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\nButton type sugar ([`Button`](/components/Button)):\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\nButton color axis (Button, ConfirmDialog `acceptColor`, Dialog `positiveColor`, …):\n\n```ts\ntype ButtonColor =\n | 'default'\n | 'primary'\n | 'danger'\n | 'success'\n | 'info'\n | 'warning'\n | 'help'\n | 'contrast'\n | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\nButton variant axis:\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\nOverlay Teleport target:\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'` (default) \n- `'self'` — render in place (no Teleport) \n- `false` is accepted at runtime (same idea as `'self'`)\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\nGuard before close / confirm. Return `false` (including from a Promise) to **abort**:\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n ...args: T\n) => unknown | Promise<unknown>\n```\n\nUsed by Dialog `beforeClose`, ConfirmDialog `beforeAccept`, and similar.\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) option row:\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) option group (mix into `options` to render a group header row):\n\n```ts\ninterface SelectOptionGroup {\n label: string\n items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\nScalar when single-select; array when `multiple`.\n\n<h3 id=\"IconName\">IconName</h3>\n\nRegistered icon id for [`MIcon`](/components/Icon) / [`Button`](/components/Button), e.g. `'search'`. See the Icon registry.\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nShared fields for Menu / Dropdown / ContextMenu items:\n\n```ts\ninterface MenuNodeBase {\n key?: string\n label?: string\n value?: string\n icon?: string\n disabled?: boolean\n separator?: boolean\n shortcut?: string\n command?: () => void\n items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MToneType\">MToneType</h3>\n\nBase semantic tones for display / feedback components:\n\n```ts\ntype MToneType =\n | 'secondary'\n | 'success'\n | 'info'\n | 'warning'\n | 'help'\n | 'danger'\n | 'contrast'\n```\n\n<h3 id=\"MTagType\">MTagType</h3>\n\nTag / Badge / Chip / Status: `MToneType` plus brand `primary`.\n\n```ts\ntype MTagType = MToneType | 'primary'\n```\n\n<h3 id=\"MToastType\">MToastType</h3>\n\nMessage / Toast / Timeline tones:\n\n```ts\ntype MToastType =\n | 'success'\n | 'info'\n | 'warning'\n | 'danger'\n | 'secondary'\n | 'contrast'\n```\n\n---\n\nComponent-only types (`TableServerOptions`, `MenuItem`, …) live under each component’s **Types** section; this page is for shared names only."
|
|
32978
32978
|
}
|
|
32979
32979
|
]
|
|
32980
32980
|
}
|
|
@@ -33343,7 +33343,7 @@
|
|
|
33343
33343
|
"zh-CN": {
|
|
33344
33344
|
"title": "面向 Agent",
|
|
33345
33345
|
"description": "给编码 Agent / LLM 的文档入口：先读什么、再调什么工具。",
|
|
33346
|
-
"markdown": "---\ntitle: 面向 Agent\norder: 11.5\ndescription: 给编码 Agent / LLM 的文档入口：先读什么、再调什么工具。\n---\n\n# 面向 Agent\n\n本页是 **编码 Agent / LLM** 使用 Morya UI 文档站的总入口。业务项目里生成页面时，按下面顺序加载；不要臆造 props 或堆砌文档之外的 API。\n\n机器可读索引：[llms.txt](/llms.txt)（站点根路径，构建文档站时生成）。\n\n## 推荐顺序\n\n1. [一键接入](/docs/setup) / [AI 接入](/docs/ai-setup) — 把库、Skill、规则、MCP 装进业务项目 \n2. [Agent Skill](/docs/agent-skill) — `morya-ui-pages`：页面类型与组合约定 \n3. [Agent MCP](/docs/mcp) — 运行时查真实 Props / Events / 示例 \n4. 具体组件页：`/components/{PascalCaseName}`（如 [/components/Button](/components/Button)）\n\n不确定 API 时：**先 MCP / 文档，禁止猜测。**\n\n## 必读约定\n\n| 主题 | 链接 |\n| --- | --- |\n| 公共 props / Semantic DOM | [Common Props](/docs/common-props) |\n| class / style / `pt` 落点 | [样式与 attrs](/docs/attrs) |\n|
|
|
33346
|
+
"markdown": "---\ntitle: 面向 Agent\norder: 11.5\ndescription: 给编码 Agent / LLM 的文档入口：先读什么、再调什么工具。\n---\n\n# 面向 Agent\n\n本页是 **编码 Agent / LLM** 使用 Morya UI 文档站的总入口。业务项目里生成页面时，按下面顺序加载；不要臆造 props 或堆砌文档之外的 API。\n\n机器可读索引：[llms.txt](/llms.txt)（站点根路径，构建文档站时生成）。\n\n## 推荐顺序\n\n1. [一键接入](/docs/setup) / [AI 接入](/docs/ai-setup) — 把库、Skill、规则、MCP 装进业务项目 \n2. [Agent Skill](/docs/agent-skill) — `morya-ui-pages`：页面类型与组合约定 \n3. [Agent MCP](/docs/mcp) — 运行时查真实 Props / Events / 示例 \n4. 具体组件页：`/components/{PascalCaseName}`（如 [/components/Button](/components/Button)）\n\n不确定 API 时：**先 MCP / 文档，禁止猜测。**\n\n## 必读约定\n\n| 主题 | 链接 |\n| --- | --- |\n| 公共 props / Semantic DOM | [Common Props](/docs/common-props) |\n| class / style / `pt` 落点 | [样式与 attrs](/docs/attrs) |\n| 命名与语义 type | [约定](/docs/conventions) |\n| 设计令牌 `--m-*` | [设计令牌](/docs/design-tokens) |\n\n## 硬规则（摘要）\n\n- 只组合文档中的 `M*` 组件与 `--m-*` token \n- 外观词表：语义 `type` / `variant` / `size`（Button：`type` / `color` / `variant`）；不要引入文档之外的 prop 名 \n- 选型按场景与角色判断，不照抄其他库的同名 props \n- 反馈：短结果用 `message`；摘要+详情或异步感用 `toast`；确认用 Confirm 系列 \n\n## 速查\n\n- 组件总览：[/components](/components) \n- 主题即时预览：[/theme-editor](/theme-editor) \n- 更新日志：[/changelog](/changelog) \n- LLM 索引：[/llms.txt](/llms.txt) \n- 站点地图：[/sitemap.xml](/sitemap.xml)\n",
|
|
33347
33347
|
"sections": [
|
|
33348
33348
|
{
|
|
33349
33349
|
"title": "",
|
|
@@ -33358,12 +33358,12 @@
|
|
|
33358
33358
|
{
|
|
33359
33359
|
"title": "必读约定",
|
|
33360
33360
|
"id": "必读约定",
|
|
33361
|
-
"body": "| 主题 | 链接 |\n| --- | --- |\n| 公共 props / Semantic DOM | [Common Props](/docs/common-props) |\n| class / style / `pt` 落点 | [样式与 attrs](/docs/attrs) |\n|
|
|
33361
|
+
"body": "| 主题 | 链接 |\n| --- | --- |\n| 公共 props / Semantic DOM | [Common Props](/docs/common-props) |\n| class / style / `pt` 落点 | [样式与 attrs](/docs/attrs) |\n| 命名与语义 type | [约定](/docs/conventions) |\n| 设计令牌 `--m-*` | [设计令牌](/docs/design-tokens) |"
|
|
33362
33362
|
},
|
|
33363
33363
|
{
|
|
33364
33364
|
"title": "硬规则（摘要）",
|
|
33365
33365
|
"id": "硬规则-摘要",
|
|
33366
|
-
"body": "- 只组合文档中的 `M*` 组件与 `--m-*` token \n-
|
|
33366
|
+
"body": "- 只组合文档中的 `M*` 组件与 `--m-*` token \n- 外观词表：语义 `type` / `variant` / `size`（Button：`type` / `color` / `variant`）；不要引入文档之外的 prop 名 \n- 选型按场景与角色判断，不照抄其他库的同名 props \n- 反馈：短结果用 `message`；摘要+详情或异步感用 `toast`；确认用 Confirm 系列"
|
|
33367
33367
|
},
|
|
33368
33368
|
{
|
|
33369
33369
|
"title": "速查",
|
|
@@ -33375,7 +33375,7 @@
|
|
|
33375
33375
|
"en-US": {
|
|
33376
33376
|
"title": "For agents",
|
|
33377
33377
|
"description": "Entry point for coding agents / LLMs — what to read first and which tools to call.",
|
|
33378
|
-
"markdown": "---\ntitle: For agents\norder: 11.5\ndescription: Entry point for coding agents / LLMs — what to read first and which tools to call.\n---\n\n# For agents\n\nCurated entry for **coding agents / LLMs** using the Morya UI docs site. When generating consumer app pages, follow this order. Do not invent props or introduce APIs that are not documented.\n\nMachine-readable index: [llms.txt](/llms.txt) (site root; emitted when the docs site is built).\n\n## Recommended order\n\n1. [One-shot setup](/docs/setup) / [AI setup](/docs/ai-setup) — install library, Skill, rules, and MCP into the app \n2. [Agent Skill](/docs/agent-skill) — `morya-ui-pages`: surface map and composition contract \n3. [Agent MCP](/docs/mcp) — look up real Props / Events / examples at runtime \n4. Component pages: `/components/{PascalCaseName}` (e.g. [/components/Button](/components/Button))\n\nIf an API is unclear: **MCP / docs first — never guess.**\n\n## Must-read conventions\n\n| Topic | Link |\n| --- | --- |\n| Shared props / Semantic DOM | [Common Props](/docs/common-props) |\n| class / style / `pt` landing | [Styling & attrs](/docs/attrs) |\n| Naming &
|
|
33378
|
+
"markdown": "---\ntitle: For agents\norder: 11.5\ndescription: Entry point for coding agents / LLMs — what to read first and which tools to call.\n---\n\n# For agents\n\nCurated entry for **coding agents / LLMs** using the Morya UI docs site. When generating consumer app pages, follow this order. Do not invent props or introduce APIs that are not documented.\n\nMachine-readable index: [llms.txt](/llms.txt) (site root; emitted when the docs site is built).\n\n## Recommended order\n\n1. [One-shot setup](/docs/setup) / [AI setup](/docs/ai-setup) — install library, Skill, rules, and MCP into the app \n2. [Agent Skill](/docs/agent-skill) — `morya-ui-pages`: surface map and composition contract \n3. [Agent MCP](/docs/mcp) — look up real Props / Events / examples at runtime \n4. Component pages: `/components/{PascalCaseName}` (e.g. [/components/Button](/components/Button))\n\nIf an API is unclear: **MCP / docs first — never guess.**\n\n## Must-read conventions\n\n| Topic | Link |\n| --- | --- |\n| Shared props / Semantic DOM | [Common Props](/docs/common-props) |\n| class / style / `pt` landing | [Styling & attrs](/docs/attrs) |\n| Naming & semantic type | [Conventions](/docs/conventions) |\n| Design tokens `--m-*` | [Design tokens](/docs/design-tokens) |\n\n## Hard rules (summary)\n\n- Compose documented `M*` components and `--m-*` tokens only \n- Appearance vocabulary: semantic `type` / `variant` / `size` (Button: `type` / `color` / `variant`); do not introduce prop names outside the docs \n- Pick by scenario and role — do not copy same-named props blindly \n- Feedback: short results → `message`; summary + detail / async feel → `toast`; confirms → Confirm family \n\n## Quick links\n\n- Component overview: [/components](/components) \n- Live theme preview: [/theme-editor](/theme-editor) \n- Changelog: [/changelog](/changelog) \n- LLM index: [/llms.txt](/llms.txt) \n- Sitemap: [/sitemap.xml](/sitemap.xml)\n",
|
|
33379
33379
|
"sections": [
|
|
33380
33380
|
{
|
|
33381
33381
|
"title": "",
|
|
@@ -33390,12 +33390,12 @@
|
|
|
33390
33390
|
{
|
|
33391
33391
|
"title": "Must-read conventions",
|
|
33392
33392
|
"id": "must-read-conventions",
|
|
33393
|
-
"body": "| Topic | Link |\n| --- | --- |\n| Shared props / Semantic DOM | [Common Props](/docs/common-props) |\n| class / style / `pt` landing | [Styling & attrs](/docs/attrs) |\n| Naming &
|
|
33393
|
+
"body": "| Topic | Link |\n| --- | --- |\n| Shared props / Semantic DOM | [Common Props](/docs/common-props) |\n| class / style / `pt` landing | [Styling & attrs](/docs/attrs) |\n| Naming & semantic type | [Conventions](/docs/conventions) |\n| Design tokens `--m-*` | [Design tokens](/docs/design-tokens) |"
|
|
33394
33394
|
},
|
|
33395
33395
|
{
|
|
33396
33396
|
"title": "Hard rules (summary)",
|
|
33397
33397
|
"id": "hard-rules-summary",
|
|
33398
|
-
"body": "- Compose documented `M*` components and `--m-*` tokens only \n- Appearance vocabulary: `
|
|
33398
|
+
"body": "- Compose documented `M*` components and `--m-*` tokens only \n- Appearance vocabulary: semantic `type` / `variant` / `size` (Button: `type` / `color` / `variant`); do not introduce prop names outside the docs \n- Pick by scenario and role — do not copy same-named props blindly \n- Feedback: short results → `message`; summary + detail / async feel → `toast`; confirms → Confirm family"
|
|
33399
33399
|
},
|
|
33400
33400
|
{
|
|
33401
33401
|
"title": "Quick links",
|
|
@@ -34207,18 +34207,18 @@
|
|
|
34207
34207
|
"title": "约定",
|
|
34208
34208
|
"titleEn": "Conventions",
|
|
34209
34209
|
"description": "morya-ui 的命名、语义色、尺寸与主题约定。",
|
|
34210
|
-
"descriptionEn": "Naming,
|
|
34210
|
+
"descriptionEn": "Naming, semantic type, size, and theme conventions in morya-ui.",
|
|
34211
34211
|
"order": 35,
|
|
34212
34212
|
"locales": {
|
|
34213
34213
|
"zh-CN": {
|
|
34214
34214
|
"title": "约定",
|
|
34215
34215
|
"description": "morya-ui 的命名、语义色、尺寸与主题约定。",
|
|
34216
|
-
"markdown": "---\ntitle: 约定\norder: 35\ndescription: morya-ui 的命名、语义色、尺寸与主题约定。\n---\n\n# 约定\n\nMorya UI 用自己的词表描述界面：组件前缀 `M*`、语义色 `
|
|
34216
|
+
"markdown": "---\ntitle: 约定\norder: 35\ndescription: morya-ui 的命名、语义色、尺寸与主题约定。\n---\n\n# 约定\n\nMorya UI 用自己的词表描述界面：组件前缀 `M*`、语义色 `type`（Badge / Tag / Status / Alert 等）、Button 的外观糖 `type` / `color` / `variant`、设计令牌 `--m-*`。写业务页时直接跟这套约定走。\n\n## 组件与令牌\n\n| 约定 | 说明 |\n| --- | --- |\n| 组件名 | 一律 `M` 前缀：`MButton`、`MDialog`、`MTable` |\n| 主题 | `MConfigProvider` + `useTheme` / `useDensity` / `useMotion` |\n| 颜色与几何 | 只用 `--m-*`，品牌色改 `--m-color-primary` |\n| 控件高度 | 默认 medium `32px`，圆角 `--m-control-radius` |\n| 字重 | 控件文案默认 400 |\n\n完整变量见 [设计令牌](/docs/design-tokens)，覆盖方式见 [主题](/docs/theme)。\n\n## 语义与外观\n\n| 词 | 用在 |\n| --- | --- |\n| `type`（语义色） | Badge / Tag / Status / Alert / Message / Toast 等：`primary` / `secondary` / `success` / `info` / `warning` / `danger` |\n| `type` / `color` / `variant`（Button） | Button：`type` 糖（`primary` / `dashed` / `text` / `link`…）+ `color` + `variant`（`solid` / `outlined` / `filled`…） |\n| `fluid` / `block` | 通栏；字段多用 `fluid`，Button / ButtonGroup 用 `block` |\n| `size` | `small` / `medium` / `large`（部分控件仍接受 `sm` / `md` / `lg`） |\n| `status` | 表单控件校验态：`error` / `warning` |\n\n按钮默认是灰色描边（`default` + `outlined`）；主实心用 `type=\"primary\"`，次要动作保持默认或 `type=\"text\"`，危险操作用 `danger` / `color=\"danger\"`。\n\n## 反馈\n\n| 场景 | 用法 |\n| --- | --- |\n| 短操作结果 | `message` / `MMessage` |\n| 摘要 + 详情、异步过程 | `toast` / `MToast` |\n| 需要确认 | `MConfirmDialog` / `MConfirmPopup` / `useConfirm` |\n| 页面内常驻说明 | `MAlert` |\n| 阻塞等待 | `MLoading`（细环可用 `MProgressSpinner`） |\n| 进度 | `MProgressBar` |\n| 空态 / 结果页 | `MEmpty` / `MResult` |\n\n## 布局与页面\n\n后台骨架用 `MLayout` 系列；列表/筛选/统计块用 `MPage*`。间距容器是 `MSpace` / `MFlex` / `MGrid`，相邻按钮拼组用 `MButtonGroup`。\n\n## 本库特有的能力\n\nDock、Terminal、Knob、Page 套件、以及 MCP / Agent Skill 是同一套令牌上的产品面。选型看 [组件文档](/components/Button) 和仓库 `DESIGN.md`。\n",
|
|
34217
34217
|
"sections": [
|
|
34218
34218
|
{
|
|
34219
34219
|
"title": "",
|
|
34220
34220
|
"id": "overview",
|
|
34221
|
-
"body": "# 约定\n\nMorya UI 用自己的词表描述界面：组件前缀 `M*`、语义色 `
|
|
34221
|
+
"body": "# 约定\n\nMorya UI 用自己的词表描述界面：组件前缀 `M*`、语义色 `type`（Badge / Tag / Status / Alert 等）、Button 的外观糖 `type` / `color` / `variant`、设计令牌 `--m-*`。写业务页时直接跟这套约定走。"
|
|
34222
34222
|
},
|
|
34223
34223
|
{
|
|
34224
34224
|
"title": "组件与令牌",
|
|
@@ -34228,7 +34228,7 @@
|
|
|
34228
34228
|
{
|
|
34229
34229
|
"title": "语义与外观",
|
|
34230
34230
|
"id": "语义与外观",
|
|
34231
|
-
"body": "| 词 | 用在 |\n| --- | --- |\n| `
|
|
34231
|
+
"body": "| 词 | 用在 |\n| --- | --- |\n| `type`（语义色） | Badge / Tag / Status / Alert / Message / Toast 等：`primary` / `secondary` / `success` / `info` / `warning` / `danger` |\n| `type` / `color` / `variant`（Button） | Button：`type` 糖（`primary` / `dashed` / `text` / `link`…）+ `color` + `variant`（`solid` / `outlined` / `filled`…） |\n| `fluid` / `block` | 通栏；字段多用 `fluid`，Button / ButtonGroup 用 `block` |\n| `size` | `small` / `medium` / `large`（部分控件仍接受 `sm` / `md` / `lg`） |\n| `status` | 表单控件校验态：`error` / `warning` |\n\n按钮默认是灰色描边（`default` + `outlined`）；主实心用 `type=\"primary\"`，次要动作保持默认或 `type=\"text\"`，危险操作用 `danger` / `color=\"danger\"`。"
|
|
34232
34232
|
},
|
|
34233
34233
|
{
|
|
34234
34234
|
"title": "反馈",
|
|
@@ -34249,13 +34249,13 @@
|
|
|
34249
34249
|
},
|
|
34250
34250
|
"en-US": {
|
|
34251
34251
|
"title": "Conventions",
|
|
34252
|
-
"description": "Naming,
|
|
34253
|
-
"markdown": "---\ntitle: Conventions\norder: 35\ndescription: Naming,
|
|
34252
|
+
"description": "Naming, semantic type, size, and theme conventions in morya-ui.",
|
|
34253
|
+
"markdown": "---\ntitle: Conventions\norder: 35\ndescription: Naming, semantic type, size, and theme conventions in morya-ui.\n---\n\n# Conventions\n\nMorya UI has its own vocabulary: `M*` components, semantic `type` for tone on Badge / Tag / Status / Alert, Button appearance sugar `type` / `color` / `variant`, and `--m-*` design tokens. Follow these conventions when you assemble product UI.\n\n## Components and tokens\n\n| Convention | Meaning |\n| --- | --- |\n| Names | Always `M` prefix: `MButton`, `MDialog`, `MTable` |\n| Theme | `MConfigProvider` plus `useTheme` / `useDensity` / `useMotion` |\n| Color and geometry | `--m-*` only; brand via `--m-color-primary` |\n| Control height | Medium default `32px`; radius `--m-control-radius` |\n| Type weight | Control copy defaults to 400 |\n\nSee [Design tokens](/docs/design-tokens) and [Theme](/docs/theme).\n\n## Tone and appearance\n\n| Word | Use |\n| --- | --- |\n| `type` (semantic) | Tone on Badge / Tag / Status / Alert / Message / Toast: `primary` / `secondary` / `success` / `info` / `warning` / `danger` |\n| `type` / `color` / `variant` (Button) | Button: `type` sugar (`primary` / `dashed` / `text` / `link`…) + `color` + `variant` (`solid` / `outlined` / `filled`…) |\n| `fluid` / `block` | Full width; fields mostly use `fluid`, Button / ButtonGroup use `block` |\n| `size` | `small` / `medium` / `large` (some controls still accept `sm` / `md` / `lg`) |\n| `status` | Field validation: `error` / `warning` |\n\nButtons default to gray outlined (`default` + `outlined`). Use `type=\"primary\"` for solid primary, keep the default or `type=\"text\"` for quiet actions, and `danger` / `color=\"danger\"` for destructive ones.\n\n## Feedback\n\n| Situation | Use |\n| --- | --- |\n| Short result | `message` / `MMessage` |\n| Summary + detail, or async work | `toast` / `MToast` |\n| Confirm | `MConfirmDialog` / `MConfirmPopup` / `useConfirm` |\n| Persistent in-page notice | `MAlert` |\n| Blocking wait | `MLoading` (`MProgressSpinner` for a thin ring) |\n| Progress | `MProgressBar` |\n| Empty / outcome | `MEmpty` / `MResult` |\n\n## Layout and pages\n\nAdmin chrome uses the `MLayout` family; list/filter/stat blocks use `MPage*`. Spacing containers are `MSpace` / `MFlex` / `MGrid`. Join adjacent buttons with `MButtonGroup`.\n\n## Distinctive surfaces\n\nDock, Terminal, Knob, the Page kit, and MCP / Agent Skill sit on the same token system. Prefer the [component docs](/components/Button) and repository `DESIGN.md` when choosing APIs.\n",
|
|
34254
34254
|
"sections": [
|
|
34255
34255
|
{
|
|
34256
34256
|
"title": "",
|
|
34257
34257
|
"id": "overview",
|
|
34258
|
-
"body": "# Conventions\n\nMorya UI has its own vocabulary: `M*` components, `
|
|
34258
|
+
"body": "# Conventions\n\nMorya UI has its own vocabulary: `M*` components, semantic `type` for tone on Badge / Tag / Status / Alert, Button appearance sugar `type` / `color` / `variant`, and `--m-*` design tokens. Follow these conventions when you assemble product UI."
|
|
34259
34259
|
},
|
|
34260
34260
|
{
|
|
34261
34261
|
"title": "Components and tokens",
|
|
@@ -34265,7 +34265,7 @@
|
|
|
34265
34265
|
{
|
|
34266
34266
|
"title": "Tone and appearance",
|
|
34267
34267
|
"id": "tone-and-appearance",
|
|
34268
|
-
"body": "| Word | Use |\n| --- | --- |\n| `
|
|
34268
|
+
"body": "| Word | Use |\n| --- | --- |\n| `type` (semantic) | Tone on Badge / Tag / Status / Alert / Message / Toast: `primary` / `secondary` / `success` / `info` / `warning` / `danger` |\n| `type` / `color` / `variant` (Button) | Button: `type` sugar (`primary` / `dashed` / `text` / `link`…) + `color` + `variant` (`solid` / `outlined` / `filled`…) |\n| `fluid` / `block` | Full width; fields mostly use `fluid`, Button / ButtonGroup use `block` |\n| `size` | `small` / `medium` / `large` (some controls still accept `sm` / `md` / `lg`) |\n| `status` | Field validation: `error` / `warning` |\n\nButtons default to gray outlined (`default` + `outlined`). Use `type=\"primary\"` for solid primary, keep the default or `type=\"text\"` for quiet actions, and `danger` / `color=\"danger\"` for destructive ones."
|
|
34269
34269
|
},
|
|
34270
34270
|
{
|
|
34271
34271
|
"title": "Feedback",
|