@morya-ui/mcp 0.3.3 → 0.3.5
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/LICENSE +21 -21
- package/README.md +151 -151
- package/bin/morya-ui-mcp.js +2 -2
- package/data/catalog.json +62 -51
- package/data/example-coverage.json +6 -4
- package/data/golden-pages/dashboard-page.vue +138 -138
- package/data/golden-pages/detail-page.vue +178 -178
- package/data/golden-pages/empty-state.vue +56 -56
- package/data/golden-pages/form-in-dialog.vue +166 -166
- package/data/golden-pages/form-page.vue +107 -107
- package/data/golden-pages/landing-page.vue +358 -358
- package/data/golden-pages/list-page-dense.vue +168 -0
- package/data/golden-pages/list-page-rail.vue +272 -0
- package/data/golden-pages/list-page.vue +222 -216
- package/data/golden-pages/login-page.vue +231 -231
- package/data/golden-pages/result-page.vue +84 -84
- package/data/golden-pages/settings-page.vue +163 -163
- package/data/golden-pages/wizard-form.vue +182 -182
- package/dist/__tests__/page-snippets.test.js +29 -0
- package/dist/__tests__/tools.test.js +94 -1
- package/dist/decisions.d.ts +2 -0
- package/dist/decisions.js +76 -7
- package/dist/golden-pages.d.ts +18 -0
- package/dist/golden-pages.js +76 -22
- package/dist/index.js +9 -3
- package/dist/page-snippets.js +960 -257
- package/dist/patterns.d.ts +5 -3
- package/dist/patterns.js +53 -13
- package/dist/style-presets.d.ts +33 -0
- package/dist/style-presets.js +131 -0
- package/dist/tools.d.ts +12 -0
- package/dist/tools.js +301 -210
- package/package.json +1 -1
package/data/catalog.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
|
-
"generatedAt": "2026-09-
|
|
2
|
+
"generatedAt": "2026-09-25T05:07:42.993Z",
|
|
3
3
|
"library": {
|
|
4
4
|
"name": "morya-ui",
|
|
5
|
-
"version": "0.3.
|
|
5
|
+
"version": "0.3.5"
|
|
6
6
|
},
|
|
7
7
|
"mcp": {
|
|
8
8
|
"name": "@morya-ui/mcp",
|
|
9
|
-
"version": "0.3.
|
|
9
|
+
"version": "0.3.5"
|
|
10
10
|
},
|
|
11
11
|
"components": [
|
|
12
12
|
{
|
|
@@ -8022,9 +8022,9 @@
|
|
|
8022
8022
|
},
|
|
8023
8023
|
{
|
|
8024
8024
|
"name": "size",
|
|
8025
|
-
"type": "'small' | 'medium' | 'large' | number | [number, number]",
|
|
8025
|
+
"type": "'small' | 'medium' | 'large' | number | string | [number | string, number | string]",
|
|
8026
8026
|
"default": "'medium'",
|
|
8027
|
-
"description": "子项间距（`gap
|
|
8027
|
+
"description": "子项间距（`gap`）。数字按 `px`；字符串可为 CSS 长度。"
|
|
8028
8028
|
},
|
|
8029
8029
|
{
|
|
8030
8030
|
"name": "wrap",
|
|
@@ -8154,7 +8154,7 @@
|
|
|
8154
8154
|
{
|
|
8155
8155
|
"id": "props",
|
|
8156
8156
|
"title": "Props",
|
|
8157
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | 交叉轴对齐。 |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | 主轴对齐。 |\n| `inline` | `boolean` | `false` | 是否为 `inline-flex`。 |\n| `vertical` | `boolean` | `false` | 纵向排列。 |\n| `reverse` | `boolean` | `false` | 主轴反向。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| [number, number]` | `'medium'` | 子项间距（`gap
|
|
8157
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | 交叉轴对齐。 |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | 主轴对齐。 |\n| `inline` | `boolean` | `false` | 是否为 `inline-flex`。 |\n| `vertical` | `boolean` | `false` | 纵向排列。 |\n| `reverse` | `boolean` | `false` | 主轴反向。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| string \\| [number \\| string, number \\| string]` | `'medium'` | 子项间距（`gap`）。数字按 `px`；字符串可为 CSS 长度。 |\n| `wrap` | `boolean` | `true` | 是否换行（纵向时强制不换行）。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
8158
8158
|
},
|
|
8159
8159
|
{
|
|
8160
8160
|
"id": "events",
|
|
@@ -8167,7 +8167,7 @@
|
|
|
8167
8167
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 布局子节点。 |"
|
|
8168
8168
|
}
|
|
8169
8169
|
],
|
|
8170
|
-
"markdown": "---\ntitle: Flex\ncategory: 01 / BASIC\ndescription: 基于 flex 的弹性布局容器，控制方向、对齐与间距。\n---\n\n# Flex\n\n弹性布局容器。优先使用 CSS `gap` 控制子项间距。\n\n## 引入\n\n```ts\nimport { MFlex } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Vertical\n\n```vue preview src=\"./demos/Vertical.zh.vue\"\n```\n\n## Justify & Align\n\n```vue preview src=\"./demos/JustifyAndAlign.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | 交叉轴对齐。 |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | 主轴对齐。 |\n| `inline` | `boolean` | `false` | 是否为 `inline-flex`。 |\n| `vertical` | `boolean` | `false` | 纵向排列。 |\n| `reverse` | `boolean` | `false` | 主轴反向。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| [number, number]` | `'medium'` | 子项间距（`gap
|
|
8170
|
+
"markdown": "---\ntitle: Flex\ncategory: 01 / BASIC\ndescription: 基于 flex 的弹性布局容器，控制方向、对齐与间距。\n---\n\n# Flex\n\n弹性布局容器。优先使用 CSS `gap` 控制子项间距。\n\n## 引入\n\n```ts\nimport { MFlex } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Vertical\n\n```vue preview src=\"./demos/Vertical.zh.vue\"\n```\n\n## Justify & Align\n\n```vue preview src=\"./demos/JustifyAndAlign.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | 交叉轴对齐。 |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | 主轴对齐。 |\n| `inline` | `boolean` | `false` | 是否为 `inline-flex`。 |\n| `vertical` | `boolean` | `false` | 纵向排列。 |\n| `reverse` | `boolean` | `false` | 主轴反向。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| string \\| [number \\| string, number \\| string]` | `'medium'` | 子项间距（`gap`）。数字按 `px`；字符串可为 CSS 长度。 |\n| `wrap` | `boolean` | `true` | 是否换行（纵向时强制不换行）。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n无自定义事件。\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 布局子节点。 |\n"
|
|
8171
8171
|
},
|
|
8172
8172
|
"en-US": {
|
|
8173
8173
|
"title": "Flex",
|
|
@@ -8201,7 +8201,7 @@
|
|
|
8201
8201
|
{
|
|
8202
8202
|
"id": "props",
|
|
8203
8203
|
"title": "Props",
|
|
8204
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | Cross-axis alignment. |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | Main-axis alignment. |\n| `inline` | `boolean` | `false` | Use `inline-flex`. |\n| `vertical` | `boolean` | `false` | Column direction. |\n| `reverse` | `boolean` | `false` | Reverse main axis. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| [number, number]` | `'medium'` | Gap between items. |\n| `wrap` | `boolean` | `true` | Allow wrapping (forced off when vertical). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
8204
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | Cross-axis alignment. |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | Main-axis alignment. |\n| `inline` | `boolean` | `false` | Use `inline-flex`. |\n| `vertical` | `boolean` | `false` | Column direction. |\n| `reverse` | `boolean` | `false` | Reverse main axis. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| string \\| [number \\| string, number \\| string]` | `'medium'` | Gap between items. Numbers are `px`; strings may be CSS lengths. |\n| `wrap` | `boolean` | `true` | Allow wrapping (forced off when vertical). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
8205
8205
|
},
|
|
8206
8206
|
{
|
|
8207
8207
|
"id": "events",
|
|
@@ -8214,7 +8214,7 @@
|
|
|
8214
8214
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Layout children. |"
|
|
8215
8215
|
}
|
|
8216
8216
|
],
|
|
8217
|
-
"markdown": "---\ntitle: Flex\ncategory: 01 / BASIC\ndescription: Flexbox layout container for direction, alignment, and gap.\n---\n\n# Flex\n\nFlexbox layout container. Prefer CSS `gap` for spacing between children.\n\n## Import\n\n```ts\nimport { MFlex } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Vertical\n\n```vue preview src=\"./demos/Vertical.en.vue\"\n```\n\n## Justify & Align\n\n```vue preview src=\"./demos/JustifyAndAlign.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | Cross-axis alignment. |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | Main-axis alignment. |\n| `inline` | `boolean` | `false` | Use `inline-flex`. |\n| `vertical` | `boolean` | `false` | Column direction. |\n| `reverse` | `boolean` | `false` | Reverse main axis. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| [number, number]` | `'medium'` | Gap between items. |\n| `wrap` | `boolean` | `true` | Allow wrapping (forced off when vertical). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\nNo custom events.\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Layout children. |\n"
|
|
8217
|
+
"markdown": "---\ntitle: Flex\ncategory: 01 / BASIC\ndescription: Flexbox layout container for direction, alignment, and gap.\n---\n\n# Flex\n\nFlexbox layout container. Prefer CSS `gap` for spacing between children.\n\n## Import\n\n```ts\nimport { MFlex } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Vertical\n\n```vue preview src=\"./demos/Vertical.en.vue\"\n```\n\n## Justify & Align\n\n```vue preview src=\"./demos/JustifyAndAlign.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | Cross-axis alignment. |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | Main-axis alignment. |\n| `inline` | `boolean` | `false` | Use `inline-flex`. |\n| `vertical` | `boolean` | `false` | Column direction. |\n| `reverse` | `boolean` | `false` | Reverse main axis. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| string \\| [number \\| string, number \\| string]` | `'medium'` | Gap between items. Numbers are `px`; strings may be CSS lengths. |\n| `wrap` | `boolean` | `true` | Allow wrapping (forced off when vertical). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\nNo custom events.\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Layout children. |\n"
|
|
8218
8218
|
}
|
|
8219
8219
|
}
|
|
8220
8220
|
},
|
|
@@ -15258,6 +15258,11 @@
|
|
|
15258
15258
|
"type": "'auto' | 'uniform'",
|
|
15259
15259
|
"description": "`auto` 收紧 Header/筛选/Toolbar 与表格之间的 band；`uniform` 仅用 `gap`。"
|
|
15260
15260
|
},
|
|
15261
|
+
{
|
|
15262
|
+
"name": "fill",
|
|
15263
|
+
"type": "boolean",
|
|
15264
|
+
"description": "撑满 `MLayoutContent` 剩余高度；仅全视口主列表与 `MTable fill` 联用。"
|
|
15265
|
+
},
|
|
15261
15266
|
{
|
|
15262
15267
|
"name": "ariaLabel",
|
|
15263
15268
|
"type": "string",
|
|
@@ -15271,7 +15276,7 @@
|
|
|
15271
15276
|
{
|
|
15272
15277
|
"name": "collapsible",
|
|
15273
15278
|
"type": "boolean",
|
|
15274
|
-
"description": "为 true 且提供 `#advanced`
|
|
15279
|
+
"description": "为 true 且提供 `#advanced` 时显示展开/收起（默认文案「高级筛选」/「收起」，右侧 chevron）。"
|
|
15275
15280
|
},
|
|
15276
15281
|
{
|
|
15277
15282
|
"name": "expanded",
|
|
@@ -15370,6 +15375,10 @@
|
|
|
15370
15375
|
"name": "default",
|
|
15371
15376
|
"description": "自定义说明内容。"
|
|
15372
15377
|
},
|
|
15378
|
+
{
|
|
15379
|
+
"name": "actions",
|
|
15380
|
+
"description": "标题行右侧操作区。"
|
|
15381
|
+
},
|
|
15373
15382
|
{
|
|
15374
15383
|
"name": "advanced",
|
|
15375
15384
|
"description": "折叠区（需 `collapsible`）。"
|
|
@@ -15378,10 +15387,6 @@
|
|
|
15378
15387
|
"name": "active",
|
|
15379
15388
|
"description": "可选；已选摘要（更常见是下方 `MPageFilterChips`）。"
|
|
15380
15389
|
},
|
|
15381
|
-
{
|
|
15382
|
-
"name": "actions",
|
|
15383
|
-
"description": "标题行右侧操作区。"
|
|
15384
|
-
},
|
|
15385
15390
|
{
|
|
15386
15391
|
"name": "breadcrumb",
|
|
15387
15392
|
"description": "标题上方的面包屑（放 `MBreadcrumb`）。"
|
|
@@ -15416,7 +15421,7 @@
|
|
|
15416
15421
|
"sectionId": "列表页组合",
|
|
15417
15422
|
"lang": "vue",
|
|
15418
15423
|
"preview": true,
|
|
15419
|
-
"code": "<script setup lang=\"ts\">\nimport {\n MButton,\n MInput,\n MPageContent,\n MPageFilters,\n MPageHeader,\n MPageToolbar,\n MSpace,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst keyword = ref('')\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>\n <MPageHeader title=\"用户管理\" description=\"维护账号与角色。\">\n <template #actions>\n <MButton severity=\"primary\">\n 新建\n </MButton>\n </template>\n </MPageHeader>\n <MPageFilters aria-label=\"筛选\" variant=\"filled\">\n <MSpace wrap>\n <MInput v-model=\"keyword\" placeholder=\"搜索\" clearable class=\"w-48\" />\n <MButton severity=\"secondary\">\n 查询\n </MButton>\n </
|
|
15424
|
+
"code": "<script setup lang=\"ts\">\nimport {\n MButton,\n MInput,\n MPageContent,\n MPageFilters,\n MPageHeader,\n MPageToolbar,\n MSpace,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst keyword = ref('')\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>\n <MPageHeader title=\"用户管理\" description=\"维护账号与角色。\">\n <template #actions>\n <MButton severity=\"primary\">\n 新建\n </MButton>\n </template>\n </MPageHeader>\n <MPageFilters aria-label=\"筛选\" variant=\"filled\">\n <MSpace wrap>\n <MInput v-model=\"keyword\" placeholder=\"搜索\" clearable class=\"w-48\" />\n </MSpace>\n <template #actions>\n <MButton severity=\"secondary\">\n 查询\n </MButton>\n </template>\n </MPageFilters>\n <MPageToolbar>\n <span style=\"color:var(--m-color-text-muted);font-size:var(--m-font-size-sm)\">已选 0 项</span>\n <template #actions>\n <MButton severity=\"secondary\" text>\n 导出\n </MButton>\n <MButton severity=\"danger\" text>\n 删除\n </MButton>\n </template>\n </MPageToolbar>\n </MPageContent>\n </div>\n</template>",
|
|
15420
15425
|
"locale": "zh-CN"
|
|
15421
15426
|
},
|
|
15422
15427
|
{
|
|
@@ -15425,7 +15430,7 @@
|
|
|
15425
15430
|
"sectionId": "列表页组合",
|
|
15426
15431
|
"lang": "vue",
|
|
15427
15432
|
"preview": true,
|
|
15428
|
-
"code": "<script setup lang=\"ts\">\nimport {\n MButton,\n MInput,\n MPageContent,\n MPageFilterChips,\n MPageFilters,\n MPageHeader,\n MSelect,\n MSpace,\n MTag,\n} from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst keyword = ref('')\nconst status = ref<string | null>('active')\nconst filtersExpanded = ref(false)\nconst department = ref<string | null>(null)\n\nconst activeFilters = computed(() => {\n const items: Array<{ key: string; label: string }> = []\n if (keyword.value.trim()) {\n items.push({ key: 'keyword', label: `关键词：${keyword.value.trim()}` })\n }\n if (status.value && status.value !== 'all') {\n items.push({ key: 'status', label: `状态：${status.value === 'active' ? '启用' : '停用'}` })\n }\n if (department.value) {\n items.push({ key: 'department', label: `部门：${department.value}` })\n }\n return items\n})\n\nfunction clearFilter(key: string) {\n if (key === 'keyword') keyword.value = ''\n if (key === 'status') status.value = 'all'\n if (key === 'department') department.value = null\n}\n\nfunction resetAll() {\n keyword.value = ''\n status.value = 'all'\n department.value = null\n}\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>\n <MPageHeader title=\"用户管理\" description=\"
|
|
15433
|
+
"code": "<script setup lang=\"ts\">\nimport {\n MButton,\n MInput,\n MPageContent,\n MPageFilterChips,\n MPageFilters,\n MPageHeader,\n MSelect,\n MSpace,\n MTag,\n} from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst keyword = ref('')\nconst status = ref<string | null>('active')\nconst filtersExpanded = ref(false)\nconst department = ref<string | null>(null)\n\nconst activeFilters = computed(() => {\n const items: Array<{ key: string; label: string }> = []\n if (keyword.value.trim()) {\n items.push({ key: 'keyword', label: `关键词：${keyword.value.trim()}` })\n }\n if (status.value && status.value !== 'all') {\n items.push({ key: 'status', label: `状态：${status.value === 'active' ? '启用' : '停用'}` })\n }\n if (department.value) {\n items.push({ key: 'department', label: `部门：${department.value}` })\n }\n return items\n})\n\nfunction clearFilter(key: string) {\n if (key === 'keyword') keyword.value = ''\n if (key === 'status') status.value = 'all'\n if (key === 'department') department.value = null\n}\n\nfunction resetAll() {\n keyword.value = ''\n status.value = 'all'\n department.value = null\n}\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>\n <MPageHeader title=\"用户管理\" description=\"折叠高级筛选（chevron + 收起），查询/重置放 #actions。\">\n <template #actions>\n <MButton severity=\"primary\">\n 新建\n </MButton>\n </template>\n </MPageHeader>\n <MPageFilters\n v-model:expanded=\"filtersExpanded\"\n aria-label=\"筛选\"\n variant=\"filled\"\n collapsible\n >\n <MSpace wrap>\n <MInput v-model=\"keyword\" placeholder=\"搜索名称\" clearable style=\"width: 14rem\" />\n <MSelect\n v-model=\"status\"\n :options=\"[\n { label: '全部', value: 'all' },\n { label: '启用', value: 'active' },\n { label: '停用', value: 'inactive' },\n ]\"\n placeholder=\"状态\"\n style=\"width: 10rem\"\n />\n </MSpace>\n <template #actions>\n <MButton severity=\"secondary\">\n 查询\n </MButton>\n <MButton severity=\"secondary\" text @click=\"resetAll\">\n 重置\n </MButton>\n </template>\n <template #advanced>\n <MSpace wrap>\n <MSelect\n v-model=\"department\"\n :options=\"[\n { label: '研发', value: '研发' },\n { label: '运营', value: '运营' },\n ]\"\n placeholder=\"部门\"\n clearable\n style=\"width: 10rem\"\n />\n </MSpace>\n </template>\n </MPageFilters>\n <MPageFilterChips v-if=\"activeFilters.length\" label=\"已选\" aria-label=\"已选筛选\">\n <MTag\n v-for=\"item in activeFilters\"\n :key=\"item.key\"\n :value=\"item.label\"\n size=\"small\"\n bordered\n closable\n @close=\"clearFilter(item.key)\"\n />\n </MPageFilterChips>\n </MPageContent>\n </div>\n</template>",
|
|
15429
15434
|
"locale": "zh-CN"
|
|
15430
15435
|
},
|
|
15431
15436
|
{
|
|
@@ -15470,7 +15475,7 @@
|
|
|
15470
15475
|
"sectionId": "list-page-stack",
|
|
15471
15476
|
"lang": "vue",
|
|
15472
15477
|
"preview": true,
|
|
15473
|
-
"code": "<script setup lang=\"ts\">\nimport {\n MButton,\n MInput,\n MPageContent,\n MPageFilters,\n MPageHeader,\n MPageToolbar,\n MSpace,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst keyword = ref('')\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>\n <MPageHeader title=\"Users\" description=\"Manage accounts and roles.\">\n <template #actions>\n <MButton severity=\"primary\">\n Create\n </MButton>\n </template>\n </MPageHeader>\n <MPageFilters aria-label=\"Filters\" variant=\"filled\">\n <MSpace wrap>\n <MInput v-model=\"keyword\" placeholder=\"Search\" clearable class=\"w-48\" />\n <MButton severity=\"secondary\">\n Search\n </MButton>\n </
|
|
15478
|
+
"code": "<script setup lang=\"ts\">\nimport {\n MButton,\n MInput,\n MPageContent,\n MPageFilters,\n MPageHeader,\n MPageToolbar,\n MSpace,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst keyword = ref('')\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>\n <MPageHeader title=\"Users\" description=\"Manage accounts and roles.\">\n <template #actions>\n <MButton severity=\"primary\">\n Create\n </MButton>\n </template>\n </MPageHeader>\n <MPageFilters aria-label=\"Filters\" variant=\"filled\">\n <MSpace wrap>\n <MInput v-model=\"keyword\" placeholder=\"Search\" clearable class=\"w-48\" />\n </MSpace>\n <template #actions>\n <MButton severity=\"secondary\">\n Search\n </MButton>\n </template>\n </MPageFilters>\n <MPageToolbar>\n <span style=\"color:var(--m-color-text-muted);font-size:var(--m-font-size-sm)\">0 selected</span>\n <template #actions>\n <MButton severity=\"secondary\" text>\n Export\n </MButton>\n <MButton severity=\"danger\" text>\n Delete\n </MButton>\n </template>\n </MPageToolbar>\n </MPageContent>\n </div>\n</template>",
|
|
15474
15479
|
"locale": "en-US"
|
|
15475
15480
|
},
|
|
15476
15481
|
{
|
|
@@ -15479,7 +15484,7 @@
|
|
|
15479
15484
|
"sectionId": "list-page-stack",
|
|
15480
15485
|
"lang": "vue",
|
|
15481
15486
|
"preview": true,
|
|
15482
|
-
"code": "<script setup lang=\"ts\">\nimport {\n MButton,\n MInput,\n MPageContent,\n MPageFilterChips,\n MPageFilters,\n MPageHeader,\n MSelect,\n MSpace,\n MTag,\n} from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst keyword = ref('')\nconst status = ref<string | null>('active')\nconst filtersExpanded = ref(false)\nconst department = ref<string | null>(null)\n\nconst activeFilters = computed(() => {\n const items: Array<{ key: string; label: string }> = []\n if (keyword.value.trim()) {\n items.push({ key: 'keyword', label: `Keyword: ${keyword.value.trim()}` })\n }\n if (status.value && status.value !== 'all') {\n items.push({\n key: 'status',\n label: `Status: ${status.value === 'active' ? 'Active' : 'Inactive'}`,\n })\n }\n if (department.value) {\n items.push({ key: 'department', label: `Department: ${department.value}` })\n }\n return items\n})\n\nfunction clearFilter(key: string) {\n if (key === 'keyword') keyword.value = ''\n if (key === 'status') status.value = 'all'\n if (key === 'department') department.value = null\n}\n\nfunction resetAll() {\n keyword.value = ''\n status.value = 'all'\n department.value = null\n}\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>\n <MPageHeader title=\"Users\" description=\"Collapsible advanced filters
|
|
15487
|
+
"code": "<script setup lang=\"ts\">\nimport {\n MButton,\n MInput,\n MPageContent,\n MPageFilterChips,\n MPageFilters,\n MPageHeader,\n MSelect,\n MSpace,\n MTag,\n} from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst keyword = ref('')\nconst status = ref<string | null>('active')\nconst filtersExpanded = ref(false)\nconst department = ref<string | null>(null)\n\nconst activeFilters = computed(() => {\n const items: Array<{ key: string; label: string }> = []\n if (keyword.value.trim()) {\n items.push({ key: 'keyword', label: `Keyword: ${keyword.value.trim()}` })\n }\n if (status.value && status.value !== 'all') {\n items.push({\n key: 'status',\n label: `Status: ${status.value === 'active' ? 'Active' : 'Inactive'}`,\n })\n }\n if (department.value) {\n items.push({ key: 'department', label: `Department: ${department.value}` })\n }\n return items\n})\n\nfunction clearFilter(key: string) {\n if (key === 'keyword') keyword.value = ''\n if (key === 'status') status.value = 'all'\n if (key === 'department') department.value = null\n}\n\nfunction resetAll() {\n keyword.value = ''\n status.value = 'all'\n department.value = null\n}\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>\n <MPageHeader title=\"Users\" description=\"Collapsible advanced filters (chevron + Collapse); query/reset in #actions.\">\n <template #actions>\n <MButton severity=\"primary\">\n Create\n </MButton>\n </template>\n </MPageHeader>\n <MPageFilters\n v-model:expanded=\"filtersExpanded\"\n aria-label=\"Filters\"\n variant=\"filled\"\n collapsible\n >\n <MSpace wrap>\n <MInput v-model=\"keyword\" placeholder=\"Search name\" clearable style=\"width: 14rem\" />\n <MSelect\n v-model=\"status\"\n :options=\"[\n { label: 'All', value: 'all' },\n { label: 'Active', value: 'active' },\n { label: 'Inactive', value: 'inactive' },\n ]\"\n placeholder=\"Status\"\n style=\"width: 10rem\"\n />\n </MSpace>\n <template #actions>\n <MButton severity=\"secondary\">\n Search\n </MButton>\n <MButton severity=\"secondary\" text @click=\"resetAll\">\n Reset\n </MButton>\n </template>\n <template #advanced>\n <MSpace wrap>\n <MSelect\n v-model=\"department\"\n :options=\"[\n { label: 'Engineering', value: 'Engineering' },\n { label: 'Operations', value: 'Operations' },\n ]\"\n placeholder=\"Department\"\n clearable\n style=\"width: 10rem\"\n />\n </MSpace>\n </template>\n </MPageFilters>\n <MPageFilterChips v-if=\"activeFilters.length\" label=\"Active\" aria-label=\"Active filters\">\n <MTag\n v-for=\"item in activeFilters\"\n :key=\"item.key\"\n :value=\"item.label\"\n size=\"small\"\n bordered\n closable\n @close=\"clearFilter(item.key)\"\n />\n </MPageFilterChips>\n </MPageContent>\n </div>\n</template>",
|
|
15483
15488
|
"locale": "en-US"
|
|
15484
15489
|
},
|
|
15485
15490
|
{
|
|
@@ -15510,7 +15515,7 @@
|
|
|
15510
15515
|
{
|
|
15511
15516
|
"id": "列表页组合",
|
|
15512
15517
|
"title": "列表页组合",
|
|
15513
|
-
"body": "`MPageContent` 负责内容区 **padding**（默认 `--m-space-6`）与子区块 **gap**（默认 `--m-space-4`），文档预览中外框仅模拟 `MLayoutContent` 边界。\n\n`MPageFilters` 默认是 **无框的控件行**（`variant=\"plain\"`）；需要一条可辨识的工具带时再用 `variant=\"filled\"`（与 Table header 相同的 `--m-color-fill-light`，无圆角）。`MPageHeader` 是页面身份（约 `--m-font-size-xl`）；`MPageToolbar` 是列表操作条（`--m-font-size-md`），不要当成第二页头。\n\n```vue preview src=\"./demos/ListPageStack.zh.vue\"\n```\n\n字段较多时：`MPageFilters collapsible` + `#advanced`
|
|
15518
|
+
"body": "`MPageContent` 负责内容区 **padding**（默认 `--m-space-6`）与子区块 **gap**（默认 `--m-space-4`），文档预览中外框仅模拟 `MLayoutContent` 边界。\n\n**列表高度（按需）**：仅当这是 `MLayout fillViewport` 下的**后台主列表**、表格是页面主任务时，再用 `MPageContent fill` + `MTable fill paginator`（表体滚动、分页贴底）。嵌入表、短页、整页文档滚动不要硬套 `fill`。\n\n`MPageFilters` 默认是 **无框的控件行**（`variant=\"plain\"`）；需要一条可辨识的工具带时再用 `variant=\"filled\"`（与 Table header 相同的 `--m-color-fill-light`，无圆角）。`MPageHeader` 是页面身份（约 `--m-font-size-xl`）；`MPageToolbar` 是列表操作条（`--m-font-size-md`），不要当成第二页头。\n\n```vue preview src=\"./demos/ListPageStack.zh.vue\"\n```\n\n字段较多时：`MPageFilters collapsible` + `#advanced` 折叠高级项；查询/重置放 `#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 各写一遍相同标题链。"
|
|
15514
15519
|
},
|
|
15515
15520
|
{
|
|
15516
15521
|
"id": "表单页组合",
|
|
@@ -15530,10 +15535,10 @@
|
|
|
15530
15535
|
{
|
|
15531
15536
|
"id": "api",
|
|
15532
15537
|
"title": "API",
|
|
15533
|
-
"body": "### MPageContent\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `density` | `'default' \\| 'compact' \\| 'spacious'` | `'default'` | 子区块垂直间距。 |\n| `width` | `'full' \\| 'narrow'` | `'full'` | `narrow` 约 42rem，适合表单页。 |\n| `bands` | `'auto' \\| 'uniform'` | `'auto'` | `auto` 收紧 Header/筛选/Toolbar 与表格之间的 band；`uniform` 仅用 `gap`。 |\n\n`bands=\"auto\"` 时可通过 CSS 变量微调：`--m-page-content-body-lead`、`--m-page-content-tools-pull`（见 `styles.css`）。\n\n### MPageFilters\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `ariaLabel` | `string` | — | 筛选区无障碍名称。 |\n| `variant` | `'plain' \\| 'filled'` | `'plain'` | 表面处理；`filled` 与 Table header 同色浅底，无圆角。 |\n| `collapsible` | `boolean` | `false` | 为 true 且提供 `#advanced`
|
|
15538
|
+
"body": "### MPageContent\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `density` | `'default' \\| 'compact' \\| 'spacious'` | `'default'` | 子区块垂直间距。 |\n| `width` | `'full' \\| 'narrow'` | `'full'` | `narrow` 约 42rem，适合表单页。 |\n| `bands` | `'auto' \\| 'uniform'` | `'auto'` | `auto` 收紧 Header/筛选/Toolbar 与表格之间的 band；`uniform` 仅用 `gap`。 |\n| `fill` | `boolean` | `false` | 撑满 `MLayoutContent` 剩余高度；仅全视口主列表与 `MTable fill` 联用。 |\n\n`bands=\"auto\"` 时可通过 CSS 变量微调：`--m-page-content-body-lead`、`--m-page-content-tools-pull`（见 `styles.css`）。\n\n### MPageFilters\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `ariaLabel` | `string` | — | 筛选区无障碍名称。 |\n| `variant` | `'plain' \\| 'filled'` | `'plain'` | 表面处理；`filled` 与 Table header 同色浅底，无圆角。 |\n| `collapsible` | `boolean` | `false` | 为 true 且提供 `#advanced` 时显示展开/收起（默认文案「高级筛选」/「收起」，右侧 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| `tags` | 标题右侧的状态/分类标记（放 `MTag` / `MStatus`）。 |\n| `actions` | 右侧操作。 |\n\n### MPageSection\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `variant` | `'default' \\| 'muted' \\| 'form' \\| 'actions'` | `'default'` | 视觉变体；`muted` 与 Table header 同色浅底；`form` 渲染为 `MCard` 表面。 |\n| `title` | `string` | — | 可选分组标题。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `actions` | 标题行右侧操作区。 |\n\n### MPageStat\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 指标名称。 |\n| `value` | `string \\| number` | — | 主数值（等宽数字）。 |\n| `trend` | `string` | — | 变化量，渲染为与 `MStatus` 同色的文本。 |\n| `trendSeverity` | `'primary' \\| 'success' \\| 'warn' \\| 'danger' \\| 'secondary'` | `'primary'` | 趋势色。 |\n| `trendDirection` | `'up' \\| 'down'` | — | 在趋势旁显示升/降箭头。 |\n| `trendLabel` | `string` | — | 趋势后的弱说明，如「较上月」。 |\n| `icon` | `string` | — | 右侧弱化图标名。 |\n| `loading` | `boolean` | `false` | 用骨架屏代替数值与趋势。 |\n| `shadow` | `'never' \\| 'hover' \\| 'always'` | `'always'` | 透传 `MCard.shadow`（`layout=\"plain\"` 时无效）。 |\n| `layout` | `'card' \\| 'plain'` | `'card'` | `plain` 无 Card 壳，适合横排 KPI 条。 |\n| `density` | `'default' \\| 'compact'` | `'default'` | `compact` 缩小主数值字号。 |\n| `orientation` | `'stacked' \\| 'inline'` | `'stacked'` | `inline` 标签与数值同一行。 |\n\n### MPagePlaceholder\n\n内部组合 `MEmpty`：默认展示空态插画与说明，可通过默认插槽自定义内容、`#icon` 自定义图标、`#extra` 放置下一步操作。\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `description` | `string` | — | 占位说明。 |\n| `ariaLabel` | `string` | `'Placeholder'` | 无障碍标签。 |\n| `minHeight` | `number \\| string` | `'12rem'` | 最小高度。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 自定义说明内容。 |\n| `icon` | 自定义图标/插画。 |\n| `extra` | 下一步操作区（如按钮）。 |"
|
|
15534
15539
|
}
|
|
15535
15540
|
],
|
|
15536
|
-
"markdown": "---\ntitle: Page\ncategory: 06 / LAYOUT\ndescription: 业务页面组合区块，封装间距、边框与标题层级，少写或不写页面 CSS。\n---\n\n# Page\n\n业务页面组合组件。与 `MLayout` 搭配使用，把列表页筛选区、工具栏、表单分组、KPI 卡片等常见区块的间距和边框内聚到组件内，**优先用 Page 组件拼装页面，而不是每页手写 scoped CSS**。\n\n## 引入\n\n```ts\nimport {\n MPageContent,\n MPageFilterChips,\n MPageFilters,\n MPageHeader,\n MPagePlaceholder,\n MPageSection,\n MPageStat,\n MPageToolbar,\n} from 'morya-ui'\n```\n\n## 列表页组合\n\n`MPageContent` 负责内容区 **padding**（默认 `--m-space-6`）与子区块 **gap**（默认 `--m-space-4`），文档预览中外框仅模拟 `MLayoutContent` 边界。\n\n`MPageFilters` 默认是 **无框的控件行**（`variant=\"plain\"`）；需要一条可辨识的工具带时再用 `variant=\"filled\"`（与 Table header 相同的 `--m-color-fill-light`，无圆角）。`MPageHeader` 是页面身份（约 `--m-font-size-xl`）；`MPageToolbar` 是列表操作条（`--m-font-size-md`），不要当成第二页头。\n\n```vue preview src=\"./demos/ListPageStack.zh.vue\"\n```\n\n字段较多时：`MPageFilters collapsible` + `#advanced`
|
|
15541
|
+
"markdown": "---\ntitle: Page\ncategory: 06 / LAYOUT\ndescription: 业务页面组合区块，封装间距、边框与标题层级，少写或不写页面 CSS。\n---\n\n# Page\n\n业务页面组合组件。与 `MLayout` 搭配使用，把列表页筛选区、工具栏、表单分组、KPI 卡片等常见区块的间距和边框内聚到组件内，**优先用 Page 组件拼装页面，而不是每页手写 scoped CSS**。\n\n## 引入\n\n```ts\nimport {\n MPageContent,\n MPageFilterChips,\n MPageFilters,\n MPageHeader,\n MPagePlaceholder,\n MPageSection,\n MPageStat,\n MPageToolbar,\n} from 'morya-ui'\n```\n\n## 列表页组合\n\n`MPageContent` 负责内容区 **padding**（默认 `--m-space-6`）与子区块 **gap**（默认 `--m-space-4`），文档预览中外框仅模拟 `MLayoutContent` 边界。\n\n**列表高度（按需）**：仅当这是 `MLayout fillViewport` 下的**后台主列表**、表格是页面主任务时，再用 `MPageContent fill` + `MTable fill paginator`（表体滚动、分页贴底）。嵌入表、短页、整页文档滚动不要硬套 `fill`。\n\n`MPageFilters` 默认是 **无框的控件行**（`variant=\"plain\"`）；需要一条可辨识的工具带时再用 `variant=\"filled\"`（与 Table header 相同的 `--m-color-fill-light`，无圆角）。`MPageHeader` 是页面身份（约 `--m-font-size-xl`）；`MPageToolbar` 是列表操作条（`--m-font-size-md`），不要当成第二页头。\n\n```vue preview src=\"./demos/ListPageStack.zh.vue\"\n```\n\n字段较多时：`MPageFilters collapsible` + `#advanced` 折叠高级项；查询/重置放 `#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\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| `tags` | 标题右侧的状态/分类标记（放 `MTag` / `MStatus`）。 |\n| `actions` | 右侧操作。 |\n\n### MPageSection\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `variant` | `'default' \\| 'muted' \\| 'form' \\| 'actions'` | `'default'` | 视觉变体；`muted` 与 Table header 同色浅底；`form` 渲染为 `MCard` 表面。 |\n| `title` | `string` | — | 可选分组标题。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `actions` | 标题行右侧操作区。 |\n\n### MPageStat\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 指标名称。 |\n| `value` | `string \\| number` | — | 主数值（等宽数字）。 |\n| `trend` | `string` | — | 变化量，渲染为与 `MStatus` 同色的文本。 |\n| `trendSeverity` | `'primary' \\| 'success' \\| 'warn' \\| 'danger' \\| 'secondary'` | `'primary'` | 趋势色。 |\n| `trendDirection` | `'up' \\| 'down'` | — | 在趋势旁显示升/降箭头。 |\n| `trendLabel` | `string` | — | 趋势后的弱说明，如「较上月」。 |\n| `icon` | `string` | — | 右侧弱化图标名。 |\n| `loading` | `boolean` | `false` | 用骨架屏代替数值与趋势。 |\n| `shadow` | `'never' \\| 'hover' \\| 'always'` | `'always'` | 透传 `MCard.shadow`（`layout=\"plain\"` 时无效）。 |\n| `layout` | `'card' \\| 'plain'` | `'card'` | `plain` 无 Card 壳，适合横排 KPI 条。 |\n| `density` | `'default' \\| 'compact'` | `'default'` | `compact` 缩小主数值字号。 |\n| `orientation` | `'stacked' \\| 'inline'` | `'stacked'` | `inline` 标签与数值同一行。 |\n\n### MPagePlaceholder\n\n内部组合 `MEmpty`：默认展示空态插画与说明，可通过默认插槽自定义内容、`#icon` 自定义图标、`#extra` 放置下一步操作。\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `description` | `string` | — | 占位说明。 |\n| `ariaLabel` | `string` | `'Placeholder'` | 无障碍标签。 |\n| `minHeight` | `number \\| string` | `'12rem'` | 最小高度。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 自定义说明内容。 |\n| `icon` | 自定义图标/插画。 |\n| `extra` | 下一步操作区（如按钮）。 |\n"
|
|
15537
15542
|
},
|
|
15538
15543
|
"en-US": {
|
|
15539
15544
|
"title": "Page",
|
|
@@ -15552,7 +15557,7 @@
|
|
|
15552
15557
|
{
|
|
15553
15558
|
"id": "list-page-stack",
|
|
15554
15559
|
"title": "List page stack",
|
|
15555
|
-
"body": "`MPageContent` owns content **padding** (default `--m-space-6`) and section **gap** (default `--m-space-4`). The bordered frame in previews simulates `MLayoutContent` only.\n\n`MPageFilters` defaults to a borderless control row (`variant=\"plain\"`); `variant=\"filled\"` uses the same `--m-color-fill-light` as the Table header, with no radius. `MPageHeader` is page identity (`--m-font-size-xl`); `MPageToolbar` is a list action row (`--m-font-size-md`), not a second page title. `MPageStat` supports `trendDirection`, `trendLabel`, `loading`, and `shadow` (defaults to `always`).\n\n```vue preview src=\"./demos/ListPageStack.en.vue\"\n```\n\nUse `MPageFilters collapsible` + `#advanced` for secondary fields; show active criteria with `MPageFilterChips` and closable `MTag`.\n\n```vue preview src=\"./demos/ListFiltersAdvanced.en.vue\"\n```\n\nPut the route trail in `MLayoutHeader` (`MBreadcrumb`) **or** in `MPageHeader` `#breadcrumb` — not both with duplicate titles."
|
|
15560
|
+
"body": "`MPageContent` owns content **padding** (default `--m-space-6`) and section **gap** (default `--m-space-4`). The bordered frame in previews simulates `MLayoutContent` only.\n\n**List height (when it fits):** only for a **full-viewport admin main list** under `MLayout fillViewport`, use `MPageContent fill` + `MTable fill paginator`. Skip `fill` for embedded, short, or whole-page-scroll tables.\n\n`MPageFilters` defaults to a borderless control row (`variant=\"plain\"`); `variant=\"filled\"` uses the same `--m-color-fill-light` as the Table header, with no radius. `MPageHeader` is page identity (`--m-font-size-xl`); `MPageToolbar` is a list action row (`--m-font-size-md`), not a second page title. `MPageStat` supports `trendDirection`, `trendLabel`, `loading`, and `shadow` (defaults to `always`).\n\n```vue preview src=\"./demos/ListPageStack.en.vue\"\n```\n\nUse `MPageFilters collapsible` + `#advanced` for secondary fields; 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\nPut the route trail in `MLayoutHeader` (`MBreadcrumb`) **or** in `MPageHeader` `#breadcrumb` — not both with duplicate titles."
|
|
15556
15561
|
},
|
|
15557
15562
|
{
|
|
15558
15563
|
"id": "dashboard-kpi",
|
|
@@ -15570,7 +15575,7 @@
|
|
|
15570
15575
|
"body": "| Scenario | Use | Avoid |\n| --- | --- | --- |\n| Vertical page stack | `MPageContent` | Hand-written `gap` / `padding` |\n| Filters | `MPageFilters` | Extra bordered `MCard` wrapper |\n| Page identity + page actions | `MPageHeader` | Raw `h1` with no hierarchy |\n| List action row | `MPageToolbar` | Using Toolbar as a second page title |\n| Form surface | `MPageSection variant=\"form\"` | Nested bordered cards |\n| Data table | `MTable` directly | `MCard` around bordered table |\n| KPI metric | `MPageStat` | Custom stat CSS per page |\n\nGolden references: MCP `get_golden_page`."
|
|
15571
15576
|
}
|
|
15572
15577
|
],
|
|
15573
|
-
"markdown": "---\ntitle: Page\ncategory: 06 / LAYOUT\ndescription: Composable page sections for spacing, borders, and headings with little or no custom CSS.\n---\n\n# Page\n\nPage composition components. Use them with `MLayout` to encode filter bars, toolbars, form surfaces, KPI cards, and other admin-page blocks **without rewriting scoped CSS on every page**.\n\n## Import\n\n```ts\nimport {\n MPageContent,\n MPageFilterChips,\n MPageFilters,\n MPageHeader,\n MPagePlaceholder,\n MPageSection,\n MPageStat,\n MPageToolbar,\n} from 'morya-ui'\n```\n\n## List page stack\n\n`MPageContent` owns content **padding** (default `--m-space-6`) and section **gap** (default `--m-space-4`). The bordered frame in previews simulates `MLayoutContent` only.\n\n`MPageFilters` defaults to a borderless control row (`variant=\"plain\"`); `variant=\"filled\"` uses the same `--m-color-fill-light` as the Table header, with no radius. `MPageHeader` is page identity (`--m-font-size-xl`); `MPageToolbar` is a list action row (`--m-font-size-md`), not a second page title. `MPageStat` supports `trendDirection`, `trendLabel`, `loading`, and `shadow` (defaults to `always`).\n\n```vue preview src=\"./demos/ListPageStack.en.vue\"\n```\n\nUse `MPageFilters collapsible` + `#advanced` for secondary fields; show active criteria with `MPageFilterChips` and closable `MTag`.\n\n```vue preview src=\"./demos/ListFiltersAdvanced.en.vue\"\n```\n\nPut the route trail in `MLayoutHeader` (`MBreadcrumb`) **or** in `MPageHeader` `#breadcrumb` — not both with duplicate titles.\n\n## Dashboard KPI\n\nDefault `MPageStat` uses a Card surface; dense strips can use `layout=\"plain\"`, `orientation=\"inline\"`, and `density=\"compact\"`.\n\n```vue preview src=\"./demos/StatVariants.en.vue\"\n```\n\n## Form page stack\n\nUse `MPageContent width=\"narrow\"`, `MPageSection variant=\"form\"`, and `variant=\"actions\"` for the footer.\n\n## Composition rules\n\n| Scenario | Use | Avoid |\n| --- | --- | --- |\n| Vertical page stack | `MPageContent` | Hand-written `gap` / `padding` |\n| Filters | `MPageFilters` | Extra bordered `MCard` wrapper |\n| Page identity + page actions | `MPageHeader` | Raw `h1` with no hierarchy |\n| List action row | `MPageToolbar` | Using Toolbar as a second page title |\n| Form surface | `MPageSection variant=\"form\"` | Nested bordered cards |\n| Data table | `MTable` directly | `MCard` around bordered table |\n| KPI metric | `MPageStat` | Custom stat CSS per page |\n\nGolden references: MCP `get_golden_page`.\n"
|
|
15578
|
+
"markdown": "---\ntitle: Page\ncategory: 06 / LAYOUT\ndescription: Composable page sections for spacing, borders, and headings with little or no custom CSS.\n---\n\n# Page\n\nPage composition components. Use them with `MLayout` to encode filter bars, toolbars, form surfaces, KPI cards, and other admin-page blocks **without rewriting scoped CSS on every page**.\n\n## Import\n\n```ts\nimport {\n MPageContent,\n MPageFilterChips,\n MPageFilters,\n MPageHeader,\n MPagePlaceholder,\n MPageSection,\n MPageStat,\n MPageToolbar,\n} from 'morya-ui'\n```\n\n## List page stack\n\n`MPageContent` owns content **padding** (default `--m-space-6`) and section **gap** (default `--m-space-4`). The bordered frame in previews simulates `MLayoutContent` only.\n\n**List height (when it fits):** only for a **full-viewport admin main list** under `MLayout fillViewport`, use `MPageContent fill` + `MTable fill paginator`. Skip `fill` for embedded, short, or whole-page-scroll tables.\n\n`MPageFilters` defaults to a borderless control row (`variant=\"plain\"`); `variant=\"filled\"` uses the same `--m-color-fill-light` as the Table header, with no radius. `MPageHeader` is page identity (`--m-font-size-xl`); `MPageToolbar` is a list action row (`--m-font-size-md`), not a second page title. `MPageStat` supports `trendDirection`, `trendLabel`, `loading`, and `shadow` (defaults to `always`).\n\n```vue preview src=\"./demos/ListPageStack.en.vue\"\n```\n\nUse `MPageFilters collapsible` + `#advanced` for secondary fields; 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\nPut the route trail in `MLayoutHeader` (`MBreadcrumb`) **or** in `MPageHeader` `#breadcrumb` — not both with duplicate titles.\n\n## Dashboard KPI\n\nDefault `MPageStat` uses a Card surface; dense strips can use `layout=\"plain\"`, `orientation=\"inline\"`, and `density=\"compact\"`.\n\n```vue preview src=\"./demos/StatVariants.en.vue\"\n```\n\n## Form page stack\n\nUse `MPageContent width=\"narrow\"`, `MPageSection variant=\"form\"`, and `variant=\"actions\"` for the footer.\n\n## Composition rules\n\n| Scenario | Use | Avoid |\n| --- | --- | --- |\n| Vertical page stack | `MPageContent` | Hand-written `gap` / `padding` |\n| Filters | `MPageFilters` | Extra bordered `MCard` wrapper |\n| Page identity + page actions | `MPageHeader` | Raw `h1` with no hierarchy |\n| List action row | `MPageToolbar` | Using Toolbar as a second page title |\n| Form surface | `MPageSection variant=\"form\"` | Nested bordered cards |\n| Data table | `MTable` directly | `MCard` around bordered table |\n| KPI metric | `MPageStat` | Custom stat CSS per page |\n\nGolden references: MCP `get_golden_page`.\n"
|
|
15574
15579
|
}
|
|
15575
15580
|
}
|
|
15576
15581
|
},
|
|
@@ -20198,9 +20203,9 @@
|
|
|
20198
20203
|
},
|
|
20199
20204
|
{
|
|
20200
20205
|
"name": "size",
|
|
20201
|
-
"type": "'small' | 'medium' | 'large' | number | [number, number]",
|
|
20206
|
+
"type": "'small' | 'medium' | 'large' | number | string | [number | string, number | string]",
|
|
20202
20207
|
"default": "'medium'",
|
|
20203
|
-
"description": "
|
|
20208
|
+
"description": "间距。数字按 `px`；字符串可为 CSS 长度（如 `8px`、`1rem`、`var(--m-space-4)`）。"
|
|
20204
20209
|
},
|
|
20205
20210
|
{
|
|
20206
20211
|
"name": "wrap",
|
|
@@ -20275,7 +20280,7 @@
|
|
|
20275
20280
|
"sectionId": "size",
|
|
20276
20281
|
"lang": "vue",
|
|
20277
20282
|
"preview": true,
|
|
20278
|
-
"code": "<script setup lang=\"ts\">\nimport { MButton, MSpace } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"grid gap-4\">\n <MSpace size=\"small\">\n <MButton label=\"S\" size=\"small\" />\n <MButton label=\"S\" size=\"small\" severity=\"secondary\" />\n </MSpace>\n <MSpace :size=\"20\">\n <MButton label=\"20px\" size=\"small\" />\n <MButton label=\"20px\" size=\"small\" severity=\"secondary\" />\n </MSpace>\n </div>\n</template>",
|
|
20283
|
+
"code": "<script setup lang=\"ts\">\nimport { MButton, MSpace } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"grid gap-4\">\n <MSpace size=\"small\">\n <MButton label=\"S\" size=\"small\" />\n <MButton label=\"S\" size=\"small\" severity=\"secondary\" />\n </MSpace>\n <MSpace :size=\"20\">\n <MButton label=\"20px\" size=\"small\" />\n <MButton label=\"20px\" size=\"small\" severity=\"secondary\" />\n </MSpace>\n <MSpace size=\"1rem\">\n <MButton label=\"1rem\" size=\"small\" />\n <MButton label=\"1rem\" size=\"small\" severity=\"secondary\" />\n </MSpace>\n </div>\n</template>",
|
|
20279
20284
|
"locale": "zh-CN"
|
|
20280
20285
|
},
|
|
20281
20286
|
{
|
|
@@ -20320,7 +20325,7 @@
|
|
|
20320
20325
|
"sectionId": "size",
|
|
20321
20326
|
"lang": "vue",
|
|
20322
20327
|
"preview": true,
|
|
20323
|
-
"code": "<script setup lang=\"ts\">\nimport { MButton, MSpace } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"grid gap-4\">\n <MSpace size=\"small\">\n <MButton label=\"S\" size=\"small\" />\n <MButton label=\"S\" size=\"small\" severity=\"secondary\" />\n </MSpace>\n <MSpace :size=\"20\">\n <MButton label=\"20px\" size=\"small\" />\n <MButton label=\"20px\" size=\"small\" severity=\"secondary\" />\n </MSpace>\n </div>\n</template>",
|
|
20328
|
+
"code": "<script setup lang=\"ts\">\nimport { MButton, MSpace } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"grid gap-4\">\n <MSpace size=\"small\">\n <MButton label=\"S\" size=\"small\" />\n <MButton label=\"S\" size=\"small\" severity=\"secondary\" />\n </MSpace>\n <MSpace :size=\"20\">\n <MButton label=\"20px\" size=\"small\" />\n <MButton label=\"20px\" size=\"small\" severity=\"secondary\" />\n </MSpace>\n <MSpace size=\"1rem\">\n <MButton label=\"1rem\" size=\"small\" />\n <MButton label=\"1rem\" size=\"small\" severity=\"secondary\" />\n </MSpace>\n </div>\n</template>",
|
|
20324
20329
|
"locale": "en-US"
|
|
20325
20330
|
},
|
|
20326
20331
|
{
|
|
@@ -20371,7 +20376,7 @@
|
|
|
20371
20376
|
{
|
|
20372
20377
|
"id": "props",
|
|
20373
20378
|
"title": "Props",
|
|
20374
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | 交叉轴对齐。 |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | 主轴对齐。 |\n| `inline` | `boolean` | `false` | 是否为 `inline-flex`。 |\n| `vertical` | `boolean` | `false` | 纵向排列。 |\n| `reverse` | `boolean` | `false` | 主轴反向。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| [number, number]` | `'medium'` |
|
|
20379
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | 交叉轴对齐。 |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | 主轴对齐。 |\n| `inline` | `boolean` | `false` | 是否为 `inline-flex`。 |\n| `vertical` | `boolean` | `false` | 纵向排列。 |\n| `reverse` | `boolean` | `false` | 主轴反向。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| string \\| [number \\| string, number \\| string]` | `'medium'` | 间距。数字按 `px`；字符串可为 CSS 长度（如 `8px`、`1rem`、`var(--m-space-4)`）。 |\n| `wrap` | `boolean` | `true` | 是否换行。 |\n| `wrapItem` | `boolean` | `true` | 是否用容器包裹每个子节点。 |\n| `itemClass` / `itemStyle` | — | — | 包裹层 class / style（`wrapItem` 为 true 时生效）。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
20375
20380
|
},
|
|
20376
20381
|
{
|
|
20377
20382
|
"id": "events",
|
|
@@ -20384,7 +20389,7 @@
|
|
|
20384
20389
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 间距子项。 |"
|
|
20385
20390
|
}
|
|
20386
20391
|
],
|
|
20387
|
-
"markdown": "---\ntitle: Space\ncategory: 01 / BASIC\ndescription: 在子元素之间自动加入一致间距的布局容器。\n---\n\n# Space\n\n在子元素之间自动加入间距。新项目更推荐使用 [`Flex`](/components/Flex/)（直接用 `gap`）。\n\n## 引入\n\n```ts\nimport { MSpace } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Vertical\n\n```vue preview src=\"./demos/Vertical.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n未传 `size` 时默认 `medium`。可用 `MConfigProvider` 的 `componentDefaults.Space.size` 改全局间距（与控件 `size` 无关）。\n\n## Without Item Wrapper\n\n`wrapItem=false` 时不再包一层，子节点直接参与 flex 布局（适合已有自身间距的元素）。\n\n```vue preview src=\"./demos/WithoutItemWrapper.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | 交叉轴对齐。 |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | 主轴对齐。 |\n| `inline` | `boolean` | `false` | 是否为 `inline-flex`。 |\n| `vertical` | `boolean` | `false` | 纵向排列。 |\n| `reverse` | `boolean` | `false` | 主轴反向。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| [number, number]` | `'medium'` |
|
|
20392
|
+
"markdown": "---\ntitle: Space\ncategory: 01 / BASIC\ndescription: 在子元素之间自动加入一致间距的布局容器。\n---\n\n# Space\n\n在子元素之间自动加入间距。新项目更推荐使用 [`Flex`](/components/Flex/)（直接用 `gap`）。\n\n## 引入\n\n```ts\nimport { MSpace } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Vertical\n\n```vue preview src=\"./demos/Vertical.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n未传 `size` 时默认 `medium`。可用 `MConfigProvider` 的 `componentDefaults.Space.size` 改全局间距（与控件 `size` 无关）。\n\n## Without Item Wrapper\n\n`wrapItem=false` 时不再包一层，子节点直接参与 flex 布局（适合已有自身间距的元素）。\n\n```vue preview src=\"./demos/WithoutItemWrapper.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | 交叉轴对齐。 |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | 主轴对齐。 |\n| `inline` | `boolean` | `false` | 是否为 `inline-flex`。 |\n| `vertical` | `boolean` | `false` | 纵向排列。 |\n| `reverse` | `boolean` | `false` | 主轴反向。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| string \\| [number \\| string, number \\| string]` | `'medium'` | 间距。数字按 `px`；字符串可为 CSS 长度（如 `8px`、`1rem`、`var(--m-space-4)`）。 |\n| `wrap` | `boolean` | `true` | 是否换行。 |\n| `wrapItem` | `boolean` | `true` | 是否用容器包裹每个子节点。 |\n| `itemClass` / `itemStyle` | — | — | 包裹层 class / style（`wrapItem` 为 true 时生效）。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n无自定义事件。\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 间距子项。 |\n"
|
|
20388
20393
|
},
|
|
20389
20394
|
"en-US": {
|
|
20390
20395
|
"title": "Space",
|
|
@@ -20423,7 +20428,7 @@
|
|
|
20423
20428
|
{
|
|
20424
20429
|
"id": "props",
|
|
20425
20430
|
"title": "Props",
|
|
20426
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | Cross-axis alignment. |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | Main-axis alignment. |\n| `inline` | `boolean` | `false` | Use `inline-flex`. |\n| `vertical` | `boolean` | `false` | Column direction. |\n| `reverse` | `boolean` | `false` | Reverse main axis. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| [number, number]` | `'medium'` | Gap size. |\n| `wrap` | `boolean` | `true` | Allow wrapping. |\n| `wrapItem` | `boolean` | `true` | Wrap each child in a container. |\n| `itemClass` / `itemStyle` | — | — | Wrapper class / style when `wrapItem` is true. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
20431
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | Cross-axis alignment. |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | Main-axis alignment. |\n| `inline` | `boolean` | `false` | Use `inline-flex`. |\n| `vertical` | `boolean` | `false` | Column direction. |\n| `reverse` | `boolean` | `false` | Reverse main axis. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| string \\| [number \\| string, number \\| string]` | `'medium'` | Gap size. Numbers are `px`; strings may be CSS lengths (`8px`, `1rem`, `var(--m-space-4)`). |\n| `wrap` | `boolean` | `true` | Allow wrapping. |\n| `wrapItem` | `boolean` | `true` | Wrap each child in a container. |\n| `itemClass` / `itemStyle` | — | — | Wrapper class / style when `wrapItem` is true. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
20427
20432
|
},
|
|
20428
20433
|
{
|
|
20429
20434
|
"id": "events",
|
|
@@ -20436,7 +20441,7 @@
|
|
|
20436
20441
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Spaced children. |"
|
|
20437
20442
|
}
|
|
20438
20443
|
],
|
|
20439
|
-
"markdown": "---\ntitle: Space\ncategory: 01 / BASIC\ndescription: Layout helper that adds consistent gaps between children.\n---\n\n# Space\n\nAdds consistent spacing between children. Prefer [`Flex`](/components/Flex/) for new layouts (native CSS `gap`).\n\n## Import\n\n```ts\nimport { MSpace } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Vertical\n\n```vue preview src=\"./demos/Vertical.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\nWhen `size` is omitted it defaults to `medium`. Override the global gap with `MConfigProvider` `componentDefaults.Space.size` (independent of control `size`).\n\n## Without Item Wrapper\n\nSet `wrapItem=false` to skip the per-child wrapper (useful when children manage their own layout).\n\n```vue preview src=\"./demos/WithoutItemWrapper.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | Cross-axis alignment. |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | Main-axis alignment. |\n| `inline` | `boolean` | `false` | Use `inline-flex`. |\n| `vertical` | `boolean` | `false` | Column direction. |\n| `reverse` | `boolean` | `false` | Reverse main axis. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| [number, number]` | `'medium'` | Gap size. |\n| `wrap` | `boolean` | `true` | Allow wrapping. |\n| `wrapItem` | `boolean` | `true` | Wrap each child in a container. |\n| `itemClass` / `itemStyle` | — | — | Wrapper class / style when `wrapItem` is true. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\nNo custom events.\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Spaced children. |\n"
|
|
20444
|
+
"markdown": "---\ntitle: Space\ncategory: 01 / BASIC\ndescription: Layout helper that adds consistent gaps between children.\n---\n\n# Space\n\nAdds consistent spacing between children. Prefer [`Flex`](/components/Flex/) for new layouts (native CSS `gap`).\n\n## Import\n\n```ts\nimport { MSpace } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Vertical\n\n```vue preview src=\"./demos/Vertical.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\nWhen `size` is omitted it defaults to `medium`. Override the global gap with `MConfigProvider` `componentDefaults.Space.size` (independent of control `size`).\n\n## Without Item Wrapper\n\nSet `wrapItem=false` to skip the per-child wrapper (useful when children manage their own layout).\n\n```vue preview src=\"./demos/WithoutItemWrapper.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | Cross-axis alignment. |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | Main-axis alignment. |\n| `inline` | `boolean` | `false` | Use `inline-flex`. |\n| `vertical` | `boolean` | `false` | Column direction. |\n| `reverse` | `boolean` | `false` | Reverse main axis. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| string \\| [number \\| string, number \\| string]` | `'medium'` | Gap size. Numbers are `px`; strings may be CSS lengths (`8px`, `1rem`, `var(--m-space-4)`). |\n| `wrap` | `boolean` | `true` | Allow wrapping. |\n| `wrapItem` | `boolean` | `true` | Wrap each child in a container. |\n| `itemClass` / `itemStyle` | — | — | Wrapper class / style when `wrapItem` is true. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\nNo custom events.\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Spaced children. |\n"
|
|
20440
20445
|
}
|
|
20441
20446
|
}
|
|
20442
20447
|
},
|
|
@@ -22137,6 +22142,12 @@
|
|
|
22137
22142
|
"default": "25",
|
|
22138
22143
|
"description": "每页条数。"
|
|
22139
22144
|
},
|
|
22145
|
+
{
|
|
22146
|
+
"name": "fill",
|
|
22147
|
+
"type": "boolean",
|
|
22148
|
+
"default": "false",
|
|
22149
|
+
"description": "撑满父级剩余高度（仅全视口主列表配 `MPageContent fill`）；表体滚动，分页贴底。设置 `maxHeight` / `tableHeight` 时忽略。"
|
|
22150
|
+
},
|
|
22140
22151
|
{
|
|
22141
22152
|
"name": "expandable",
|
|
22142
22153
|
"type": "boolean",
|
|
@@ -22911,7 +22922,7 @@
|
|
|
22911
22922
|
{
|
|
22912
22923
|
"id": "overview",
|
|
22913
22924
|
"title": "",
|
|
22914
|
-
"body": "# Table\n\n`MTable` 用于展示结构化行数据。通过 `columns` 定义列、`rows` 传入数据；内置客户端排序、筛选、分页与行选择，也支持服务端分页模式。\n\n列宽规则：\n\n- 设置了 `width` 的列为固定宽度\n- 未设 `width` 的列以 `minWidth`（默认 `80`）为弹性下限；`fit` 为 `true`（默认）时，剩余宽度按比例分配给弹性列\n- 总最小宽度超出容器时出现横向滚动\n- 需要表体自己滚动时用 `maxHeight` / `tableHeight`；与 `MLayout`
|
|
22925
|
+
"body": "# Table\n\n`MTable` 用于展示结构化行数据。通过 `columns` 定义列、`rows` 传入数据；内置客户端排序、筛选、分页与行选择，也支持服务端分页模式。\n\n列宽规则：\n\n- 设置了 `width` 的列为固定宽度\n- 未设 `width` 的列以 `minWidth`（默认 `80`）为弹性下限；`fit` 为 `true`（默认）时，剩余宽度按比例分配给弹性列\n- 总最小宽度超出容器时出现横向滚动\n- 需要表体自己滚动时用 `maxHeight` / `tableHeight`；与 `MLayout` 根滚动叠用时优先固定表高，避免双层滚动条\n- **全视口主列表（按需）**：`MPageContent fill` + `MTable fill paginator`——表体滚动、分页贴底；嵌入表/短页不要硬套 `fill`"
|
|
22915
22926
|
},
|
|
22916
22927
|
{
|
|
22917
22928
|
"id": "引入",
|
|
@@ -22961,7 +22972,7 @@
|
|
|
22961
22972
|
{
|
|
22962
22973
|
"id": "props",
|
|
22963
22974
|
"title": "Props",
|
|
22964
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | 列定义。 |\n| `rows` | `TableItem[]` | — | 行数据。 |\n| `fit` | `boolean` | `true` | 弹性列是否撑满表格宽度。 |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | 行选择模式。 |\n| `selection` | `TableItem[] \\| null` | `null` | 多选绑定（`v-model:selection`）。 |\n| `selectedItem` | `TableItem \\| null` | `null` | 单选绑定（`v-model:selected-item`）。 |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | 服务端分页/排序选项。 |\n| `serverItemsLength` | `number` | `0` | 服务端总条数。 |\n| `paginator` | `boolean` | `false` | 显示内置分页页脚。 |\n| `page` | `number` | `1` | 当前页（`v-model:page`）。 |\n| `rowsPerPage` | `number` | `25` | 每页条数。 |\n| `expandable` | `boolean` | `false` | 显示展开列（也可由 `#expansion` 插槽隐式启用）。 |\n| `striped` | `boolean` | `false` | 斑马纹行。 |\n| `bordered` | `boolean` | `false` | 单元格边框。 |\n| `highlightCurrent` | `boolean` | `false` | 高亮当前行，配合 `v-model:current-row-key`。 |\n| `rowHover` | `boolean` | `true` | 行 hover 高亮。 |\n| `sortField` / `sortOrder` | — | — | 受控排序字段与方向。 |\n| `sortMode` | `'client' \\| 'emit'` | `'client'` | 客户端排序或仅抛出排序事件。 |\n| `searchField` / `searchValue` | — | — | 客户端搜索。 |\n| `filterOptions` | `TableFilterOption[]` | `null` | 结构化筛选条件。 |\n| `loading` | `boolean` | `false` | 加载中。 |\n| `emptyText` | `string` | — | 空数据文案。 |\n| `emptyDescription` | `string` | — | 空数据补充说明。 |\n| `maxHeight` | `number \\| null` | `null` | 表格最大高度，超出滚动。 |\n| `showOverflowTooltip` | `boolean` | `false` | 全局单元格溢出 Tooltip。 |\n| `rowKey` | `string` | `'id'` | 行唯一键字段。 |\n| `size` | `'sm' \\| 'md' \\| 'lg'` | — | 表格密度。 |\n| `ariaLabel` | `string` | — | — |\n| `bodyExpandRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyItemClassName` | `TableBodyItemClassName` | — | — |\n| `bodyRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyTextDirection` | `TableTextDirection` | — | — |\n| `checkboxColumnWidth` | `number \\| null` | — | — |\n| `clickEventType` | `TableClickEventType` | — | — |\n| `clickRowToExpand` | `boolean` | — | — |\n| `currentRowKey` | `string \\| number \\| null` | — | — |\n| `expandColumnWidth` | `number` | — | — |\n| `expandedRowKeys` | `Array<string \\| number>` | — | — |\n| `filters` | `Record<string, unknown> \\| null` | — | — |\n| `fixedCheckbox` | `boolean` | — | — |\n| `fixedExpand` | `boolean` | — | — |\n| `fixedHeader` | `boolean` | — | — |\n| `fixedIndex` | `boolean` | — | — |\n| `headerClassName` | `string` | — | — |\n| `headerItemClassName` | `TableHeaderItemClassName` | — | — |\n| `headerTextDirection` | `TableTextDirection` | — | — |\n| `hideHeader` | `boolean` | — | — |\n| `hideRowsPerPage` | `boolean` | — | — |\n| `indexColumnWidth` | `number` | — | — |\n| `multiSort` | `boolean` | — | — |\n| `mustSort` | `boolean` | — | — |\n| `preventContextMenuRow` | `boolean` | — | — |\n| `rowsItems` | `number[]` | — | — |\n| `rowsOfPageSeparatorMessage` | `string` | — | — |\n| `rowsPerPageMessage` | `string` | — | — |\n| `showHeader` | `boolean` | — | — |\n| `showIndex` | `boolean` | — | — |\n| `showIndexSymbol` | `string` | — | — |\n| `tableClassName` | `string` | — | — |\n| `tableHeight` | `number \\| null` | — | — |\n| `tableMinHeight` | `number` | — | — |\n| `tableNodeId` | `string` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
22975
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | 列定义。 |\n| `rows` | `TableItem[]` | — | 行数据。 |\n| `fit` | `boolean` | `true` | 弹性列是否撑满表格宽度。 |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | 行选择模式。 |\n| `selection` | `TableItem[] \\| null` | `null` | 多选绑定（`v-model:selection`）。 |\n| `selectedItem` | `TableItem \\| null` | `null` | 单选绑定（`v-model:selected-item`）。 |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | 服务端分页/排序选项。 |\n| `serverItemsLength` | `number` | `0` | 服务端总条数。 |\n| `paginator` | `boolean` | `false` | 显示内置分页页脚。 |\n| `page` | `number` | `1` | 当前页（`v-model:page`）。 |\n| `rowsPerPage` | `number` | `25` | 每页条数。 |\n| `fill` | `boolean` | `false` | 撑满父级剩余高度（仅全视口主列表配 `MPageContent fill`）；表体滚动，分页贴底。设置 `maxHeight` / `tableHeight` 时忽略。 |\n| `expandable` | `boolean` | `false` | 显示展开列（也可由 `#expansion` 插槽隐式启用）。 |\n| `striped` | `boolean` | `false` | 斑马纹行。 |\n| `bordered` | `boolean` | `false` | 单元格边框。 |\n| `highlightCurrent` | `boolean` | `false` | 高亮当前行，配合 `v-model:current-row-key`。 |\n| `rowHover` | `boolean` | `true` | 行 hover 高亮。 |\n| `sortField` / `sortOrder` | — | — | 受控排序字段与方向。 |\n| `sortMode` | `'client' \\| 'emit'` | `'client'` | 客户端排序或仅抛出排序事件。 |\n| `searchField` / `searchValue` | — | — | 客户端搜索。 |\n| `filterOptions` | `TableFilterOption[]` | `null` | 结构化筛选条件。 |\n| `loading` | `boolean` | `false` | 加载中。 |\n| `emptyText` | `string` | — | 空数据文案。 |\n| `emptyDescription` | `string` | — | 空数据补充说明。 |\n| `maxHeight` | `number \\| null` | `null` | 表格最大高度，超出滚动。 |\n| `showOverflowTooltip` | `boolean` | `false` | 全局单元格溢出 Tooltip。 |\n| `rowKey` | `string` | `'id'` | 行唯一键字段。 |\n| `size` | `'sm' \\| 'md' \\| 'lg'` | — | 表格密度。 |\n| `ariaLabel` | `string` | — | — |\n| `bodyExpandRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyItemClassName` | `TableBodyItemClassName` | — | — |\n| `bodyRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyTextDirection` | `TableTextDirection` | — | — |\n| `checkboxColumnWidth` | `number \\| null` | — | — |\n| `clickEventType` | `TableClickEventType` | — | — |\n| `clickRowToExpand` | `boolean` | — | — |\n| `currentRowKey` | `string \\| number \\| null` | — | — |\n| `expandColumnWidth` | `number` | — | — |\n| `expandedRowKeys` | `Array<string \\| number>` | — | — |\n| `filters` | `Record<string, unknown> \\| null` | — | — |\n| `fixedCheckbox` | `boolean` | — | — |\n| `fixedExpand` | `boolean` | — | — |\n| `fixedHeader` | `boolean` | — | — |\n| `fixedIndex` | `boolean` | — | — |\n| `headerClassName` | `string` | — | — |\n| `headerItemClassName` | `TableHeaderItemClassName` | — | — |\n| `headerTextDirection` | `TableTextDirection` | — | — |\n| `hideHeader` | `boolean` | — | — |\n| `hideRowsPerPage` | `boolean` | — | — |\n| `indexColumnWidth` | `number` | — | — |\n| `multiSort` | `boolean` | — | — |\n| `mustSort` | `boolean` | — | — |\n| `preventContextMenuRow` | `boolean` | — | — |\n| `rowsItems` | `number[]` | — | — |\n| `rowsOfPageSeparatorMessage` | `string` | — | — |\n| `rowsPerPageMessage` | `string` | — | — |\n| `showHeader` | `boolean` | — | — |\n| `showIndex` | `boolean` | — | — |\n| `showIndexSymbol` | `string` | — | — |\n| `tableClassName` | `string` | — | — |\n| `tableHeight` | `number \\| null` | — | — |\n| `tableMinHeight` | `number` | — | — |\n| `tableNodeId` | `string` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
22965
22976
|
},
|
|
22966
22977
|
{
|
|
22967
22978
|
"id": "slots",
|
|
@@ -22984,7 +22995,7 @@
|
|
|
22984
22995
|
"body": "<h4 id=\"TableItem\">TableItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n<h4 id=\"TableTextDirection\">TableTextDirection</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableTextDirection = 'left' | 'center' | 'right'\n```\n\n<h4 id=\"TableClickEventType\">TableClickEventType</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableClickEventType = 'single' | 'double'\n```\n\n<h4 id=\"TableFilterOption\">TableFilterOption</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableFilterOption = | { field: string; comparison: 'between'; criteria: [number, number] }\n | { field: string; comparison: '=' | '!='; criteria: number | string }\n | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }\n```\n\n<h4 id=\"TableHeaderItemClassName\">TableHeaderItemClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)\n```\n\n<h4 id=\"TableBodyRowClassName\">TableBodyRowClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)\n```\n\n<h4 id=\"TableBodyItemClassName\">TableBodyItemClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)\n```\n\n\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\n列定义，传给 `columns`：\n\n```ts\ninterface TableColumnDefinition {\n key: string\n label: string\n width?: number\n minWidth?: number\n sortable?: boolean\n fixed?: boolean | 'left' | 'right'\n align?: 'start' | 'center' | 'end' | 'left' | 'right'\n render?: (row: TableItem) => unknown\n filterable?: boolean\n filters?: { label: string; value: string | number }[]\n showOverflowTooltip?: boolean\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\n服务端分页/排序时传给 `serverOptions`，配合 `serverItemsLength`：\n\n```ts\ninterface TableServerOptions {\n page: number\n rowsPerPage: number\n sortBy?: string | string[]\n sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n更多见 [API 类型](/docs/types)。"
|
|
22985
22996
|
}
|
|
22986
22997
|
],
|
|
22987
|
-
"markdown": "---\ntitle: Table\ncategory: 03 / DATA\ndescription: 数据表格。支持排序、筛选、选择、分页、固定列与空/加载态。列宽支持 width / minWidth / fit。\n---\n\n# Table\n\n`MTable` 用于展示结构化行数据。通过 `columns` 定义列、`rows` 传入数据；内置客户端排序、筛选、分页与行选择，也支持服务端分页模式。\n\n列宽规则：\n\n- 设置了 `width` 的列为固定宽度\n- 未设 `width` 的列以 `minWidth`（默认 `80`）为弹性下限；`fit` 为 `true`（默认）时，剩余宽度按比例分配给弹性列\n- 总最小宽度超出容器时出现横向滚动\n- 需要表体自己滚动时用 `maxHeight` / `tableHeight`；与 `MLayout` 根滚动叠用时优先固定表高，避免双层滚动条\n\n## 引入\n\n```ts\nimport type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## 行选择\n\n多选配合 `selection-mode=\"multiple\"` 与 `v-model:selection`；单选使用 `selection-mode=\"single\"` 与 `v-model:selected-item`。\n\n```vue preview src=\"./demos/Selection.zh.vue\"\n```\n\n## 筛选与分页\n\n客户端筛选可通过 `search-value` / `filter-options`；分页开启 `paginator` 并配合 `v-model:page` 与 `rows-per-page`。\n\n```vue preview src=\"./demos/FilterAndPagination.zh.vue\"\n```\n\n## 固定列\n\n列定义中设置 `fixed: 'left'` 可冻结左侧列（当前批次支持左固定）。\n\n```vue preview src=\"./demos/ExpandableRows.zh.vue\"\n```\n\n## 展开行与列渲染\n\n列可通过 `render` 函数渲染；展开行设置 `expandable`，详情内容由插槽 `expansion` 提供。`cell-{key}` 插槽优先于 `render`。\n\n```vue preview src=\"./demos/EmptyAndLoading.zh.vue\"\n```\n\n## 空态与加载\n\n```vue preview src=\"./demos/Demo6.vue\"\n```\n\n## 服务端模式\n\n传入 `server-options` 与 `server-items-length`，通过 `v-model:server-options` 同步页码、每页条数与排序字段。\n\n```vue preview src=\"./demos/Demo7.vue\"\n```\n\n## TableColumnDefinition\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `key` | `string` | 列字段名（绑定行数据的键）。 |\n| `label` | `string` | 列头文案。 |\n| `width` | `number` | 固定列宽（px）。 |\n| `minWidth` | `number` | 弹性列最小宽度，默认 `80`。 |\n| `sortable` | `boolean` | 是否可排序。 |\n| `fixed` | `boolean \\| 'left' \\| 'right'` | 固定列；当前实现左固定。 |\n| `align` | `'start' \\| 'center' \\| 'end'` | 单元格对齐。 |\n| `render` | `(row) => unknown` | 自定义单元格渲染。 |\n| `showOverflowTooltip` | `boolean` | 该列文本溢出时显示 Tooltip。 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | 列定义。 |\n| `rows` | `TableItem[]` | — | 行数据。 |\n| `fit` | `boolean` | `true` | 弹性列是否撑满表格宽度。 |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | 行选择模式。 |\n| `selection` | `TableItem[] \\| null` | `null` | 多选绑定（`v-model:selection`）。 |\n| `selectedItem` | `TableItem \\| null` | `null` | 单选绑定（`v-model:selected-item`）。 |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | 服务端分页/排序选项。 |\n| `serverItemsLength` | `number` | `0` | 服务端总条数。 |\n| `paginator` | `boolean` | `false` | 显示内置分页页脚。 |\n| `page` | `number` | `1` | 当前页（`v-model:page`）。 |\n| `rowsPerPage` | `number` | `25` | 每页条数。 |\n| `expandable` | `boolean` | `false` | 显示展开列（也可由 `#expansion` 插槽隐式启用）。 |\n| `striped` | `boolean` | `false` | 斑马纹行。 |\n| `bordered` | `boolean` | `false` | 单元格边框。 |\n| `highlightCurrent` | `boolean` | `false` | 高亮当前行，配合 `v-model:current-row-key`。 |\n| `rowHover` | `boolean` | `true` | 行 hover 高亮。 |\n| `sortField` / `sortOrder` | — | — | 受控排序字段与方向。 |\n| `sortMode` | `'client' \\| 'emit'` | `'client'` | 客户端排序或仅抛出排序事件。 |\n| `searchField` / `searchValue` | — | — | 客户端搜索。 |\n| `filterOptions` | `TableFilterOption[]` | `null` | 结构化筛选条件。 |\n| `loading` | `boolean` | `false` | 加载中。 |\n| `emptyText` | `string` | — | 空数据文案。 |\n| `emptyDescription` | `string` | — | 空数据补充说明。 |\n| `maxHeight` | `number \\| null` | `null` | 表格最大高度，超出滚动。 |\n| `showOverflowTooltip` | `boolean` | `false` | 全局单元格溢出 Tooltip。 |\n| `rowKey` | `string` | `'id'` | 行唯一键字段。 |\n| `size` | `'sm' \\| 'md' \\| 'lg'` | — | 表格密度。 |\n| `ariaLabel` | `string` | — | — |\n| `bodyExpandRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyItemClassName` | `TableBodyItemClassName` | — | — |\n| `bodyRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyTextDirection` | `TableTextDirection` | — | — |\n| `checkboxColumnWidth` | `number \\| null` | — | — |\n| `clickEventType` | `TableClickEventType` | — | — |\n| `clickRowToExpand` | `boolean` | — | — |\n| `currentRowKey` | `string \\| number \\| null` | — | — |\n| `expandColumnWidth` | `number` | — | — |\n| `expandedRowKeys` | `Array<string \\| number>` | — | — |\n| `filters` | `Record<string, unknown> \\| null` | — | — |\n| `fixedCheckbox` | `boolean` | — | — |\n| `fixedExpand` | `boolean` | — | — |\n| `fixedHeader` | `boolean` | — | — |\n| `fixedIndex` | `boolean` | — | — |\n| `headerClassName` | `string` | — | — |\n| `headerItemClassName` | `TableHeaderItemClassName` | — | — |\n| `headerTextDirection` | `TableTextDirection` | — | — |\n| `hideHeader` | `boolean` | — | — |\n| `hideRowsPerPage` | `boolean` | — | — |\n| `indexColumnWidth` | `number` | — | — |\n| `multiSort` | `boolean` | — | — |\n| `mustSort` | `boolean` | — | — |\n| `preventContextMenuRow` | `boolean` | — | — |\n| `rowsItems` | `number[]` | — | — |\n| `rowsOfPageSeparatorMessage` | `string` | — | — |\n| `rowsPerPageMessage` | `string` | — | — |\n| `showHeader` | `boolean` | — | — |\n| `showIndex` | `boolean` | — | — |\n| `showIndexSymbol` | `string` | — | — |\n| `tableClassName` | `string` | — | — |\n| `tableHeight` | `number \\| null` | — | — |\n| `tableMinHeight` | `number` | — | — |\n| `tableNodeId` | `string` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Slots\n\n| 插槽 | 说明 |\n| --- | --- |\n| `cell-{key}` | 列 `{key}` 单元格，作用域 `{ row, value, column }`。 |\n| `body-cell` | 任意单元格，作用域 `{ row, column, value }`。 |\n| `expansion` | 展开行内容，作用域 `{ row }`。 |\n| `empty` | 自定义空态。 |\n| `loading` | 自定义加载态。 |\n| `pagination` | 自定义分页区域。 |\n| `body` | 自定义 `body` 内容。 |\n| `body-append` | 自定义 `body-append` 内容。 |\n| `body-prepend` | 自定义 `body-prepend` 内容。 |\n| `customize-headers` | 自定义 `customize-headers` 内容。 |\n| `header` | 自定义 `header` 内容。 |\n| `header-*` | 动态插槽（前缀 `header-`）。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `sort` | `{ sortField?, sortOrder? }` | 排序变化。 |\n| `page` | `number` | 页码变化。 |\n| `row-click` | `{ row, index }` | 行单击。 |\n| `current-change` | `row \\| null, oldRow \\| null` | 当前高亮行变化。 |\n| `expand` | `{ row, expanded }` | 行展开。 |\n| `update:selection` | `TableItem[]` | 多选 v-model。 |\n| `update:page` | `number` | 页码 v-model。 |\n| `update:server-options` | `TableServerOptions` | 服务端选项 v-model。 |\n| `update:current-row-key` | `string \\| number \\| null` | 当前行键 v-model。 |\n| `contextmenuRow` | — | — |\n| `deselectRow` | — | — |\n| `filter` | — | — |\n| `selectAll` | — | — |\n| `selectRow` | — | — |\n| `update:expandedRowKeys` | — | — |\n| `update:filters` | — | — |\n| `update:selectedItem` | — | — |\n| `updatePageItems` | — | — |\n| `updateTotalItems` | — | — |\n\n## 实例方法\n\n通过 `ref` 可访问以下分页与筛选控制：\n\n| 方法 / 属性 | 说明 |\n| --- | --- |\n| `currentPageFirstIndex` | 当前页首条记录的索引（无数据时为 `-1`）。 |\n| `currentPageLastIndex` | 当前页末条记录的索引。 |\n| `clientItemsLength` | 数据总条数（服务端模式下为服务端总数）。 |\n| `maxPaginationNumber` | 最大页码。 |\n| `currentPaginationNumber` | 当前页码。 |\n| `isLastPage` / `isFirstPage` | 是否末页 / 首页。 |\n| `nextPage()` / `prevPage()` | 下一页 / 上一页。 |\n| `updatePage(page)` | 跳到指定页码。 |\n| `rowsPerPageOptions` | 每页条数选项。 |\n| `rowsPerPageActiveOption` | 当前生效的每页条数。 |\n| `updateRowsPerPageActiveOption(n)` | 修改每页条数。 |\n| `setFilters(filters)` | 程序化设置筛选条件。 |\n\n## 类型\n\n<h4 id=\"TableItem\">TableItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n<h4 id=\"TableTextDirection\">TableTextDirection</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableTextDirection = 'left' | 'center' | 'right'\n```\n\n<h4 id=\"TableClickEventType\">TableClickEventType</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableClickEventType = 'single' | 'double'\n```\n\n<h4 id=\"TableFilterOption\">TableFilterOption</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableFilterOption = | { field: string; comparison: 'between'; criteria: [number, number] }\n | { field: string; comparison: '=' | '!='; criteria: number | string }\n | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }\n```\n\n<h4 id=\"TableHeaderItemClassName\">TableHeaderItemClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)\n```\n\n<h4 id=\"TableBodyRowClassName\">TableBodyRowClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)\n```\n\n<h4 id=\"TableBodyItemClassName\">TableBodyItemClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)\n```\n\n\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\n列定义，传给 `columns`：\n\n```ts\ninterface TableColumnDefinition {\n key: string\n label: string\n width?: number\n minWidth?: number\n sortable?: boolean\n fixed?: boolean | 'left' | 'right'\n align?: 'start' | 'center' | 'end' | 'left' | 'right'\n render?: (row: TableItem) => unknown\n filterable?: boolean\n filters?: { label: string; value: string | number }[]\n showOverflowTooltip?: boolean\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\n服务端分页/排序时传给 `serverOptions`，配合 `serverItemsLength`：\n\n```ts\ninterface TableServerOptions {\n page: number\n rowsPerPage: number\n sortBy?: string | string[]\n sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n更多见 [API 类型](/docs/types)。\n"
|
|
22998
|
+
"markdown": "---\ntitle: Table\ncategory: 03 / DATA\ndescription: 数据表格。支持排序、筛选、选择、分页、固定列与空/加载态。列宽支持 width / minWidth / fit。\n---\n\n# Table\n\n`MTable` 用于展示结构化行数据。通过 `columns` 定义列、`rows` 传入数据；内置客户端排序、筛选、分页与行选择，也支持服务端分页模式。\n\n列宽规则：\n\n- 设置了 `width` 的列为固定宽度\n- 未设 `width` 的列以 `minWidth`（默认 `80`）为弹性下限；`fit` 为 `true`（默认）时，剩余宽度按比例分配给弹性列\n- 总最小宽度超出容器时出现横向滚动\n- 需要表体自己滚动时用 `maxHeight` / `tableHeight`；与 `MLayout` 根滚动叠用时优先固定表高，避免双层滚动条\n- **全视口主列表（按需）**：`MPageContent fill` + `MTable fill paginator`——表体滚动、分页贴底；嵌入表/短页不要硬套 `fill`\n\n## 引入\n\n```ts\nimport type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## 行选择\n\n多选配合 `selection-mode=\"multiple\"` 与 `v-model:selection`；单选使用 `selection-mode=\"single\"` 与 `v-model:selected-item`。\n\n```vue preview src=\"./demos/Selection.zh.vue\"\n```\n\n## 筛选与分页\n\n客户端筛选可通过 `search-value` / `filter-options`；分页开启 `paginator` 并配合 `v-model:page` 与 `rows-per-page`。\n\n```vue preview src=\"./demos/FilterAndPagination.zh.vue\"\n```\n\n## 固定列\n\n列定义中设置 `fixed: 'left'` 可冻结左侧列（当前批次支持左固定）。\n\n```vue preview src=\"./demos/ExpandableRows.zh.vue\"\n```\n\n## 展开行与列渲染\n\n列可通过 `render` 函数渲染；展开行设置 `expandable`，详情内容由插槽 `expansion` 提供。`cell-{key}` 插槽优先于 `render`。\n\n```vue preview src=\"./demos/EmptyAndLoading.zh.vue\"\n```\n\n## 空态与加载\n\n```vue preview src=\"./demos/Demo6.vue\"\n```\n\n## 服务端模式\n\n传入 `server-options` 与 `server-items-length`，通过 `v-model:server-options` 同步页码、每页条数与排序字段。\n\n```vue preview src=\"./demos/Demo7.vue\"\n```\n\n## TableColumnDefinition\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `key` | `string` | 列字段名（绑定行数据的键）。 |\n| `label` | `string` | 列头文案。 |\n| `width` | `number` | 固定列宽（px）。 |\n| `minWidth` | `number` | 弹性列最小宽度，默认 `80`。 |\n| `sortable` | `boolean` | 是否可排序。 |\n| `fixed` | `boolean \\| 'left' \\| 'right'` | 固定列；当前实现左固定。 |\n| `align` | `'start' \\| 'center' \\| 'end'` | 单元格对齐。 |\n| `render` | `(row) => unknown` | 自定义单元格渲染。 |\n| `showOverflowTooltip` | `boolean` | 该列文本溢出时显示 Tooltip。 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | 列定义。 |\n| `rows` | `TableItem[]` | — | 行数据。 |\n| `fit` | `boolean` | `true` | 弹性列是否撑满表格宽度。 |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | 行选择模式。 |\n| `selection` | `TableItem[] \\| null` | `null` | 多选绑定（`v-model:selection`）。 |\n| `selectedItem` | `TableItem \\| null` | `null` | 单选绑定（`v-model:selected-item`）。 |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | 服务端分页/排序选项。 |\n| `serverItemsLength` | `number` | `0` | 服务端总条数。 |\n| `paginator` | `boolean` | `false` | 显示内置分页页脚。 |\n| `page` | `number` | `1` | 当前页（`v-model:page`）。 |\n| `rowsPerPage` | `number` | `25` | 每页条数。 |\n| `fill` | `boolean` | `false` | 撑满父级剩余高度（仅全视口主列表配 `MPageContent fill`）；表体滚动，分页贴底。设置 `maxHeight` / `tableHeight` 时忽略。 |\n| `expandable` | `boolean` | `false` | 显示展开列（也可由 `#expansion` 插槽隐式启用）。 |\n| `striped` | `boolean` | `false` | 斑马纹行。 |\n| `bordered` | `boolean` | `false` | 单元格边框。 |\n| `highlightCurrent` | `boolean` | `false` | 高亮当前行，配合 `v-model:current-row-key`。 |\n| `rowHover` | `boolean` | `true` | 行 hover 高亮。 |\n| `sortField` / `sortOrder` | — | — | 受控排序字段与方向。 |\n| `sortMode` | `'client' \\| 'emit'` | `'client'` | 客户端排序或仅抛出排序事件。 |\n| `searchField` / `searchValue` | — | — | 客户端搜索。 |\n| `filterOptions` | `TableFilterOption[]` | `null` | 结构化筛选条件。 |\n| `loading` | `boolean` | `false` | 加载中。 |\n| `emptyText` | `string` | — | 空数据文案。 |\n| `emptyDescription` | `string` | — | 空数据补充说明。 |\n| `maxHeight` | `number \\| null` | `null` | 表格最大高度，超出滚动。 |\n| `showOverflowTooltip` | `boolean` | `false` | 全局单元格溢出 Tooltip。 |\n| `rowKey` | `string` | `'id'` | 行唯一键字段。 |\n| `size` | `'sm' \\| 'md' \\| 'lg'` | — | 表格密度。 |\n| `ariaLabel` | `string` | — | — |\n| `bodyExpandRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyItemClassName` | `TableBodyItemClassName` | — | — |\n| `bodyRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyTextDirection` | `TableTextDirection` | — | — |\n| `checkboxColumnWidth` | `number \\| null` | — | — |\n| `clickEventType` | `TableClickEventType` | — | — |\n| `clickRowToExpand` | `boolean` | — | — |\n| `currentRowKey` | `string \\| number \\| null` | — | — |\n| `expandColumnWidth` | `number` | — | — |\n| `expandedRowKeys` | `Array<string \\| number>` | — | — |\n| `filters` | `Record<string, unknown> \\| null` | — | — |\n| `fixedCheckbox` | `boolean` | — | — |\n| `fixedExpand` | `boolean` | — | — |\n| `fixedHeader` | `boolean` | — | — |\n| `fixedIndex` | `boolean` | — | — |\n| `headerClassName` | `string` | — | — |\n| `headerItemClassName` | `TableHeaderItemClassName` | — | — |\n| `headerTextDirection` | `TableTextDirection` | — | — |\n| `hideHeader` | `boolean` | — | — |\n| `hideRowsPerPage` | `boolean` | — | — |\n| `indexColumnWidth` | `number` | — | — |\n| `multiSort` | `boolean` | — | — |\n| `mustSort` | `boolean` | — | — |\n| `preventContextMenuRow` | `boolean` | — | — |\n| `rowsItems` | `number[]` | — | — |\n| `rowsOfPageSeparatorMessage` | `string` | — | — |\n| `rowsPerPageMessage` | `string` | — | — |\n| `showHeader` | `boolean` | — | — |\n| `showIndex` | `boolean` | — | — |\n| `showIndexSymbol` | `string` | — | — |\n| `tableClassName` | `string` | — | — |\n| `tableHeight` | `number \\| null` | — | — |\n| `tableMinHeight` | `number` | — | — |\n| `tableNodeId` | `string` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Slots\n\n| 插槽 | 说明 |\n| --- | --- |\n| `cell-{key}` | 列 `{key}` 单元格，作用域 `{ row, value, column }`。 |\n| `body-cell` | 任意单元格，作用域 `{ row, column, value }`。 |\n| `expansion` | 展开行内容，作用域 `{ row }`。 |\n| `empty` | 自定义空态。 |\n| `loading` | 自定义加载态。 |\n| `pagination` | 自定义分页区域。 |\n| `body` | 自定义 `body` 内容。 |\n| `body-append` | 自定义 `body-append` 内容。 |\n| `body-prepend` | 自定义 `body-prepend` 内容。 |\n| `customize-headers` | 自定义 `customize-headers` 内容。 |\n| `header` | 自定义 `header` 内容。 |\n| `header-*` | 动态插槽（前缀 `header-`）。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `sort` | `{ sortField?, sortOrder? }` | 排序变化。 |\n| `page` | `number` | 页码变化。 |\n| `row-click` | `{ row, index }` | 行单击。 |\n| `current-change` | `row \\| null, oldRow \\| null` | 当前高亮行变化。 |\n| `expand` | `{ row, expanded }` | 行展开。 |\n| `update:selection` | `TableItem[]` | 多选 v-model。 |\n| `update:page` | `number` | 页码 v-model。 |\n| `update:server-options` | `TableServerOptions` | 服务端选项 v-model。 |\n| `update:current-row-key` | `string \\| number \\| null` | 当前行键 v-model。 |\n| `contextmenuRow` | — | — |\n| `deselectRow` | — | — |\n| `filter` | — | — |\n| `selectAll` | — | — |\n| `selectRow` | — | — |\n| `update:expandedRowKeys` | — | — |\n| `update:filters` | — | — |\n| `update:selectedItem` | — | — |\n| `updatePageItems` | — | — |\n| `updateTotalItems` | — | — |\n\n## 实例方法\n\n通过 `ref` 可访问以下分页与筛选控制：\n\n| 方法 / 属性 | 说明 |\n| --- | --- |\n| `currentPageFirstIndex` | 当前页首条记录的索引（无数据时为 `-1`）。 |\n| `currentPageLastIndex` | 当前页末条记录的索引。 |\n| `clientItemsLength` | 数据总条数（服务端模式下为服务端总数）。 |\n| `maxPaginationNumber` | 最大页码。 |\n| `currentPaginationNumber` | 当前页码。 |\n| `isLastPage` / `isFirstPage` | 是否末页 / 首页。 |\n| `nextPage()` / `prevPage()` | 下一页 / 上一页。 |\n| `updatePage(page)` | 跳到指定页码。 |\n| `rowsPerPageOptions` | 每页条数选项。 |\n| `rowsPerPageActiveOption` | 当前生效的每页条数。 |\n| `updateRowsPerPageActiveOption(n)` | 修改每页条数。 |\n| `setFilters(filters)` | 程序化设置筛选条件。 |\n\n## 类型\n\n<h4 id=\"TableItem\">TableItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n<h4 id=\"TableTextDirection\">TableTextDirection</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableTextDirection = 'left' | 'center' | 'right'\n```\n\n<h4 id=\"TableClickEventType\">TableClickEventType</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableClickEventType = 'single' | 'double'\n```\n\n<h4 id=\"TableFilterOption\">TableFilterOption</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableFilterOption = | { field: string; comparison: 'between'; criteria: [number, number] }\n | { field: string; comparison: '=' | '!='; criteria: number | string }\n | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }\n```\n\n<h4 id=\"TableHeaderItemClassName\">TableHeaderItemClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)\n```\n\n<h4 id=\"TableBodyRowClassName\">TableBodyRowClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)\n```\n\n<h4 id=\"TableBodyItemClassName\">TableBodyItemClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)\n```\n\n\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\n列定义，传给 `columns`：\n\n```ts\ninterface TableColumnDefinition {\n key: string\n label: string\n width?: number\n minWidth?: number\n sortable?: boolean\n fixed?: boolean | 'left' | 'right'\n align?: 'start' | 'center' | 'end' | 'left' | 'right'\n render?: (row: TableItem) => unknown\n filterable?: boolean\n filters?: { label: string; value: string | number }[]\n showOverflowTooltip?: boolean\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\n服务端分页/排序时传给 `serverOptions`，配合 `serverItemsLength`：\n\n```ts\ninterface TableServerOptions {\n page: number\n rowsPerPage: number\n sortBy?: string | string[]\n sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n更多见 [API 类型](/docs/types)。\n"
|
|
22988
22999
|
},
|
|
22989
23000
|
"en-US": {
|
|
22990
23001
|
"title": "Table",
|
|
@@ -22993,7 +23004,7 @@
|
|
|
22993
23004
|
{
|
|
22994
23005
|
"id": "overview",
|
|
22995
23006
|
"title": "",
|
|
22996
|
-
"body": "# Table\n\n`MTable` displays structured row data. Define columns with `columns`, pass data with `rows`, and use built-in client-side sort, filter, pagination, and row selection—or switch to server-driven pagination.\n\nColumn width rules:\n\n- Columns with `width` use a fixed width\n- Columns without `width` are flexible with a `minWidth` lower bound (default `80`); when `fit` is `true` (default), remaining width is distributed proportionally\n- Horizontal scrolling appears when the total minimum width exceeds the container\n- Prefer `maxHeight` / `tableHeight` when the table body should scroll on its own; when nested under `MLayout` root scroll, fix the table height to avoid stacked scrollbars"
|
|
23007
|
+
"body": "# Table\n\n`MTable` displays structured row data. Define columns with `columns`, pass data with `rows`, and use built-in client-side sort, filter, pagination, and row selection—or switch to server-driven pagination.\n\nColumn width rules:\n\n- Columns with `width` use a fixed width\n- Columns without `width` are flexible with a `minWidth` lower bound (default `80`); when `fit` is `true` (default), remaining width is distributed proportionally\n- Horizontal scrolling appears when the total minimum width exceeds the container\n- Prefer `maxHeight` / `tableHeight` when the table body should scroll on its own; when nested under `MLayout` root scroll, fix the table height to avoid stacked scrollbars\n- **Full-viewport main lists (when it fits):** `MPageContent fill` + `MTable fill paginator` — body scrolls; pagination at the page bottom. Skip `fill` for embedded/short tables"
|
|
22997
23008
|
},
|
|
22998
23009
|
{
|
|
22999
23010
|
"id": "import",
|
|
@@ -23033,7 +23044,7 @@
|
|
|
23033
23044
|
{
|
|
23034
23045
|
"id": "props",
|
|
23035
23046
|
"title": "Props",
|
|
23036
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | Column definitions. |\n| `rows` | `TableItem[]` | — | Row data. |\n| `fit` | `boolean` | `true` | Flexible columns fill remaining width. |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | Row selection mode. |\n| `selection` | `TableItem[] \\| null` | `null` | Multi-select (`v-model:selection`). |\n| `paginator` | `boolean` | `false` | Built-in pagination footer. |\n| `page` | `number` | `1` | Current page (`v-model:page`). |\n| `rowsPerPage` | `number` | `25` | Page size. |\n| `striped` / `bordered` | `boolean` | `false` | Striped rows / cell borders. |\n| `highlightCurrent` | `boolean` | `false` | Highlight current row. |\n| `loading` / `emptyText` / `emptyDescription` | — | — | Loading and empty states. |\n| `maxHeight` | `number \\| null` | `null` | Scrollable body max height. |\n| `rowKey` | `string` | `'id'` | Stable row key field. |\n| `size` | `'sm' \\| 'md' \\| 'lg'` | — | Table density. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
23047
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | Column definitions. |\n| `rows` | `TableItem[]` | — | Row data. |\n| `fit` | `boolean` | `true` | Flexible columns fill remaining width. |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | Row selection mode. |\n| `selection` | `TableItem[] \\| null` | `null` | Multi-select (`v-model:selection`). |\n| `paginator` | `boolean` | `false` | Built-in pagination footer. |\n| `page` | `number` | `1` | Current page (`v-model:page`). |\n| `rowsPerPage` | `number` | `25` | Page size. |\n| `fill` | `boolean` | `false` | Fill remaining parent height (only for full-viewport main lists with `MPageContent fill`). Body scrolls; paginator stays at the bottom. Ignored when `maxHeight` / `tableHeight` is set. |\n| `striped` / `bordered` | `boolean` | `false` | Striped rows / cell borders. |\n| `highlightCurrent` | `boolean` | `false` | Highlight current row. |\n| `loading` / `emptyText` / `emptyDescription` | — | — | Loading and empty states. |\n| `maxHeight` | `number \\| null` | `null` | Scrollable body max height. |\n| `rowKey` | `string` | `'id'` | Stable row key field. |\n| `size` | `'sm' \\| 'md' \\| 'lg'` | — | Table density. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
23037
23048
|
},
|
|
23038
23049
|
{
|
|
23039
23050
|
"id": "slots",
|
|
@@ -23056,7 +23067,7 @@
|
|
|
23056
23067
|
"body": "<h4 id=\"TableItem\">TableItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\nColumn definition passed to `columns`:\n\n```ts\ninterface TableColumnDefinition {\n key: string\n label: string\n width?: number\n minWidth?: number\n sortable?: boolean\n fixed?: boolean | 'left' | 'right'\n align?: 'start' | 'center' | 'end' | 'left' | 'right'\n render?: (row: TableItem) => unknown\n filterable?: boolean\n filters?: { label: string; value: string | number }[]\n showOverflowTooltip?: boolean\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\nServer-side paging/sorting payload for `serverOptions`, with `serverItemsLength`:\n\n```ts\ninterface TableServerOptions {\n page: number\n rowsPerPage: number\n sortBy?: string | string[]\n sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n`TableItem` is `Record<string, unknown>`. See also [API types](/docs/types)."
|
|
23057
23068
|
}
|
|
23058
23069
|
],
|
|
23059
|
-
"markdown": "---\ntitle: Table\ncategory: 03 / DATA\ndescription: Data table with sorting, filtering, selection, pagination, frozen columns, and empty/loading states. Column width supports width / minWidth / fit.\n---\n\n# Table\n\n`MTable` displays structured row data. Define columns with `columns`, pass data with `rows`, and use built-in client-side sort, filter, pagination, and row selection—or switch to server-driven pagination.\n\nColumn width rules:\n\n- Columns with `width` use a fixed width\n- Columns without `width` are flexible with a `minWidth` lower bound (default `80`); when `fit` is `true` (default), remaining width is distributed proportionally\n- Horizontal scrolling appears when the total minimum width exceeds the container\n- Prefer `maxHeight` / `tableHeight` when the table body should scroll on its own; when nested under `MLayout` root scroll, fix the table height to avoid stacked scrollbars\n\n## Import\n\n```ts\nimport type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Selection\n\nUse `selection-mode=\"multiple\"` with `v-model:selection`, or `selection-mode=\"single\"` with `v-model:selected-item`.\n\n```vue preview src=\"./demos/Selection.en.vue\"\n```\n\n## Filter and pagination\n\nUse `search-value` / `filter-options` for client filtering. Enable `paginator` with `v-model:page` and `rows-per-page`.\n\n```vue preview src=\"./demos/FilterAndPagination.en.vue\"\n```\n\n## Expandable rows\n\nSet `expandable` and provide the `expansion` slot. Column `render` works for custom cells; a `cell-{key}` slot overrides `render`.\n\n```vue preview src=\"./demos/ExpandableRows.en.vue\"\n```\n\n## Empty and loading\n\n```vue preview src=\"./demos/EmptyAndLoading.en.vue\"\n```\n\n## TableColumnDefinition\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `key` | `string` | Field name bound to row data. |\n| `label` | `string` | Column header text. |\n| `width` | `number` | Fixed width in px. |\n| `minWidth` | `number` | Flex column minimum width; default `80`. |\n| `sortable` | `boolean` | Enable sorting. |\n| `fixed` | `boolean \\| 'left' \\| 'right'` | Freeze column (left freeze supported). |\n| `align` | `'start' \\| 'center' \\| 'end'` | Cell alignment. |\n| `render` | `(row) => unknown` | Custom cell renderer. |\n| `showOverflowTooltip` | `boolean` | Tooltip when cell text overflows. |\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | Column definitions. |\n| `rows` | `TableItem[]` | — | Row data. |\n| `fit` | `boolean` | `true` | Flexible columns fill remaining width. |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | Row selection mode. |\n| `selection` | `TableItem[] \\| null` | `null` | Multi-select (`v-model:selection`). |\n| `paginator` | `boolean` | `false` | Built-in pagination footer. |\n| `page` | `number` | `1` | Current page (`v-model:page`). |\n| `rowsPerPage` | `number` | `25` | Page size. |\n| `striped` / `bordered` | `boolean` | `false` | Striped rows / cell borders. |\n| `highlightCurrent` | `boolean` | `false` | Highlight current row. |\n| `loading` / `emptyText` / `emptyDescription` | — | — | Loading and empty states. |\n| `maxHeight` | `number \\| null` | `null` | Scrollable body max height. |\n| `rowKey` | `string` | `'id'` | Stable row key field. |\n| `size` | `'sm' \\| 'md' \\| 'lg'` | — | Table density. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `cell-{key}` | Cell for column `{key}`; scope `{ row, value, column }`. |\n| `body-cell` | Any cell; scope `{ row, column, value }`. |\n| `expansion` | Expanded row; scope `{ row }`. |\n| `empty` / `loading` | Empty and loading placeholders. |\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `sort` | `{ sortField?, sortOrder? }` | Sort changed. |\n| `page` | `number` | Page changed. |\n| `row-click` | `{ row, index }` | Row clicked. |\n| `current-change` | `row \\| null, oldRow \\| null` | Current row changed. |\n| `update:selection` | `TableItem[]` | Selection v-model. |\n| `update:page` | `number` | Page v-model. |\n\n## Instance\n\nPagination and filter controls exposed via `ref`:\n\n| Method / Property | Description |\n| --- | --- |\n| `currentPageFirstIndex` | Index of the first record on the current page (`-1` when empty). |\n| `currentPageLastIndex` | Index of the last record on the current page. |\n| `clientItemsLength` | Total item count (server total in server mode). |\n| `maxPaginationNumber` | Last page number. |\n| `currentPaginationNumber` | Current page number. |\n| `isLastPage` / `isFirstPage` | Whether the current page is the last / first. |\n| `nextPage()` / `prevPage()` | Go to the next / previous page. |\n| `updatePage(page)` | Jump to a page. |\n| `rowsPerPageOptions` | Rows-per-page options. |\n| `rowsPerPageActiveOption` | Active rows-per-page value. |\n| `updateRowsPerPageActiveOption(n)` | Change rows per page. |\n| `setFilters(filters)` | Set filters programmatically. |\n\n## Types\n\n<h4 id=\"TableItem\">TableItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\nColumn definition passed to `columns`:\n\n```ts\ninterface TableColumnDefinition {\n key: string\n label: string\n width?: number\n minWidth?: number\n sortable?: boolean\n fixed?: boolean | 'left' | 'right'\n align?: 'start' | 'center' | 'end' | 'left' | 'right'\n render?: (row: TableItem) => unknown\n filterable?: boolean\n filters?: { label: string; value: string | number }[]\n showOverflowTooltip?: boolean\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\nServer-side paging/sorting payload for `serverOptions`, with `serverItemsLength`:\n\n```ts\ninterface TableServerOptions {\n page: number\n rowsPerPage: number\n sortBy?: string | string[]\n sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n`TableItem` is `Record<string, unknown>`. See also [API types](/docs/types).\n"
|
|
23070
|
+
"markdown": "---\ntitle: Table\ncategory: 03 / DATA\ndescription: Data table with sorting, filtering, selection, pagination, frozen columns, and empty/loading states. Column width supports width / minWidth / fit.\n---\n\n# Table\n\n`MTable` displays structured row data. Define columns with `columns`, pass data with `rows`, and use built-in client-side sort, filter, pagination, and row selection—or switch to server-driven pagination.\n\nColumn width rules:\n\n- Columns with `width` use a fixed width\n- Columns without `width` are flexible with a `minWidth` lower bound (default `80`); when `fit` is `true` (default), remaining width is distributed proportionally\n- Horizontal scrolling appears when the total minimum width exceeds the container\n- Prefer `maxHeight` / `tableHeight` when the table body should scroll on its own; when nested under `MLayout` root scroll, fix the table height to avoid stacked scrollbars\n- **Full-viewport main lists (when it fits):** `MPageContent fill` + `MTable fill paginator` — body scrolls; pagination at the page bottom. Skip `fill` for embedded/short tables\n\n## Import\n\n```ts\nimport type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Selection\n\nUse `selection-mode=\"multiple\"` with `v-model:selection`, or `selection-mode=\"single\"` with `v-model:selected-item`.\n\n```vue preview src=\"./demos/Selection.en.vue\"\n```\n\n## Filter and pagination\n\nUse `search-value` / `filter-options` for client filtering. Enable `paginator` with `v-model:page` and `rows-per-page`.\n\n```vue preview src=\"./demos/FilterAndPagination.en.vue\"\n```\n\n## Expandable rows\n\nSet `expandable` and provide the `expansion` slot. Column `render` works for custom cells; a `cell-{key}` slot overrides `render`.\n\n```vue preview src=\"./demos/ExpandableRows.en.vue\"\n```\n\n## Empty and loading\n\n```vue preview src=\"./demos/EmptyAndLoading.en.vue\"\n```\n\n## TableColumnDefinition\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `key` | `string` | Field name bound to row data. |\n| `label` | `string` | Column header text. |\n| `width` | `number` | Fixed width in px. |\n| `minWidth` | `number` | Flex column minimum width; default `80`. |\n| `sortable` | `boolean` | Enable sorting. |\n| `fixed` | `boolean \\| 'left' \\| 'right'` | Freeze column (left freeze supported). |\n| `align` | `'start' \\| 'center' \\| 'end'` | Cell alignment. |\n| `render` | `(row) => unknown` | Custom cell renderer. |\n| `showOverflowTooltip` | `boolean` | Tooltip when cell text overflows. |\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | Column definitions. |\n| `rows` | `TableItem[]` | — | Row data. |\n| `fit` | `boolean` | `true` | Flexible columns fill remaining width. |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | Row selection mode. |\n| `selection` | `TableItem[] \\| null` | `null` | Multi-select (`v-model:selection`). |\n| `paginator` | `boolean` | `false` | Built-in pagination footer. |\n| `page` | `number` | `1` | Current page (`v-model:page`). |\n| `rowsPerPage` | `number` | `25` | Page size. |\n| `fill` | `boolean` | `false` | Fill remaining parent height (only for full-viewport main lists with `MPageContent fill`). Body scrolls; paginator stays at the bottom. Ignored when `maxHeight` / `tableHeight` is set. |\n| `striped` / `bordered` | `boolean` | `false` | Striped rows / cell borders. |\n| `highlightCurrent` | `boolean` | `false` | Highlight current row. |\n| `loading` / `emptyText` / `emptyDescription` | — | — | Loading and empty states. |\n| `maxHeight` | `number \\| null` | `null` | Scrollable body max height. |\n| `rowKey` | `string` | `'id'` | Stable row key field. |\n| `size` | `'sm' \\| 'md' \\| 'lg'` | — | Table density. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `cell-{key}` | Cell for column `{key}`; scope `{ row, value, column }`. |\n| `body-cell` | Any cell; scope `{ row, column, value }`. |\n| `expansion` | Expanded row; scope `{ row }`. |\n| `empty` / `loading` | Empty and loading placeholders. |\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `sort` | `{ sortField?, sortOrder? }` | Sort changed. |\n| `page` | `number` | Page changed. |\n| `row-click` | `{ row, index }` | Row clicked. |\n| `current-change` | `row \\| null, oldRow \\| null` | Current row changed. |\n| `update:selection` | `TableItem[]` | Selection v-model. |\n| `update:page` | `number` | Page v-model. |\n\n## Instance\n\nPagination and filter controls exposed via `ref`:\n\n| Method / Property | Description |\n| --- | --- |\n| `currentPageFirstIndex` | Index of the first record on the current page (`-1` when empty). |\n| `currentPageLastIndex` | Index of the last record on the current page. |\n| `clientItemsLength` | Total item count (server total in server mode). |\n| `maxPaginationNumber` | Last page number. |\n| `currentPaginationNumber` | Current page number. |\n| `isLastPage` / `isFirstPage` | Whether the current page is the last / first. |\n| `nextPage()` / `prevPage()` | Go to the next / previous page. |\n| `updatePage(page)` | Jump to a page. |\n| `rowsPerPageOptions` | Rows-per-page options. |\n| `rowsPerPageActiveOption` | Active rows-per-page value. |\n| `updateRowsPerPageActiveOption(n)` | Change rows per page. |\n| `setFilters(filters)` | Set filters programmatically. |\n\n## Types\n\n<h4 id=\"TableItem\">TableItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\nColumn definition passed to `columns`:\n\n```ts\ninterface TableColumnDefinition {\n key: string\n label: string\n width?: number\n minWidth?: number\n sortable?: boolean\n fixed?: boolean | 'left' | 'right'\n align?: 'start' | 'center' | 'end' | 'left' | 'right'\n render?: (row: TableItem) => unknown\n filterable?: boolean\n filters?: { label: string; value: string | number }[]\n showOverflowTooltip?: boolean\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\nServer-side paging/sorting payload for `serverOptions`, with `serverItemsLength`:\n\n```ts\ninterface TableServerOptions {\n page: number\n rowsPerPage: number\n sortBy?: string | string[]\n sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n`TableItem` is `Record<string, unknown>`. See also [API types](/docs/types).\n"
|
|
23060
23071
|
}
|
|
23061
23072
|
}
|
|
23062
23073
|
},
|
|
@@ -27005,7 +27016,7 @@
|
|
|
27005
27016
|
"zh-CN": {
|
|
27006
27017
|
"title": "一键接入",
|
|
27007
27018
|
"description": "用 @morya-ui/setup 安装组件库，并按需写入样式、Agent 配置与 MCP。",
|
|
27008
|
-
"markdown": "---\ntitle: 一键接入\norder: 3\ndescription: 用 @morya-ui/setup 安装组件库，并按需写入样式、Agent 配置与 MCP。\n---\n\n# 一键接入\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) 用于在业务 Vue 项目中接入 `morya-ui`：安装依赖、注入样式，并可一并写入 Agent Skill、Cursor 规则与 MCP。手写安装见 [快速上手](/docs/quick-start)；AI 生成页面的约定见 [AI 接入](/docs/ai-setup)。\n\n## 命令\n\n在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n默认会：\n\n1.
|
|
27019
|
+
"markdown": "---\ntitle: 一键接入\norder: 3\ndescription: 用 @morya-ui/setup 安装组件库，并按需写入样式、Agent 配置与 MCP。\n---\n\n# 一键接入\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) 用于在业务 Vue 项目中接入 `morya-ui`：安装依赖、注入样式，并可一并写入 Agent Skill、Cursor 规则与 MCP。手写安装见 [快速上手](/docs/quick-start)；AI 生成页面的约定见 [AI 接入](/docs/ai-setup)。\n\n## 命令\n\n在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n默认会：\n\n1. 将 `morya-ui`（以及项目中已有的 `@morya-ui/*`，如 `@morya-ui/nuxt`）升级到 npm `latest`（按锁文件选用 pnpm / yarn / npm）\n2. 复制 `DESIGN.md`、Agent Skill、Cursor rules 与检查脚本\n3. 合并 `.cursor/mcp.json`，接入 [`@morya-ui/mcp@latest`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. 尝试在入口注入 `import 'morya-ui/styles.css'`\n5. 若缺失则追加 `check:colors` 脚本\n\n也可以按场景选用：\n\n```bash\n# 只升级依赖并注入样式\nnpx @morya-ui/setup app\n\n# 升级依赖 + 写入 AI 配置与 MCP（不注入样式）\nnpx @morya-ui/setup ai\n\n# 非交互：默认 skill / 指定 / 全部\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable\nnpx @morya-ui/setup ai --skills=all\n\n# 只刷新 AI 模板 / MCP，不改动依赖\nnpx @morya-ui/setup ai --skip-install\n```\n\n在 TTY 下，`full` / `ai` 会提示勾选可选 Agent Skill（必选 `morya-ui-pages` 始终写入）。可选 companion 通过 [skills CLI](https://skills.sh/) 安装**最新版**。完成后若写入了 MCP，请 **重启 Cursor**（或重载 MCP）。生成页面前让 Agent 先读 `DESIGN.md`。\n\n## 选项\n\n| Flag | 说明 |\n| --- | --- |\n| `--cwd <dir>` | 目标项目根（默认当前目录） |\n| `--pm pnpm\\|yarn\\|npm` | 指定包管理器 |\n| `--skills <list>` | 逗号分隔的 skill id，或 `all`（跳过交互提示） |\n| `--yes` / `-y` | 使用默认 skill，不提示 |\n| `--force` | 覆盖已有模板文件与 `morya-ui` MCP 条目 |\n| `--dry-run` | 只打印将要执行的操作 |\n| `--skip-install` | 不安装 / 升级 `morya-ui` 与 `@morya-ui/*` |\n| `--skip-template` | 不复制 skill / rules / docs（也不装 companion） |\n| `--skip-mcp` | 不写 MCP 配置 |\n| `--skip-styles` | 不注入样式 import |\n| `--skip-scripts` | 不改 `package.json` scripts |\n\n模板文件默认 **不覆盖**；只有 `--force` 才会覆盖模板与 MCP 条目。勾选的 companion skill 会始终拉取最新版。执行时默认会把相关依赖升到最新；需要跳过时加 `--skip-install`。\n\n### Skills\n\n| Id | 默认 | 安装方式 | 作用 |\n| --- | --- | --- | --- |\n| `morya-ui-pages` | 必选 | 包内 template | 用 `M*` + 黄金布局生成页面 |\n| `frontend-design` | 可选 | skills CLI（`anthropics/skills` 最新） | Express / 品牌向视觉味觉 |\n| `fixing-accessibility` | 可选 | skills CLI（`ibelick/ui-skills` 最新） | 无障碍审计与定向修复 |\n| `impeccable` | 可选 | skills CLI（`pbakaus/impeccable` 最新） | 命名化 polish / 审计 / 改版 |\n\n目录：[`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json)。\n\n示例：只补 MCP：\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```\n\n## 会落到项目里的内容\n\n| 路径 | 作用 |\n| --- | --- |\n| `DESIGN.md` | AI 设计第一信源（原则、应用根、令牌摘要、禁止项） |\n| `.agents/skills/morya-ui-pages/` | 页面生成 Agent Skill（见 [Agent Skill](/docs/agent-skill)） |\n| `.agents/skills/<optional>/` | 勾选时由 skills CLI 写入的最新 companion |\n| `.cursor/rules/` | Cursor 常驻规则 |\n| `scripts/check-raw-colors.mjs` | 裸色值扫描 |\n| `.cursor/mcp.json` | Cursor MCP（`npx -y @morya-ui/mcp@latest`） |\n\n模板源在仓库 [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit)。CLI 不调用 `app.use(MoryaUI)`，也不改 `App.vue`。\n\n## 冲突策略\n\n- 依赖：默认将 `morya-ui@latest` 以及项目中已有的 `@morya-ui/*` 升到最新（可用 `--skip-install` 跳过）\n- 模板文件与 `.cursor/rules/*`：目标已存在则跳过（除非 `--force`）\n- Companion skills（skills CLI）：勾选时始终安装/更新为最新版\n- `.cursor/mcp.json`：合并其它 server；已有 `morya-ui` 条目则跳过（除非 `--force`）；新建或强制覆盖时使用 `@morya-ui/mcp@latest`\n- `check:colors`：仅在缺失时追加（除非 `--force`）\n- 样式：找到入口且尚未引入时才注入\n\n## 下一步\n\n- [快速上手](/docs/quick-start)：组件用法与最小示例 \n- [AI 接入](/docs/ai-setup)：用 AI 生成业务页面时如何配合 Skill / MCP \n- [Agent Skill](/docs/agent-skill) · [Agent MCP](/docs/mcp) \n- [组件](/components)：浏览 API 与预览\n",
|
|
27009
27020
|
"sections": [
|
|
27010
27021
|
{
|
|
27011
27022
|
"title": "",
|
|
@@ -27015,22 +27026,22 @@
|
|
|
27015
27026
|
{
|
|
27016
27027
|
"title": "命令",
|
|
27017
27028
|
"id": "命令",
|
|
27018
|
-
"body": "在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n默认会：\n\n1.
|
|
27029
|
+
"body": "在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n默认会：\n\n1. 将 `morya-ui`（以及项目中已有的 `@morya-ui/*`，如 `@morya-ui/nuxt`）升级到 npm `latest`（按锁文件选用 pnpm / yarn / npm）\n2. 复制 `DESIGN.md`、Agent Skill、Cursor rules 与检查脚本\n3. 合并 `.cursor/mcp.json`，接入 [`@morya-ui/mcp@latest`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. 尝试在入口注入 `import 'morya-ui/styles.css'`\n5. 若缺失则追加 `check:colors` 脚本\n\n也可以按场景选用：\n\n```bash\n# 只升级依赖并注入样式\nnpx @morya-ui/setup app\n\n# 升级依赖 + 写入 AI 配置与 MCP（不注入样式）\nnpx @morya-ui/setup ai\n\n# 非交互：默认 skill / 指定 / 全部\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable\nnpx @morya-ui/setup ai --skills=all\n\n# 只刷新 AI 模板 / MCP，不改动依赖\nnpx @morya-ui/setup ai --skip-install\n```\n\n在 TTY 下，`full` / `ai` 会提示勾选可选 Agent Skill（必选 `morya-ui-pages` 始终写入）。可选 companion 通过 [skills CLI](https://skills.sh/) 安装**最新版**。完成后若写入了 MCP，请 **重启 Cursor**（或重载 MCP）。生成页面前让 Agent 先读 `DESIGN.md`。"
|
|
27019
27030
|
},
|
|
27020
27031
|
{
|
|
27021
27032
|
"title": "选项",
|
|
27022
27033
|
"id": "选项",
|
|
27023
|
-
"body": "| Flag | 说明 |\n| --- | --- |\n| `--cwd <dir>` | 目标项目根（默认当前目录） |\n| `--pm pnpm\\|yarn\\|npm` | 指定包管理器 |\n| `--skills <list>` | 逗号分隔的 skill id，或 `all`（跳过交互提示） |\n| `--yes` / `-y` | 使用默认 skill，不提示 |\n| `--force` | 覆盖已有模板文件与 `morya-ui` MCP 条目 |\n| `--dry-run` | 只打印将要执行的操作 |\n| `--skip-install` |
|
|
27034
|
+
"body": "| Flag | 说明 |\n| --- | --- |\n| `--cwd <dir>` | 目标项目根（默认当前目录） |\n| `--pm pnpm\\|yarn\\|npm` | 指定包管理器 |\n| `--skills <list>` | 逗号分隔的 skill id，或 `all`（跳过交互提示） |\n| `--yes` / `-y` | 使用默认 skill，不提示 |\n| `--force` | 覆盖已有模板文件与 `morya-ui` MCP 条目 |\n| `--dry-run` | 只打印将要执行的操作 |\n| `--skip-install` | 不安装 / 升级 `morya-ui` 与 `@morya-ui/*` |\n| `--skip-template` | 不复制 skill / rules / docs（也不装 companion） |\n| `--skip-mcp` | 不写 MCP 配置 |\n| `--skip-styles` | 不注入样式 import |\n| `--skip-scripts` | 不改 `package.json` scripts |\n\n模板文件默认 **不覆盖**；只有 `--force` 才会覆盖模板与 MCP 条目。勾选的 companion skill 会始终拉取最新版。执行时默认会把相关依赖升到最新；需要跳过时加 `--skip-install`。\n\n### Skills\n\n| Id | 默认 | 安装方式 | 作用 |\n| --- | --- | --- | --- |\n| `morya-ui-pages` | 必选 | 包内 template | 用 `M*` + 黄金布局生成页面 |\n| `frontend-design` | 可选 | skills CLI（`anthropics/skills` 最新） | Express / 品牌向视觉味觉 |\n| `fixing-accessibility` | 可选 | skills CLI（`ibelick/ui-skills` 最新） | 无障碍审计与定向修复 |\n| `impeccable` | 可选 | skills CLI（`pbakaus/impeccable` 最新） | 命名化 polish / 审计 / 改版 |\n\n目录：[`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json)。\n\n示例：只补 MCP：\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```"
|
|
27024
27035
|
},
|
|
27025
27036
|
{
|
|
27026
27037
|
"title": "会落到项目里的内容",
|
|
27027
27038
|
"id": "会落到项目里的内容",
|
|
27028
|
-
"body": "| 路径 | 作用 |\n| --- | --- |\n| `DESIGN.md` | AI 设计第一信源（原则、应用根、令牌摘要、禁止项） |\n| `.agents/skills/morya-ui-pages/` | 页面生成 Agent Skill（见 [Agent Skill](/docs/agent-skill)） |\n| `.agents/skills/<optional>/` | 勾选时由 skills CLI 写入的最新 companion |\n| `.cursor/rules/` | Cursor 常驻规则 |\n| `scripts/check-raw-colors.mjs` | 裸色值扫描 |\n| `.cursor/mcp.json` | Cursor MCP（`npx -y @morya-ui/mcp`） |\n\n模板源在仓库 [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit)。CLI 不调用 `app.use(MoryaUI)`，也不改 `App.vue`。"
|
|
27039
|
+
"body": "| 路径 | 作用 |\n| --- | --- |\n| `DESIGN.md` | AI 设计第一信源（原则、应用根、令牌摘要、禁止项） |\n| `.agents/skills/morya-ui-pages/` | 页面生成 Agent Skill（见 [Agent Skill](/docs/agent-skill)） |\n| `.agents/skills/<optional>/` | 勾选时由 skills CLI 写入的最新 companion |\n| `.cursor/rules/` | Cursor 常驻规则 |\n| `scripts/check-raw-colors.mjs` | 裸色值扫描 |\n| `.cursor/mcp.json` | Cursor MCP（`npx -y @morya-ui/mcp@latest`） |\n\n模板源在仓库 [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit)。CLI 不调用 `app.use(MoryaUI)`，也不改 `App.vue`。"
|
|
27029
27040
|
},
|
|
27030
27041
|
{
|
|
27031
27042
|
"title": "冲突策略",
|
|
27032
27043
|
"id": "冲突策略",
|
|
27033
|
-
"body": "- 模板文件与 `.cursor/rules/*`：目标已存在则跳过（除非 `--force`）\n- Companion skills（skills CLI）：勾选时始终安装/更新为最新版\n- `.cursor/mcp.json`：合并其它 server；已有 `morya-ui` 条目则跳过（除非 `--force
|
|
27044
|
+
"body": "- 依赖：默认将 `morya-ui@latest` 以及项目中已有的 `@morya-ui/*` 升到最新（可用 `--skip-install` 跳过）\n- 模板文件与 `.cursor/rules/*`：目标已存在则跳过（除非 `--force`）\n- Companion skills（skills CLI）：勾选时始终安装/更新为最新版\n- `.cursor/mcp.json`：合并其它 server；已有 `morya-ui` 条目则跳过（除非 `--force`）；新建或强制覆盖时使用 `@morya-ui/mcp@latest`\n- `check:colors`：仅在缺失时追加（除非 `--force`）\n- 样式：找到入口且尚未引入时才注入"
|
|
27034
27045
|
},
|
|
27035
27046
|
{
|
|
27036
27047
|
"title": "下一步",
|
|
@@ -27042,7 +27053,7 @@
|
|
|
27042
27053
|
"en-US": {
|
|
27043
27054
|
"title": "One-shot setup",
|
|
27044
27055
|
"description": "Use @morya-ui/setup to install the library and optionally write styles, Agent config, and MCP.",
|
|
27045
|
-
"markdown": "---\ntitle: One-shot setup\norder: 3\ndescription: Use @morya-ui/setup to install the library and optionally write styles, Agent config, and MCP.\n---\n\n# One-shot setup\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) onboards a consumer Vue app to `morya-ui`: install the dependency, inject styles, and optionally write the Agent skill, Cursor rules, and MCP. For manual install see [Quick start](/docs/quick-start). For AI page-generation workflow see [AI setup](/docs/ai-setup).\n\n## Commands\n\nFrom the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\nBy default this will:\n\n1. Install `morya-ui` (pnpm / yarn / npm from the lockfile)\n2. Copy `DESIGN.md`, Agent skill, Cursor rules, and check scripts\n3. Merge `.cursor/mcp.json` for [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. Try to inject `import 'morya-ui/styles.css'`\n5. Add a `check:colors` script when missing\n\nOther common commands:\n\n```bash\n#
|
|
27056
|
+
"markdown": "---\ntitle: One-shot setup\norder: 3\ndescription: Use @morya-ui/setup to install the library and optionally write styles, Agent config, and MCP.\n---\n\n# One-shot setup\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) onboards a consumer Vue app to `morya-ui`: install the dependency, inject styles, and optionally write the Agent skill, Cursor rules, and MCP. For manual install see [Quick start](/docs/quick-start). For AI page-generation workflow see [AI setup](/docs/ai-setup).\n\n## Commands\n\nFrom the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\nBy default this will:\n\n1. Install / upgrade `morya-ui` and any existing `@morya-ui/*` (e.g. `@morya-ui/nuxt`) to npm `latest` (pnpm / yarn / npm from the lockfile)\n2. Copy `DESIGN.md`, Agent skill, Cursor rules, and check scripts\n3. Merge `.cursor/mcp.json` for [`@morya-ui/mcp@latest`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. Try to inject `import 'morya-ui/styles.css'`\n5. Add a `check:colors` script when missing\n\nOther common commands:\n\n```bash\n# Upgrade deps + styles only\nnpx @morya-ui/setup app\n\n# Upgrade deps + AI config + MCP (skips styles injection)\nnpx @morya-ui/setup ai\n\n# Non-interactive skill selection\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable\nnpx @morya-ui/setup ai --skills=all\n\n# Refresh AI template / MCP without touching dependencies\nnpx @morya-ui/setup ai --skip-install\n```\n\nOn a TTY, `full` / `ai` prompts for optional Agent skills (required `morya-ui-pages` is always included). Optional companions are installed at **latest** via the [skills CLI](https://skills.sh/). If MCP was written, **restart Cursor** (or reload MCP). Have the agent read `DESIGN.md` before generating pages.\n\n## Options\n\n| Flag | Meaning |\n| --- | --- |\n| `--cwd <dir>` | Target project root (default: cwd) |\n| `--pm pnpm\\|yarn\\|npm` | Package manager |\n| `--skills <list>` | Comma-separated skill ids, or `all` (skips the prompt) |\n| `--yes` / `-y` | Use default skills without prompting |\n| `--force` | Overwrite existing template files and the `morya-ui` MCP entry |\n| `--dry-run` | Print actions only |\n| `--skip-install` | Skip install / upgrade of `morya-ui` and `@morya-ui/*` |\n| `--skip-template` | Skip copying skill / rules / docs (also skips companion install) |\n| `--skip-mcp` | Skip writing MCP config |\n| `--skip-styles` | Skip styles import injection |\n| `--skip-scripts` | Skip `package.json` scripts |\n\nTemplate files are **not** overwritten by default; use `--force` for templates and the MCP entry. Selected companion skills always refresh to latest. Dependencies are bumped to latest by default; pass `--skip-install` to leave them alone.\n\n### Skills\n\n| Id | Default | Install | Role |\n| --- | --- | --- | --- |\n| `morya-ui-pages` | required | package template | Page generation with `M*` + golden layouts |\n| `frontend-design` | optional | skills CLI (`anthropics/skills`, latest) | Express / brand visual taste |\n| `fixing-accessibility` | optional | skills CLI (`ibelick/ui-skills`, latest) | A11y audit and targeted fixes |\n| `impeccable` | optional | skills CLI (`pbakaus/impeccable`, latest) | Named polish / audit / redesign |\n\nCatalog: [`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json).\n\nExample: MCP only:\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```\n\n## What lands in the project\n\n| Path | Role |\n| --- | --- |\n| `DESIGN.md` | Primary design brief (principles, app root, token summary, bans) |\n| `.agents/skills/morya-ui-pages/` | Page-generation Agent skill (see [Agent Skill](/docs/agent-skill)) |\n| `.agents/skills/<optional>/` | Latest companion skills via skills CLI when selected |\n| `.cursor/rules/` | Cursor always-on rules |\n| `scripts/check-raw-colors.mjs` | Raw color scan |\n| `.cursor/mcp.json` | Cursor MCP (`npx -y @morya-ui/mcp@latest`) |\n\nTemplate source: [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit). The CLI does not call `app.use(MoryaUI)` or edit `App.vue`.\n\n## Conflict policy\n\n- Dependencies: always install / upgrade `morya-ui@latest` and any existing `@morya-ui/*` to `@latest` unless `--skip-install`\n- Template files and `.cursor/rules/*`: skip if the destination exists (unless `--force`)\n- Companion skills (skills CLI): always install/update to latest when selected\n- `.cursor/mcp.json`: merge other servers; skip an existing `morya-ui` entry unless `--force`; new or forced entries use `@morya-ui/mcp@latest`\n- `check:colors`: add only if missing (unless `--force`)\n- Styles: inject only when an entry is found and the import is not already present\n\n## Next steps\n\n- [Quick start](/docs/quick-start): component usage and a minimal example \n- [AI setup](/docs/ai-setup): how setup relates to Skill / MCP for AI page generation \n- [Agent Skill](/docs/agent-skill) · [Agent MCP](/docs/mcp) \n- [Components](/components): browse APIs and previews\n",
|
|
27046
27057
|
"sections": [
|
|
27047
27058
|
{
|
|
27048
27059
|
"title": "",
|
|
@@ -27052,22 +27063,22 @@
|
|
|
27052
27063
|
{
|
|
27053
27064
|
"title": "Commands",
|
|
27054
27065
|
"id": "commands",
|
|
27055
|
-
"body": "From the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\nBy default this will:\n\n1. Install `morya-ui` (pnpm / yarn / npm from the lockfile)\n2. Copy `DESIGN.md`, Agent skill, Cursor rules, and check scripts\n3. Merge `.cursor/mcp.json` for [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. Try to inject `import 'morya-ui/styles.css'`\n5. Add a `check:colors` script when missing\n\nOther common commands:\n\n```bash\n#
|
|
27066
|
+
"body": "From the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\nBy default this will:\n\n1. Install / upgrade `morya-ui` and any existing `@morya-ui/*` (e.g. `@morya-ui/nuxt`) to npm `latest` (pnpm / yarn / npm from the lockfile)\n2. Copy `DESIGN.md`, Agent skill, Cursor rules, and check scripts\n3. Merge `.cursor/mcp.json` for [`@morya-ui/mcp@latest`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. Try to inject `import 'morya-ui/styles.css'`\n5. Add a `check:colors` script when missing\n\nOther common commands:\n\n```bash\n# Upgrade deps + styles only\nnpx @morya-ui/setup app\n\n# Upgrade deps + AI config + MCP (skips styles injection)\nnpx @morya-ui/setup ai\n\n# Non-interactive skill selection\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable\nnpx @morya-ui/setup ai --skills=all\n\n# Refresh AI template / MCP without touching dependencies\nnpx @morya-ui/setup ai --skip-install\n```\n\nOn a TTY, `full` / `ai` prompts for optional Agent skills (required `morya-ui-pages` is always included). Optional companions are installed at **latest** via the [skills CLI](https://skills.sh/). If MCP was written, **restart Cursor** (or reload MCP). Have the agent read `DESIGN.md` before generating pages."
|
|
27056
27067
|
},
|
|
27057
27068
|
{
|
|
27058
27069
|
"title": "Options",
|
|
27059
27070
|
"id": "options",
|
|
27060
|
-
"body": "| Flag | Meaning |\n| --- | --- |\n| `--cwd <dir>` | Target project root (default: cwd) |\n| `--pm pnpm\\|yarn\\|npm` | Package manager |\n| `--skills <list>` | Comma-separated skill ids, or `all` (skips the prompt) |\n| `--yes` / `-y` | Use default skills without prompting |\n| `--force` | Overwrite existing template files and the `morya-ui` MCP entry |\n| `--dry-run` | Print actions only |\n| `--skip-install` | Skip
|
|
27071
|
+
"body": "| Flag | Meaning |\n| --- | --- |\n| `--cwd <dir>` | Target project root (default: cwd) |\n| `--pm pnpm\\|yarn\\|npm` | Package manager |\n| `--skills <list>` | Comma-separated skill ids, or `all` (skips the prompt) |\n| `--yes` / `-y` | Use default skills without prompting |\n| `--force` | Overwrite existing template files and the `morya-ui` MCP entry |\n| `--dry-run` | Print actions only |\n| `--skip-install` | Skip install / upgrade of `morya-ui` and `@morya-ui/*` |\n| `--skip-template` | Skip copying skill / rules / docs (also skips companion install) |\n| `--skip-mcp` | Skip writing MCP config |\n| `--skip-styles` | Skip styles import injection |\n| `--skip-scripts` | Skip `package.json` scripts |\n\nTemplate files are **not** overwritten by default; use `--force` for templates and the MCP entry. Selected companion skills always refresh to latest. Dependencies are bumped to latest by default; pass `--skip-install` to leave them alone.\n\n### Skills\n\n| Id | Default | Install | Role |\n| --- | --- | --- | --- |\n| `morya-ui-pages` | required | package template | Page generation with `M*` + golden layouts |\n| `frontend-design` | optional | skills CLI (`anthropics/skills`, latest) | Express / brand visual taste |\n| `fixing-accessibility` | optional | skills CLI (`ibelick/ui-skills`, latest) | A11y audit and targeted fixes |\n| `impeccable` | optional | skills CLI (`pbakaus/impeccable`, latest) | Named polish / audit / redesign |\n\nCatalog: [`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json).\n\nExample: MCP only:\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```"
|
|
27061
27072
|
},
|
|
27062
27073
|
{
|
|
27063
27074
|
"title": "What lands in the project",
|
|
27064
27075
|
"id": "what-lands-in-the-project",
|
|
27065
|
-
"body": "| Path | Role |\n| --- | --- |\n| `DESIGN.md` | Primary design brief (principles, app root, token summary, bans) |\n| `.agents/skills/morya-ui-pages/` | Page-generation Agent skill (see [Agent Skill](/docs/agent-skill)) |\n| `.agents/skills/<optional>/` | Latest companion skills via skills CLI when selected |\n| `.cursor/rules/` | Cursor always-on rules |\n| `scripts/check-raw-colors.mjs` | Raw color scan |\n| `.cursor/mcp.json` | Cursor MCP (`npx -y @morya-ui/mcp`) |\n\nTemplate source: [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit). The CLI does not call `app.use(MoryaUI)` or edit `App.vue`."
|
|
27076
|
+
"body": "| Path | Role |\n| --- | --- |\n| `DESIGN.md` | Primary design brief (principles, app root, token summary, bans) |\n| `.agents/skills/morya-ui-pages/` | Page-generation Agent skill (see [Agent Skill](/docs/agent-skill)) |\n| `.agents/skills/<optional>/` | Latest companion skills via skills CLI when selected |\n| `.cursor/rules/` | Cursor always-on rules |\n| `scripts/check-raw-colors.mjs` | Raw color scan |\n| `.cursor/mcp.json` | Cursor MCP (`npx -y @morya-ui/mcp@latest`) |\n\nTemplate source: [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit). The CLI does not call `app.use(MoryaUI)` or edit `App.vue`."
|
|
27066
27077
|
},
|
|
27067
27078
|
{
|
|
27068
27079
|
"title": "Conflict policy",
|
|
27069
27080
|
"id": "conflict-policy",
|
|
27070
|
-
"body": "- Template files and `.cursor/rules/*`: skip if the destination exists (unless `--force`)\n- Companion skills (skills CLI): always install/update to latest when selected\n- `.cursor/mcp.json`: merge other servers; skip an existing `morya-ui` entry unless `--force`\n- `check:colors`: add only if missing (unless `--force`)\n- Styles: inject only when an entry is found and the import is not already present"
|
|
27081
|
+
"body": "- Dependencies: always install / upgrade `morya-ui@latest` and any existing `@morya-ui/*` to `@latest` unless `--skip-install`\n- Template files and `.cursor/rules/*`: skip if the destination exists (unless `--force`)\n- Companion skills (skills CLI): always install/update to latest when selected\n- `.cursor/mcp.json`: merge other servers; skip an existing `morya-ui` entry unless `--force`; new or forced entries use `@morya-ui/mcp@latest`\n- `check:colors`: add only if missing (unless `--force`)\n- Styles: inject only when an entry is found and the import is not already present"
|
|
27071
27082
|
},
|
|
27072
27083
|
{
|
|
27073
27084
|
"title": "Next steps",
|
|
@@ -27801,7 +27812,7 @@
|
|
|
27801
27812
|
"zh-CN": {
|
|
27802
27813
|
"title": "AI 接入",
|
|
27803
27814
|
"description": "用 AI 生成业务页面时，如何配合 @morya-ui/setup、Agent Skill 与 MCP。",
|
|
27804
|
-
"markdown": "---\ntitle: AI 接入\norder: 12\ndescription: 用 AI 生成业务页面时，如何配合 @morya-ui/setup、Agent Skill 与 MCP。\n---\n\n# AI 接入\n\n面向 **用 AI 生成业务页面** 的业务项目。先用 [`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) 把库与 AI 配置装进项目（命令与选项见 [一键接入](/docs/setup)），再按本文约定生成页面。\n\n日常手写代码仍可只 `pnpm add morya-ui`，见 [快速上手](/docs/quick-start)。\n\n## 推荐流程\n\n1. 在业务项目根目录执行 `npx @morya-ui/setup
|
|
27815
|
+
"markdown": "---\ntitle: AI 接入\norder: 12\ndescription: 用 AI 生成业务页面时，如何配合 @morya-ui/setup、Agent Skill 与 MCP。\n---\n\n# AI 接入\n\n面向 **用 AI 生成业务页面** 的业务项目。先用 [`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) 把库与 AI 配置装进项目（命令与选项见 [一键接入](/docs/setup)），再按本文约定生成页面。\n\n日常手写代码仍可只 `pnpm add morya-ui`，见 [快速上手](/docs/quick-start)。\n\n## 推荐流程\n\n1. 在业务项目根目录执行 `npx @morya-ui/setup`（会把 `morya-ui` / 已有 `@morya-ui/*` 升到最新；只要写 AI 配置可用 `npx @morya-ui/setup ai`）\n2. **重启 Cursor**（或重载 MCP）\n3. 生成页面前让 Agent 先读 `DESIGN.md`，需要时再读黄金样例与 [Agent Skill](/docs/agent-skill)\n4. 不确定组件 API 时走 [Agent MCP](/docs/mcp)，不要臆造 props\n\n## 与 Skill / MCP 的关系\n\n- **[一键接入](/docs/setup)**：把库与 AI 配置写入项目 \n- **[Agent Skill](/docs/agent-skill)**：按需指导如何用 `morya-ui` 做页面 \n- **MCP**：运行时检索真实组件 API / 示例 \n\n工具列表与多客户端配置见 [Agent MCP](/docs/mcp)。也可以不跑 setup，按该页手写 MCP。\n\n## 下一步\n\n- [一键接入](/docs/setup)：`@morya-ui/setup` 命令与落地文件 \n- [Agent Skill](/docs/agent-skill)：`morya-ui-pages` 何时用、表面地图 \n- [Agent MCP](/docs/mcp)：工具与客户端配置 \n- [快速上手](/docs/quick-start)：手写安装与最小示例 \n- [组件](/components)：浏览 API 与预览\n",
|
|
27805
27816
|
"sections": [
|
|
27806
27817
|
{
|
|
27807
27818
|
"title": "",
|
|
@@ -27811,7 +27822,7 @@
|
|
|
27811
27822
|
{
|
|
27812
27823
|
"title": "推荐流程",
|
|
27813
27824
|
"id": "推荐流程",
|
|
27814
|
-
"body": "1. 在业务项目根目录执行 `npx @morya-ui/setup
|
|
27825
|
+
"body": "1. 在业务项目根目录执行 `npx @morya-ui/setup`（会把 `morya-ui` / 已有 `@morya-ui/*` 升到最新；只要写 AI 配置可用 `npx @morya-ui/setup ai`）\n2. **重启 Cursor**（或重载 MCP）\n3. 生成页面前让 Agent 先读 `DESIGN.md`，需要时再读黄金样例与 [Agent Skill](/docs/agent-skill)\n4. 不确定组件 API 时走 [Agent MCP](/docs/mcp)，不要臆造 props"
|
|
27815
27826
|
},
|
|
27816
27827
|
{
|
|
27817
27828
|
"title": "与 Skill / MCP 的关系",
|
|
@@ -27828,7 +27839,7 @@
|
|
|
27828
27839
|
"en-US": {
|
|
27829
27840
|
"title": "AI setup",
|
|
27830
27841
|
"description": "How @morya-ui/setup, Agent skill, and MCP work together for AI-assisted pages.",
|
|
27831
|
-
"markdown": "---\ntitle: AI setup\norder: 12\ndescription: How @morya-ui/setup, Agent skill, and MCP work together for AI-assisted pages.\n---\n\n# AI setup\n\nFor **AI-assisted page generation** in consumer apps. Install the library and AI config with [`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) (commands and options: [One-shot setup](/docs/setup)), then follow this page when generating pages.\n\nHand-written apps can still use only `pnpm add morya-ui` — see [Quick start](/docs/quick-start).\n\n## Recommended flow\n\n1. From the app root run `npx @morya-ui/setup` (
|
|
27842
|
+
"markdown": "---\ntitle: AI setup\norder: 12\ndescription: How @morya-ui/setup, Agent skill, and MCP work together for AI-assisted pages.\n---\n\n# AI setup\n\nFor **AI-assisted page generation** in consumer apps. Install the library and AI config with [`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) (commands and options: [One-shot setup](/docs/setup)), then follow this page when generating pages.\n\nHand-written apps can still use only `pnpm add morya-ui` — see [Quick start](/docs/quick-start).\n\n## Recommended flow\n\n1. From the app root run `npx @morya-ui/setup` (upgrades `morya-ui` / existing `@morya-ui/*` to latest; use `npx @morya-ui/setup ai` when you mainly need the AI pack)\n2. **Restart Cursor** (or reload MCP)\n3. Have the agent read `DESIGN.md` before generating pages; use golden pages and [Agent Skill](/docs/agent-skill) as needed\n4. Look up real APIs via [Agent MCP](/docs/mcp) — do not invent props\n\n## Relation to Skill / MCP\n\n- **[One-shot setup](/docs/setup)**: write the library and AI config into the project \n- **[Agent Skill](/docs/agent-skill)**: on-demand guidance for building pages with `morya-ui` \n- **MCP**: runtime doc lookup for AI clients \n\nTools and multi-client configs: [Agent MCP](/docs/mcp). You can configure MCP by hand from that page without running setup.\n\n## Next steps\n\n- [One-shot setup](/docs/setup): `@morya-ui/setup` commands and files \n- [Agent Skill](/docs/agent-skill): when to use `morya-ui-pages`, surface map \n- [Agent MCP](/docs/mcp): tools and client config \n- [Quick start](/docs/quick-start): manual install and a minimal example \n- [Components](/components): browse APIs and previews\n",
|
|
27832
27843
|
"sections": [
|
|
27833
27844
|
{
|
|
27834
27845
|
"title": "",
|
|
@@ -27838,7 +27849,7 @@
|
|
|
27838
27849
|
{
|
|
27839
27850
|
"title": "Recommended flow",
|
|
27840
27851
|
"id": "recommended-flow",
|
|
27841
|
-
"body": "1. From the app root run `npx @morya-ui/setup` (
|
|
27852
|
+
"body": "1. From the app root run `npx @morya-ui/setup` (upgrades `morya-ui` / existing `@morya-ui/*` to latest; use `npx @morya-ui/setup ai` when you mainly need the AI pack)\n2. **Restart Cursor** (or reload MCP)\n3. Have the agent read `DESIGN.md` before generating pages; use golden pages and [Agent Skill](/docs/agent-skill) as needed\n4. Look up real APIs via [Agent MCP](/docs/mcp) — do not invent props"
|
|
27842
27853
|
},
|
|
27843
27854
|
{
|
|
27844
27855
|
"title": "Relation to Skill / MCP",
|