@morya-ui/mcp 0.4.5 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/catalog.json +422 -244
- package/data/example-coverage.json +51 -39
- package/dist/decisions.js +1299 -6
- package/package.json +1 -1
package/data/catalog.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
|
-
"generatedAt": "2026-10-
|
|
2
|
+
"generatedAt": "2026-10-13T08:55:20.652Z",
|
|
3
3
|
"library": {
|
|
4
4
|
"name": "morya-ui",
|
|
5
|
-
"version": "0.
|
|
5
|
+
"version": "0.5.0"
|
|
6
6
|
},
|
|
7
7
|
"mcp": {
|
|
8
8
|
"name": "@morya-ui/mcp",
|
|
9
|
-
"version": "0.
|
|
9
|
+
"version": "0.5.0"
|
|
10
10
|
},
|
|
11
11
|
"components": [
|
|
12
12
|
{
|
|
@@ -4414,6 +4414,419 @@
|
|
|
4414
4414
|
}
|
|
4415
4415
|
}
|
|
4416
4416
|
},
|
|
4417
|
+
{
|
|
4418
|
+
"id": "ColorPicker",
|
|
4419
|
+
"name": "ColorPicker",
|
|
4420
|
+
"exportName": "MColorPicker",
|
|
4421
|
+
"category": "02 / FORM",
|
|
4422
|
+
"description": "颜色选择器，支持面板取色、透明度与预设色板。",
|
|
4423
|
+
"descriptionEn": "Color picker with panel, alpha, and preset swatches.",
|
|
4424
|
+
"import": "import { MColorPicker } from 'morya-ui'",
|
|
4425
|
+
"props": [
|
|
4426
|
+
{
|
|
4427
|
+
"name": "modelValue",
|
|
4428
|
+
"type": "string",
|
|
4429
|
+
"default": "'#1677ff'",
|
|
4430
|
+
"description": "当前颜色值（hex）或 CSS 渐变字符串。"
|
|
4431
|
+
},
|
|
4432
|
+
{
|
|
4433
|
+
"name": "gradient",
|
|
4434
|
+
"type": "boolean",
|
|
4435
|
+
"default": "false",
|
|
4436
|
+
"description": "启用渐变色模式。"
|
|
4437
|
+
},
|
|
4438
|
+
{
|
|
4439
|
+
"name": "disabled",
|
|
4440
|
+
"type": "boolean",
|
|
4441
|
+
"default": "false",
|
|
4442
|
+
"description": "禁用。"
|
|
4443
|
+
},
|
|
4444
|
+
{
|
|
4445
|
+
"name": "disabledAlpha",
|
|
4446
|
+
"type": "boolean",
|
|
4447
|
+
"default": "false",
|
|
4448
|
+
"description": "禁用透明度调节。"
|
|
4449
|
+
},
|
|
4450
|
+
{
|
|
4451
|
+
"name": "allowClear",
|
|
4452
|
+
"type": "boolean",
|
|
4453
|
+
"default": "false",
|
|
4454
|
+
"description": "显示清空按钮。"
|
|
4455
|
+
},
|
|
4456
|
+
{
|
|
4457
|
+
"name": "format",
|
|
4458
|
+
"type": "'hex' | 'rgb' | 'hsb'",
|
|
4459
|
+
"default": "'hex'",
|
|
4460
|
+
"description": "显示格式。"
|
|
4461
|
+
},
|
|
4462
|
+
{
|
|
4463
|
+
"name": "presets",
|
|
4464
|
+
"type": "ColorPickerPreset[]",
|
|
4465
|
+
"default": "—",
|
|
4466
|
+
"description": "预设色板。"
|
|
4467
|
+
},
|
|
4468
|
+
{
|
|
4469
|
+
"name": "showText",
|
|
4470
|
+
"type": "boolean",
|
|
4471
|
+
"default": "false",
|
|
4472
|
+
"description": "在触发器中显示颜色文本。"
|
|
4473
|
+
},
|
|
4474
|
+
{
|
|
4475
|
+
"name": "size",
|
|
4476
|
+
"type": "MSizeInput",
|
|
4477
|
+
"default": "—",
|
|
4478
|
+
"description": "尺寸。"
|
|
4479
|
+
},
|
|
4480
|
+
{
|
|
4481
|
+
"name": "placement",
|
|
4482
|
+
"type": "ColorPickerPlacement",
|
|
4483
|
+
"default": "'bottom-start'",
|
|
4484
|
+
"description": "弹层位置。"
|
|
4485
|
+
},
|
|
4486
|
+
{
|
|
4487
|
+
"name": "teleport",
|
|
4488
|
+
"type": "boolean",
|
|
4489
|
+
"default": "true",
|
|
4490
|
+
"description": "是否 teleport 到 body。"
|
|
4491
|
+
},
|
|
4492
|
+
{
|
|
4493
|
+
"name": "appendTo",
|
|
4494
|
+
"type": "MAppendTo",
|
|
4495
|
+
"default": "'body'",
|
|
4496
|
+
"description": "挂载目标。"
|
|
4497
|
+
},
|
|
4498
|
+
{
|
|
4499
|
+
"name": "transition",
|
|
4500
|
+
"type": "MotionPresetId | false",
|
|
4501
|
+
"default": "—",
|
|
4502
|
+
"description": "过渡动画。"
|
|
4503
|
+
},
|
|
4504
|
+
{
|
|
4505
|
+
"name": "pt",
|
|
4506
|
+
"type": "FieldPassThrough",
|
|
4507
|
+
"default": "—",
|
|
4508
|
+
"description": "DOM 透传。"
|
|
4509
|
+
},
|
|
4510
|
+
{
|
|
4511
|
+
"name": "label",
|
|
4512
|
+
"type": "string",
|
|
4513
|
+
"description": "分组标签。"
|
|
4514
|
+
},
|
|
4515
|
+
{
|
|
4516
|
+
"name": "colors",
|
|
4517
|
+
"type": "string[]",
|
|
4518
|
+
"description": "颜色数组。"
|
|
4519
|
+
},
|
|
4520
|
+
{
|
|
4521
|
+
"name": "defaultOpen",
|
|
4522
|
+
"type": "boolean",
|
|
4523
|
+
"description": "默认展开。"
|
|
4524
|
+
}
|
|
4525
|
+
],
|
|
4526
|
+
"events": [
|
|
4527
|
+
{
|
|
4528
|
+
"name": "update:modelValue",
|
|
4529
|
+
"payload": "string",
|
|
4530
|
+
"description": "颜色变化。"
|
|
4531
|
+
},
|
|
4532
|
+
{
|
|
4533
|
+
"name": "change",
|
|
4534
|
+
"payload": "string",
|
|
4535
|
+
"description": "颜色变化（同 `update:modelValue`）。"
|
|
4536
|
+
},
|
|
4537
|
+
{
|
|
4538
|
+
"name": "clear",
|
|
4539
|
+
"payload": "—",
|
|
4540
|
+
"description": "点击清空。"
|
|
4541
|
+
},
|
|
4542
|
+
{
|
|
4543
|
+
"name": "show",
|
|
4544
|
+
"payload": "—",
|
|
4545
|
+
"description": "面板打开。"
|
|
4546
|
+
},
|
|
4547
|
+
{
|
|
4548
|
+
"name": "hide",
|
|
4549
|
+
"payload": "—",
|
|
4550
|
+
"description": "面板关闭。"
|
|
4551
|
+
}
|
|
4552
|
+
],
|
|
4553
|
+
"slots": [
|
|
4554
|
+
{
|
|
4555
|
+
"name": "—",
|
|
4556
|
+
"description": "暂无自定义插槽。"
|
|
4557
|
+
}
|
|
4558
|
+
],
|
|
4559
|
+
"methods": [
|
|
4560
|
+
{
|
|
4561
|
+
"name": "open",
|
|
4562
|
+
"description": "打开颜色选择面板。"
|
|
4563
|
+
},
|
|
4564
|
+
{
|
|
4565
|
+
"name": "close",
|
|
4566
|
+
"description": "关闭颜色选择面板。"
|
|
4567
|
+
},
|
|
4568
|
+
{
|
|
4569
|
+
"name": "toggle",
|
|
4570
|
+
"description": "切换颜色选择面板的显示状态。"
|
|
4571
|
+
}
|
|
4572
|
+
],
|
|
4573
|
+
"examples": [
|
|
4574
|
+
{
|
|
4575
|
+
"id": "引入-1",
|
|
4576
|
+
"section": "引入",
|
|
4577
|
+
"sectionId": "引入",
|
|
4578
|
+
"lang": "ts",
|
|
4579
|
+
"preview": false,
|
|
4580
|
+
"code": "import { MColorPicker } from \"morya-ui\";",
|
|
4581
|
+
"locale": "zh-CN"
|
|
4582
|
+
},
|
|
4583
|
+
{
|
|
4584
|
+
"id": "基础用法-1",
|
|
4585
|
+
"section": "基础用法",
|
|
4586
|
+
"sectionId": "基础用法",
|
|
4587
|
+
"lang": "vue",
|
|
4588
|
+
"preview": true,
|
|
4589
|
+
"code": "<script setup lang=\"ts\">\nimport { MColorPicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#1677ff')\n</script>\n\n<template>\n <MColorPicker v-model=\"color\" />\n</template>",
|
|
4590
|
+
"locale": "zh-CN"
|
|
4591
|
+
},
|
|
4592
|
+
{
|
|
4593
|
+
"id": "预设色板-1",
|
|
4594
|
+
"section": "预设色板",
|
|
4595
|
+
"sectionId": "预设色板",
|
|
4596
|
+
"lang": "vue",
|
|
4597
|
+
"preview": true,
|
|
4598
|
+
"code": "<script setup lang=\"ts\">\nimport { MColorPicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#1677ff')\n</script>\n\n<template>\n <MColorPicker\n v-model=\"color\"\n :presets=\"[\n { label: 'Recommended', colors: ['#1677ff', '#52c41a', '#faad14', '#f5222d', '#722ed1'] },\n ]\"\n />\n</template>",
|
|
4599
|
+
"locale": "zh-CN"
|
|
4600
|
+
},
|
|
4601
|
+
{
|
|
4602
|
+
"id": "显示文本与清空-1",
|
|
4603
|
+
"section": "显示文本与清空",
|
|
4604
|
+
"sectionId": "显示文本与清空",
|
|
4605
|
+
"lang": "vue",
|
|
4606
|
+
"preview": true,
|
|
4607
|
+
"code": "<script setup lang=\"ts\">\nimport { MColorPicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#1677ff')\n</script>\n\n<template>\n <MColorPicker v-model=\"color\" show-text allow-clear />\n</template>",
|
|
4608
|
+
"locale": "zh-CN"
|
|
4609
|
+
},
|
|
4610
|
+
{
|
|
4611
|
+
"id": "渐变色-1",
|
|
4612
|
+
"section": "渐变色",
|
|
4613
|
+
"sectionId": "渐变色",
|
|
4614
|
+
"lang": "vue",
|
|
4615
|
+
"preview": true,
|
|
4616
|
+
"code": "<script setup lang=\"ts\">\nimport { MColorPicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#1677ff')\n</script>\n\n<template>\n <MColorPicker v-model=\"color\" gradient />\n</template>",
|
|
4617
|
+
"locale": "zh-CN"
|
|
4618
|
+
},
|
|
4619
|
+
{
|
|
4620
|
+
"id": "渐变值绑定-1",
|
|
4621
|
+
"section": "渐变值绑定",
|
|
4622
|
+
"sectionId": "渐变值绑定",
|
|
4623
|
+
"lang": "vue",
|
|
4624
|
+
"preview": true,
|
|
4625
|
+
"code": "<script setup lang=\"ts\">\nimport { MColorPicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('linear-gradient(90deg, #1677ff 0%, #ff4d4f 100%)')\n</script>\n\n<template>\n <MColorPicker v-model=\"color\" gradient show-text />\n</template>",
|
|
4626
|
+
"locale": "zh-CN"
|
|
4627
|
+
},
|
|
4628
|
+
{
|
|
4629
|
+
"id": "import-1",
|
|
4630
|
+
"section": "Import",
|
|
4631
|
+
"sectionId": "import",
|
|
4632
|
+
"lang": "ts",
|
|
4633
|
+
"preview": false,
|
|
4634
|
+
"code": "import { MColorPicker } from \"morya-ui\";",
|
|
4635
|
+
"locale": "en-US"
|
|
4636
|
+
},
|
|
4637
|
+
{
|
|
4638
|
+
"id": "basic-1",
|
|
4639
|
+
"section": "Basic",
|
|
4640
|
+
"sectionId": "basic",
|
|
4641
|
+
"lang": "vue",
|
|
4642
|
+
"preview": true,
|
|
4643
|
+
"code": "<script setup lang=\"ts\">\nimport { MColorPicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#1677ff')\n</script>\n\n<template>\n <MColorPicker v-model=\"color\" />\n</template>",
|
|
4644
|
+
"locale": "en-US"
|
|
4645
|
+
},
|
|
4646
|
+
{
|
|
4647
|
+
"id": "presets-1",
|
|
4648
|
+
"section": "Presets",
|
|
4649
|
+
"sectionId": "presets",
|
|
4650
|
+
"lang": "vue",
|
|
4651
|
+
"preview": true,
|
|
4652
|
+
"code": "<script setup lang=\"ts\">\nimport { MColorPicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#1677ff')\n</script>\n\n<template>\n <MColorPicker\n v-model=\"color\"\n :presets=\"[\n { label: 'Recommended', colors: ['#1677ff', '#52c41a', '#faad14', '#f5222d', '#722ed1'] },\n ]\"\n />\n</template>",
|
|
4653
|
+
"locale": "en-US"
|
|
4654
|
+
},
|
|
4655
|
+
{
|
|
4656
|
+
"id": "show-text-and-clear-1",
|
|
4657
|
+
"section": "Show text and clear",
|
|
4658
|
+
"sectionId": "show-text-and-clear",
|
|
4659
|
+
"lang": "vue",
|
|
4660
|
+
"preview": true,
|
|
4661
|
+
"code": "<script setup lang=\"ts\">\nimport { MColorPicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#1677ff')\n</script>\n\n<template>\n <MColorPicker v-model=\"color\" show-text allow-clear />\n</template>",
|
|
4662
|
+
"locale": "en-US"
|
|
4663
|
+
},
|
|
4664
|
+
{
|
|
4665
|
+
"id": "gradient-1",
|
|
4666
|
+
"section": "Gradient",
|
|
4667
|
+
"sectionId": "gradient",
|
|
4668
|
+
"lang": "vue",
|
|
4669
|
+
"preview": true,
|
|
4670
|
+
"code": "<script setup lang=\"ts\">\nimport { MColorPicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#1677ff')\n</script>\n\n<template>\n <MColorPicker v-model=\"color\" gradient />\n</template>",
|
|
4671
|
+
"locale": "en-US"
|
|
4672
|
+
},
|
|
4673
|
+
{
|
|
4674
|
+
"id": "gradient-value-binding-1",
|
|
4675
|
+
"section": "Gradient Value Binding",
|
|
4676
|
+
"sectionId": "gradient-value-binding",
|
|
4677
|
+
"lang": "vue",
|
|
4678
|
+
"preview": true,
|
|
4679
|
+
"code": "<script setup lang=\"ts\">\nimport { MColorPicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('linear-gradient(90deg, #1677ff 0%, #ff4d4f 100%)')\n</script>\n\n<template>\n <MColorPicker v-model=\"color\" gradient show-text />\n</template>",
|
|
4680
|
+
"locale": "en-US"
|
|
4681
|
+
}
|
|
4682
|
+
],
|
|
4683
|
+
"locales": {
|
|
4684
|
+
"zh-CN": {
|
|
4685
|
+
"title": "ColorPicker",
|
|
4686
|
+
"description": "颜色选择器，支持面板取色、透明度与预设色板。",
|
|
4687
|
+
"sections": [
|
|
4688
|
+
{
|
|
4689
|
+
"id": "overview",
|
|
4690
|
+
"title": "",
|
|
4691
|
+
"body": "# ColorPicker\n\n颜色选择器，支持 HSB 面板取色、透明度调节、预设色板与多种格式显示。"
|
|
4692
|
+
},
|
|
4693
|
+
{
|
|
4694
|
+
"id": "何时使用",
|
|
4695
|
+
"title": "何时使用",
|
|
4696
|
+
"body": "- 需要完整的颜色选择体验，而非仅输入 hex。\n- 需要调节透明度（alpha）时。\n- 需要提供预设色板供用户快速选择时。"
|
|
4697
|
+
},
|
|
4698
|
+
{
|
|
4699
|
+
"id": "引入",
|
|
4700
|
+
"title": "引入",
|
|
4701
|
+
"body": "```ts\nimport { MColorPicker } from \"morya-ui\";\n```"
|
|
4702
|
+
},
|
|
4703
|
+
{
|
|
4704
|
+
"id": "基础用法",
|
|
4705
|
+
"title": "基础用法",
|
|
4706
|
+
"body": "```vue preview src=\"./demos/Basic.vue\"\n```"
|
|
4707
|
+
},
|
|
4708
|
+
{
|
|
4709
|
+
"id": "预设色板",
|
|
4710
|
+
"title": "预设色板",
|
|
4711
|
+
"body": "```vue preview src=\"./demos/Presets.vue\"\n```"
|
|
4712
|
+
},
|
|
4713
|
+
{
|
|
4714
|
+
"id": "显示文本与清空",
|
|
4715
|
+
"title": "显示文本与清空",
|
|
4716
|
+
"body": "```vue preview src=\"./demos/ShowText.vue\"\n```"
|
|
4717
|
+
},
|
|
4718
|
+
{
|
|
4719
|
+
"id": "渐变色",
|
|
4720
|
+
"title": "渐变色",
|
|
4721
|
+
"body": "启用 `gradient` 后支持线性/径向渐变编辑，可添加/删除/拖拽色标。\n\n```vue preview src=\"./demos/Gradient.vue\"\n```"
|
|
4722
|
+
},
|
|
4723
|
+
{
|
|
4724
|
+
"id": "渐变值绑定",
|
|
4725
|
+
"title": "渐变值绑定",
|
|
4726
|
+
"body": "```vue preview src=\"./demos/GradientValue.vue\"\n```"
|
|
4727
|
+
},
|
|
4728
|
+
{
|
|
4729
|
+
"id": "props",
|
|
4730
|
+
"title": "Props",
|
|
4731
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `'#1677ff'` | 当前颜色值（hex）或 CSS 渐变字符串。 |\n| `gradient` | `boolean` | `false` | 启用渐变色模式。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `disabledAlpha` | `boolean` | `false` | 禁用透明度调节。 |\n| `allowClear` | `boolean` | `false` | 显示清空按钮。 |\n| `format` | `'hex' \\| 'rgb' \\| 'hsb'` | `'hex'` | 显示格式。 |\n| `presets` | `ColorPickerPreset[]` | — | 预设色板。 |\n| `showText` | `boolean` | `false` | 在触发器中显示颜色文本。 |\n| `size` | `MSizeInput` | — | 尺寸。 |\n| `placement` | `ColorPickerPlacement` | `'bottom-start'` | 弹层位置。 |\n| `teleport` | `boolean` | `true` | 是否 teleport 到 body。 |\n| `appendTo` | `MAppendTo` | `'body'` | 挂载目标。 |\n| `transition` | `MotionPresetId \\| false` | — | 过渡动画。 |\n| `pt` | `FieldPassThrough` | — | DOM 透传。 |"
|
|
4732
|
+
},
|
|
4733
|
+
{
|
|
4734
|
+
"id": "events",
|
|
4735
|
+
"title": "Events",
|
|
4736
|
+
"body": "| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string` | 颜色变化。 |\n| `change` | `string` | 颜色变化（同 `update:modelValue`）。 |\n| `clear` | — | 点击清空。 |\n| `show` | — | 面板打开。 |\n| `hide` | — | 面板关闭。 |"
|
|
4737
|
+
},
|
|
4738
|
+
{
|
|
4739
|
+
"id": "colorpickerpreset",
|
|
4740
|
+
"title": "ColorPickerPreset",
|
|
4741
|
+
"body": "| 参数 | 类型 | 说明 |\n| --- | --- | --- |\n| `label` | `string` | 分组标签。 |\n| `colors` | `string[]` | 颜色数组。 |\n| `defaultOpen` | `boolean` | 默认展开。 |"
|
|
4742
|
+
},
|
|
4743
|
+
{
|
|
4744
|
+
"id": "slots",
|
|
4745
|
+
"title": "Slots",
|
|
4746
|
+
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| — | 暂无自定义插槽。 |"
|
|
4747
|
+
},
|
|
4748
|
+
{
|
|
4749
|
+
"id": "methods",
|
|
4750
|
+
"title": "Methods",
|
|
4751
|
+
"body": "| 方法名 | 说明 |\n| --- | --- |\n| `open` | 打开颜色选择面板。 |\n| `close` | 关闭颜色选择面板。 |\n| `toggle` | 切换颜色选择面板的显示状态。 |"
|
|
4752
|
+
}
|
|
4753
|
+
],
|
|
4754
|
+
"markdown": "---\ntitle: ColorPicker\ncategory: 02 / FORM\ndescription: 颜色选择器，支持面板取色、透明度与预设色板。\n---\n\n# ColorPicker\n\n颜色选择器，支持 HSB 面板取色、透明度调节、预设色板与多种格式显示。\n\n## 何时使用\n\n- 需要完整的颜色选择体验，而非仅输入 hex。\n- 需要调节透明度（alpha）时。\n- 需要提供预设色板供用户快速选择时。\n\n## 引入\n\n```ts\nimport { MColorPicker } from \"morya-ui\";\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## 预设色板\n\n```vue preview src=\"./demos/Presets.vue\"\n```\n\n## 显示文本与清空\n\n```vue preview src=\"./demos/ShowText.vue\"\n```\n\n## 渐变色\n\n启用 `gradient` 后支持线性/径向渐变编辑，可添加/删除/拖拽色标。\n\n```vue preview src=\"./demos/Gradient.vue\"\n```\n\n## 渐变值绑定\n\n```vue preview src=\"./demos/GradientValue.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `'#1677ff'` | 当前颜色值（hex）或 CSS 渐变字符串。 |\n| `gradient` | `boolean` | `false` | 启用渐变色模式。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `disabledAlpha` | `boolean` | `false` | 禁用透明度调节。 |\n| `allowClear` | `boolean` | `false` | 显示清空按钮。 |\n| `format` | `'hex' \\| 'rgb' \\| 'hsb'` | `'hex'` | 显示格式。 |\n| `presets` | `ColorPickerPreset[]` | — | 预设色板。 |\n| `showText` | `boolean` | `false` | 在触发器中显示颜色文本。 |\n| `size` | `MSizeInput` | — | 尺寸。 |\n| `placement` | `ColorPickerPlacement` | `'bottom-start'` | 弹层位置。 |\n| `teleport` | `boolean` | `true` | 是否 teleport 到 body。 |\n| `appendTo` | `MAppendTo` | `'body'` | 挂载目标。 |\n| `transition` | `MotionPresetId \\| false` | — | 过渡动画。 |\n| `pt` | `FieldPassThrough` | — | DOM 透传。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string` | 颜色变化。 |\n| `change` | `string` | 颜色变化（同 `update:modelValue`）。 |\n| `clear` | — | 点击清空。 |\n| `show` | — | 面板打开。 |\n| `hide` | — | 面板关闭。 |\n\n## ColorPickerPreset\n\n| 参数 | 类型 | 说明 |\n| --- | --- | --- |\n| `label` | `string` | 分组标签。 |\n| `colors` | `string[]` | 颜色数组。 |\n| `defaultOpen` | `boolean` | 默认展开。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| — | 暂无自定义插槽。 |\n\n## Methods\n\n| 方法名 | 说明 |\n| --- | --- |\n| `open` | 打开颜色选择面板。 |\n| `close` | 关闭颜色选择面板。 |\n| `toggle` | 切换颜色选择面板的显示状态。 |\n"
|
|
4755
|
+
},
|
|
4756
|
+
"en-US": {
|
|
4757
|
+
"title": "ColorPicker",
|
|
4758
|
+
"description": "Color picker with panel, alpha, and preset swatches.",
|
|
4759
|
+
"sections": [
|
|
4760
|
+
{
|
|
4761
|
+
"id": "overview",
|
|
4762
|
+
"title": "",
|
|
4763
|
+
"body": "# ColorPicker\n\nColor picker with HSB panel, alpha slider, preset swatches, and multiple display formats."
|
|
4764
|
+
},
|
|
4765
|
+
{
|
|
4766
|
+
"id": "when-to-use",
|
|
4767
|
+
"title": "When to use",
|
|
4768
|
+
"body": "- When you need a full color picking experience, not just hex input.\n- When you need alpha channel support.\n- When you want to provide preset color palettes."
|
|
4769
|
+
},
|
|
4770
|
+
{
|
|
4771
|
+
"id": "import",
|
|
4772
|
+
"title": "Import",
|
|
4773
|
+
"body": "```ts\nimport { MColorPicker } from \"morya-ui\";\n```"
|
|
4774
|
+
},
|
|
4775
|
+
{
|
|
4776
|
+
"id": "basic",
|
|
4777
|
+
"title": "Basic",
|
|
4778
|
+
"body": "```vue preview src=\"./demos/Basic.vue\"\n```"
|
|
4779
|
+
},
|
|
4780
|
+
{
|
|
4781
|
+
"id": "presets",
|
|
4782
|
+
"title": "Presets",
|
|
4783
|
+
"body": "```vue preview src=\"./demos/Presets.vue\"\n```"
|
|
4784
|
+
},
|
|
4785
|
+
{
|
|
4786
|
+
"id": "show-text-and-clear",
|
|
4787
|
+
"title": "Show text and clear",
|
|
4788
|
+
"body": "```vue preview src=\"./demos/ShowText.vue\"\n```"
|
|
4789
|
+
},
|
|
4790
|
+
{
|
|
4791
|
+
"id": "gradient",
|
|
4792
|
+
"title": "Gradient",
|
|
4793
|
+
"body": "Enable `gradient` for linear/radial gradient editing with draggable color stops.\n\n```vue preview src=\"./demos/Gradient.vue\"\n```"
|
|
4794
|
+
},
|
|
4795
|
+
{
|
|
4796
|
+
"id": "gradient-value-binding",
|
|
4797
|
+
"title": "Gradient Value Binding",
|
|
4798
|
+
"body": "```vue preview src=\"./demos/GradientValue.vue\"\n```"
|
|
4799
|
+
},
|
|
4800
|
+
{
|
|
4801
|
+
"id": "props",
|
|
4802
|
+
"title": "Props",
|
|
4803
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `'#1677ff'` | Current color value (hex) or CSS gradient string. |\n| `gradient` | `boolean` | `false` | Enable gradient mode. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `disabledAlpha` | `boolean` | `false` | Disable alpha channel. |\n| `allowClear` | `boolean` | `false` | Show clear button. |\n| `format` | `'hex' \\| 'rgb' \\| 'hsb'` | `'hex'` | Display format. |\n| `presets` | `ColorPickerPreset[]` | — | Preset color palettes. |\n| `showText` | `boolean` | `false` | Show color text in trigger. |\n| `size` | `MSizeInput` | — | Size. |\n| `placement` | `ColorPickerPlacement` | `'bottom-start'` | Popup placement. |\n| `teleport` | `boolean` | `true` | Teleport to body. |\n| `appendTo` | `MAppendTo` | `'body'` | Mount target. |\n| `transition` | `MotionPresetId \\| false` | — | Transition. |\n| `pt` | `FieldPassThrough` | — | DOM pass-through. |"
|
|
4804
|
+
},
|
|
4805
|
+
{
|
|
4806
|
+
"id": "events",
|
|
4807
|
+
"title": "Events",
|
|
4808
|
+
"body": "| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string` | Color changed. |\n| `change` | `string` | Color changed. |\n| `clear` | — | Clear clicked. |\n| `show` | — | Panel opened. |\n| `hide` | — | Panel closed. |"
|
|
4809
|
+
},
|
|
4810
|
+
{
|
|
4811
|
+
"id": "colorpickerpreset",
|
|
4812
|
+
"title": "ColorPickerPreset",
|
|
4813
|
+
"body": "| Prop | Type | Description |\n| --- | --- | --- |\n| `label` | `string` | Group label. |\n| `colors` | `string[]` | Color array. |\n| `defaultOpen` | `boolean` | Default expanded. |"
|
|
4814
|
+
},
|
|
4815
|
+
{
|
|
4816
|
+
"id": "slots",
|
|
4817
|
+
"title": "Slots",
|
|
4818
|
+
"body": "| Name | Description |\n| --- | --- |\n| — | No custom slots yet. |"
|
|
4819
|
+
},
|
|
4820
|
+
{
|
|
4821
|
+
"id": "methods",
|
|
4822
|
+
"title": "Methods",
|
|
4823
|
+
"body": "| Method | Description |\n| --- | --- |\n| `open` | Open the color picker panel. |\n| `close` | Close the color picker panel. |\n| `toggle` | Toggle the color picker panel visibility. |"
|
|
4824
|
+
}
|
|
4825
|
+
],
|
|
4826
|
+
"markdown": "---\ntitle: ColorPicker\ncategory: 02 / FORM\ndescription: Color picker with panel, alpha, and preset swatches.\n---\n\n# ColorPicker\n\nColor picker with HSB panel, alpha slider, preset swatches, and multiple display formats.\n\n## When to use\n\n- When you need a full color picking experience, not just hex input.\n- When you need alpha channel support.\n- When you want to provide preset color palettes.\n\n## Import\n\n```ts\nimport { MColorPicker } from \"morya-ui\";\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Presets\n\n```vue preview src=\"./demos/Presets.vue\"\n```\n\n## Show text and clear\n\n```vue preview src=\"./demos/ShowText.vue\"\n```\n\n## Gradient\n\nEnable `gradient` for linear/radial gradient editing with draggable color stops.\n\n```vue preview src=\"./demos/Gradient.vue\"\n```\n\n## Gradient Value Binding\n\n```vue preview src=\"./demos/GradientValue.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `'#1677ff'` | Current color value (hex) or CSS gradient string. |\n| `gradient` | `boolean` | `false` | Enable gradient mode. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `disabledAlpha` | `boolean` | `false` | Disable alpha channel. |\n| `allowClear` | `boolean` | `false` | Show clear button. |\n| `format` | `'hex' \\| 'rgb' \\| 'hsb'` | `'hex'` | Display format. |\n| `presets` | `ColorPickerPreset[]` | — | Preset color palettes. |\n| `showText` | `boolean` | `false` | Show color text in trigger. |\n| `size` | `MSizeInput` | — | Size. |\n| `placement` | `ColorPickerPlacement` | `'bottom-start'` | Popup placement. |\n| `teleport` | `boolean` | `true` | Teleport to body. |\n| `appendTo` | `MAppendTo` | `'body'` | Mount target. |\n| `transition` | `MotionPresetId \\| false` | — | Transition. |\n| `pt` | `FieldPassThrough` | — | DOM pass-through. |\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string` | Color changed. |\n| `change` | `string` | Color changed. |\n| `clear` | — | Clear clicked. |\n| `show` | — | Panel opened. |\n| `hide` | — | Panel closed. |\n\n## ColorPickerPreset\n\n| Prop | Type | Description |\n| --- | --- | --- |\n| `label` | `string` | Group label. |\n| `colors` | `string[]` | Color array. |\n| `defaultOpen` | `boolean` | Default expanded. |\n\n## Slots\n\n| Name | Description |\n| --- | --- |\n| — | No custom slots yet. |\n\n## Methods\n\n| Method | Description |\n| --- | --- |\n| `open` | Open the color picker panel. |\n| `close` | Close the color picker panel. |\n| `toggle` | Toggle the color picker panel visibility. |\n"
|
|
4827
|
+
}
|
|
4828
|
+
}
|
|
4829
|
+
},
|
|
4417
4830
|
{
|
|
4418
4831
|
"id": "CommandMenu",
|
|
4419
4832
|
"name": "CommandMenu",
|
|
@@ -13115,241 +13528,6 @@
|
|
|
13115
13528
|
}
|
|
13116
13529
|
}
|
|
13117
13530
|
},
|
|
13118
|
-
{
|
|
13119
|
-
"id": "InputColor",
|
|
13120
|
-
"name": "InputColor",
|
|
13121
|
-
"exportName": "MInputColor",
|
|
13122
|
-
"category": "02 / FORM",
|
|
13123
|
-
"description": "颜色选择，支持色板与十六进制文本。",
|
|
13124
|
-
"descriptionEn": "Color picker with a palette and hexadecimal text input.",
|
|
13125
|
-
"import": "import { MInputColor } from 'morya-ui'",
|
|
13126
|
-
"props": [
|
|
13127
|
-
{
|
|
13128
|
-
"name": "modelValue",
|
|
13129
|
-
"type": "string",
|
|
13130
|
-
"default": "'#000000'",
|
|
13131
|
-
"description": "十六进制颜色。"
|
|
13132
|
-
},
|
|
13133
|
-
{
|
|
13134
|
-
"name": "swatches",
|
|
13135
|
-
"type": "string[]",
|
|
13136
|
-
"default": "—",
|
|
13137
|
-
"description": "快捷色板。"
|
|
13138
|
-
},
|
|
13139
|
-
{
|
|
13140
|
-
"name": "disabled",
|
|
13141
|
-
"type": "boolean",
|
|
13142
|
-
"default": "false",
|
|
13143
|
-
"description": "禁用。"
|
|
13144
|
-
},
|
|
13145
|
-
{
|
|
13146
|
-
"name": "id",
|
|
13147
|
-
"type": "string",
|
|
13148
|
-
"default": "—",
|
|
13149
|
-
"description": "色板 input id。"
|
|
13150
|
-
},
|
|
13151
|
-
{
|
|
13152
|
-
"name": "invalid",
|
|
13153
|
-
"type": "boolean",
|
|
13154
|
-
"default": "—",
|
|
13155
|
-
"description": "—"
|
|
13156
|
-
},
|
|
13157
|
-
{
|
|
13158
|
-
"name": "label",
|
|
13159
|
-
"type": "string",
|
|
13160
|
-
"default": "—",
|
|
13161
|
-
"description": "—"
|
|
13162
|
-
},
|
|
13163
|
-
{
|
|
13164
|
-
"name": "size",
|
|
13165
|
-
"type": "[MSizeInput](/docs/types#MSizeInput)",
|
|
13166
|
-
"default": "—",
|
|
13167
|
-
"description": "—"
|
|
13168
|
-
},
|
|
13169
|
-
{
|
|
13170
|
-
"name": "pt",
|
|
13171
|
-
"type": "[FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }",
|
|
13172
|
-
"default": "—",
|
|
13173
|
-
"description": "DOM 透传，见 [样式与 attrs](/docs/attrs)."
|
|
13174
|
-
}
|
|
13175
|
-
],
|
|
13176
|
-
"events": [
|
|
13177
|
-
{
|
|
13178
|
-
"name": "update:modelValue",
|
|
13179
|
-
"payload": "string",
|
|
13180
|
-
"description": "颜色变化。"
|
|
13181
|
-
}
|
|
13182
|
-
],
|
|
13183
|
-
"slots": [
|
|
13184
|
-
{
|
|
13185
|
-
"name": "trigger",
|
|
13186
|
-
"description": "自定义颜色触发器。"
|
|
13187
|
-
}
|
|
13188
|
-
],
|
|
13189
|
-
"methods": [],
|
|
13190
|
-
"examples": [
|
|
13191
|
-
{
|
|
13192
|
-
"id": "引入-1",
|
|
13193
|
-
"section": "引入",
|
|
13194
|
-
"sectionId": "引入",
|
|
13195
|
-
"lang": "ts",
|
|
13196
|
-
"preview": false,
|
|
13197
|
-
"code": "import { MInputColor } from \"morya-ui\";",
|
|
13198
|
-
"locale": "zh-CN"
|
|
13199
|
-
},
|
|
13200
|
-
{
|
|
13201
|
-
"id": "基础用法-1",
|
|
13202
|
-
"section": "基础用法",
|
|
13203
|
-
"sectionId": "基础用法",
|
|
13204
|
-
"lang": "vue",
|
|
13205
|
-
"preview": true,
|
|
13206
|
-
"code": "<script setup lang=\"ts\">\nimport { MInputColor } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#2563eb')\n</script>\n\n<template>\n <MInputColor v-model=\"color\" />\n</template>",
|
|
13207
|
-
"locale": "zh-CN"
|
|
13208
|
-
},
|
|
13209
|
-
{
|
|
13210
|
-
"id": "swatches-1",
|
|
13211
|
-
"section": "Swatches",
|
|
13212
|
-
"sectionId": "swatches",
|
|
13213
|
-
"lang": "vue",
|
|
13214
|
-
"preview": true,
|
|
13215
|
-
"code": "<script setup lang=\"ts\">\nimport { MInputColor } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#2563eb')\n</script>\n\n<template>\n <MInputColor v-model=\"color\" :swatches=\"['#2563eb', '#16a34a', '#dc2626']\" />\n</template>",
|
|
13216
|
-
"locale": "zh-CN"
|
|
13217
|
-
},
|
|
13218
|
-
{
|
|
13219
|
-
"id": "import-1",
|
|
13220
|
-
"section": "Import",
|
|
13221
|
-
"sectionId": "import",
|
|
13222
|
-
"lang": "ts",
|
|
13223
|
-
"preview": false,
|
|
13224
|
-
"code": "import { MInputColor } from \"morya-ui\";",
|
|
13225
|
-
"locale": "en-US"
|
|
13226
|
-
},
|
|
13227
|
-
{
|
|
13228
|
-
"id": "basic-1",
|
|
13229
|
-
"section": "Basic",
|
|
13230
|
-
"sectionId": "basic",
|
|
13231
|
-
"lang": "vue",
|
|
13232
|
-
"preview": true,
|
|
13233
|
-
"code": "<script setup lang=\"ts\">\nimport { MInputColor } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#2563eb')\n</script>\n\n<template>\n <MInputColor v-model=\"color\" />\n</template>",
|
|
13234
|
-
"locale": "en-US"
|
|
13235
|
-
},
|
|
13236
|
-
{
|
|
13237
|
-
"id": "swatches-1",
|
|
13238
|
-
"section": "Swatches",
|
|
13239
|
-
"sectionId": "swatches",
|
|
13240
|
-
"lang": "vue",
|
|
13241
|
-
"preview": true,
|
|
13242
|
-
"code": "<script setup lang=\"ts\">\nimport { MInputColor } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst color = ref('#2563eb')\n</script>\n\n<template>\n <MInputColor v-model=\"color\" :swatches=\"['#2563eb', '#16a34a', '#dc2626']\" />\n</template>",
|
|
13243
|
-
"locale": "en-US"
|
|
13244
|
-
}
|
|
13245
|
-
],
|
|
13246
|
-
"locales": {
|
|
13247
|
-
"zh-CN": {
|
|
13248
|
-
"title": "InputColor",
|
|
13249
|
-
"description": "颜色选择，支持色板与十六进制文本。",
|
|
13250
|
-
"sections": [
|
|
13251
|
-
{
|
|
13252
|
-
"id": "overview",
|
|
13253
|
-
"title": "",
|
|
13254
|
-
"body": "# InputColor\n\n通过原生色板与文本框编辑 hex 颜色。"
|
|
13255
|
-
},
|
|
13256
|
-
{
|
|
13257
|
-
"id": "何时使用",
|
|
13258
|
-
"title": "何时使用",
|
|
13259
|
-
"body": "- 表单需要选择或输入十六进制颜色时。\n- 需要预设色块（`swatches`）即可，不需要完整独立取色面板。"
|
|
13260
|
-
},
|
|
13261
|
-
{
|
|
13262
|
-
"id": "引入",
|
|
13263
|
-
"title": "引入",
|
|
13264
|
-
"body": "```ts\nimport { MInputColor } from \"morya-ui\";\n```"
|
|
13265
|
-
},
|
|
13266
|
-
{
|
|
13267
|
-
"id": "基础用法",
|
|
13268
|
-
"title": "基础用法",
|
|
13269
|
-
"body": "```vue preview src=\"./demos/Basic.vue\"\n```"
|
|
13270
|
-
},
|
|
13271
|
-
{
|
|
13272
|
-
"id": "swatches",
|
|
13273
|
-
"title": "Swatches",
|
|
13274
|
-
"body": "`swatches` 提供快捷色板。\n\n```vue preview src=\"./demos/Swatches.vue\"\n```"
|
|
13275
|
-
},
|
|
13276
|
-
{
|
|
13277
|
-
"id": "props",
|
|
13278
|
-
"title": "Props",
|
|
13279
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| ------------ | -------------------------------------------------------------------------------------- | ----------- | ----------------------------------------- |\n| `modelValue` | `string` | `'#000000'` | 十六进制颜色。 |\n| `swatches` | `string[]` | — | 快捷色板。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `id` | `string` | — | 色板 input id。 |\n| `invalid` | `boolean` | — | — |\n| `label` | `string` | — | — |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
13280
|
-
},
|
|
13281
|
-
{
|
|
13282
|
-
"id": "events",
|
|
13283
|
-
"title": "Events",
|
|
13284
|
-
"body": "| 事件名 | 参数 | 说明 |\n| ------------------- | -------- | ---------- |\n| `update:modelValue` | `string` | 颜色变化。 |"
|
|
13285
|
-
},
|
|
13286
|
-
{
|
|
13287
|
-
"id": "功能边界",
|
|
13288
|
-
"title": "功能边界",
|
|
13289
|
-
"body": "选色实现是**原生色板 + hex 文本 + 可选 swatches**，不是完整的面板级取色体验。"
|
|
13290
|
-
},
|
|
13291
|
-
{
|
|
13292
|
-
"id": "slots",
|
|
13293
|
-
"title": "Slots",
|
|
13294
|
-
"body": "| 插槽名 | 说明 |\n| --------- | ------------------ |\n| `trigger` | 自定义颜色触发器。 |"
|
|
13295
|
-
}
|
|
13296
|
-
],
|
|
13297
|
-
"markdown": "---\ntitle: InputColor\ncategory: 02 / FORM\ndescription: 颜色选择，支持色板与十六进制文本。\n---\n\n# InputColor\n\n通过原生色板与文本框编辑 hex 颜色。\n\n## 何时使用\n\n- 表单需要选择或输入十六进制颜色时。\n- 需要预设色块（`swatches`）即可，不需要完整独立取色面板。\n\n## 引入\n\n```ts\nimport { MInputColor } from \"morya-ui\";\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Swatches\n\n`swatches` 提供快捷色板。\n\n```vue preview src=\"./demos/Swatches.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| ------------ | -------------------------------------------------------------------------------------- | ----------- | ----------------------------------------- |\n| `modelValue` | `string` | `'#000000'` | 十六进制颜色。 |\n| `swatches` | `string[]` | — | 快捷色板。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `id` | `string` | — | 色板 input id。 |\n| `invalid` | `boolean` | — | — |\n| `label` | `string` | — | — |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| ------------------- | -------- | ---------- |\n| `update:modelValue` | `string` | 颜色变化。 |\n\n## 功能边界\n\n选色实现是**原生色板 + hex 文本 + 可选 swatches**，不是完整的面板级取色体验。\n\n## Slots\n\n| 插槽名 | 说明 |\n| --------- | ------------------ |\n| `trigger` | 自定义颜色触发器。 |\n"
|
|
13298
|
-
},
|
|
13299
|
-
"en-US": {
|
|
13300
|
-
"title": "InputColor",
|
|
13301
|
-
"description": "Color picker with a palette and hexadecimal text input.",
|
|
13302
|
-
"sections": [
|
|
13303
|
-
{
|
|
13304
|
-
"id": "overview",
|
|
13305
|
-
"title": "",
|
|
13306
|
-
"body": "# InputColor\n\nEdit hex colors with the native color picker and a text field."
|
|
13307
|
-
},
|
|
13308
|
-
{
|
|
13309
|
-
"id": "when-to-use",
|
|
13310
|
-
"title": "When to use",
|
|
13311
|
-
"body": "- Use when a form needs a hex color value.\n- Prefer this when native picker + optional `swatches` is enough; not a full standalone color panel."
|
|
13312
|
-
},
|
|
13313
|
-
{
|
|
13314
|
-
"id": "import",
|
|
13315
|
-
"title": "Import",
|
|
13316
|
-
"body": "```ts\nimport { MInputColor } from \"morya-ui\";\n```"
|
|
13317
|
-
},
|
|
13318
|
-
{
|
|
13319
|
-
"id": "basic",
|
|
13320
|
-
"title": "Basic",
|
|
13321
|
-
"body": "```vue preview src=\"./demos/Basic.vue\"\n```"
|
|
13322
|
-
},
|
|
13323
|
-
{
|
|
13324
|
-
"id": "swatches",
|
|
13325
|
-
"title": "Swatches",
|
|
13326
|
-
"body": "`swatches` provides a row of preset colors.\n\n```vue preview src=\"./demos/Swatches.vue\"\n```"
|
|
13327
|
-
},
|
|
13328
|
-
{
|
|
13329
|
-
"id": "props",
|
|
13330
|
-
"title": "Props",
|
|
13331
|
-
"body": "| Prop | Type | Default | Description |\n| ------------ | -------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------- |\n| `modelValue` | `string` | `'#000000'` | Hexadecimal color. |\n| `swatches` | `string[]` | — | Preset color chips. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `id` | `string` | — | Color input id. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
13332
|
-
},
|
|
13333
|
-
{
|
|
13334
|
-
"id": "events",
|
|
13335
|
-
"title": "Events",
|
|
13336
|
-
"body": "| Event | Prop | Description |\n| ------------------- | -------- | -------------- |\n| `update:modelValue` | `string` | Color changed. |"
|
|
13337
|
-
},
|
|
13338
|
-
{
|
|
13339
|
-
"id": "boundaries",
|
|
13340
|
-
"title": "Boundaries",
|
|
13341
|
-
"body": "A **native picker + hex text + optional swatches**, not a full panel-level color experience."
|
|
13342
|
-
},
|
|
13343
|
-
{
|
|
13344
|
-
"id": "slots",
|
|
13345
|
-
"title": "Slots",
|
|
13346
|
-
"body": "| Slot | Description |\n| --------- | --------------------- |\n| `trigger` | Custom color trigger. |"
|
|
13347
|
-
}
|
|
13348
|
-
],
|
|
13349
|
-
"markdown": "---\ntitle: InputColor\ncategory: 02 / FORM\ndescription: Color picker with a palette and hexadecimal text input.\n---\n\n# InputColor\n\nEdit hex colors with the native color picker and a text field.\n\n## When to use\n\n- Use when a form needs a hex color value.\n- Prefer this when native picker + optional `swatches` is enough; not a full standalone color panel.\n\n## Import\n\n```ts\nimport { MInputColor } from \"morya-ui\";\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Swatches\n\n`swatches` provides a row of preset colors.\n\n```vue preview src=\"./demos/Swatches.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| ------------ | -------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------- |\n| `modelValue` | `string` | `'#000000'` | Hexadecimal color. |\n| `swatches` | `string[]` | — | Preset color chips. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `id` | `string` | — | Color input id. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n## Events\n\n| Event | Prop | Description |\n| ------------------- | -------- | -------------- |\n| `update:modelValue` | `string` | Color changed. |\n\n## Boundaries\n\nA **native picker + hex text + optional swatches**, not a full panel-level color experience.\n\n## Slots\n\n| Slot | Description |\n| --------- | --------------------- |\n| `trigger` | Custom color trigger. |\n"
|
|
13350
|
-
}
|
|
13351
|
-
}
|
|
13352
|
-
},
|
|
13353
13531
|
{
|
|
13354
13532
|
"id": "InputGroup",
|
|
13355
13533
|
"name": "InputGroup",
|
|
@@ -33378,7 +33556,7 @@
|
|
|
33378
33556
|
"zh-CN": {
|
|
33379
33557
|
"title": "主题",
|
|
33380
33558
|
"description": "亮暗主题、设计令牌与内容密度。",
|
|
33381
|
-
"markdown": "---\ntitle: 主题\norder: 5\ndescription: 亮暗主题、设计令牌与内容密度。\n---\n\n# 主题\n\n主题能力内置于 `morya-ui`。组件只消费语义化 CSS 变量（`--m-*`），不自行维护第二套色板。\n\n引入 `morya-ui/styles.css` 时已包含这些变量；主题 JS API（`useTheme` 等）从同一包导入。\n\n## 亮 / 暗色\n\n```ts\nimport { useTheme } from \"morya-ui\";\n\nconst { isDark, setTheme, toggleTheme } = useTheme();\n\nsetTheme(\"light\"); // 或 'dark'\ntoggleTheme();\n```\n\n文档站右上角的按钮调用的就是同一套 API。主题偏好会写到 `document.documentElement` 的 `data-theme`。\n\n## 设计令牌\n\n常用变量示例见 [设计令牌](/docs/design-tokens) 完整列表（支持搜索与分类）。\n\n| Token | 用途 |\n| ----------------------------------------------------------------- | --------------------------------------------- |\n| `--m-color-primary` | 品牌主色 |\n| `--m-color-surface` | 页面底色 |\n| `--m-color-text` | 正文 |\n| `--m-color-border` | 分割线 / 描边 |\n| `--m-radius-sm/md/lg` | 圆角阶梯 |\n| `--m-space-*` | 间距阶梯 |\n| `--m-font-size-xs/sm/md/lg` | 组件正文字号阶梯 |\n| `--m-opacity-disabled` | 禁用态透明度 |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | 浮层层叠（Config `zIndex` 会写 `--m-z-base`） |\n| `--m-menu-min-width` / `--m-control-affix-*` | 菜单最小宽、输入清除区尺寸 |\n\n动效相关 token（`--m-motion-*`）见 [动效](/docs/motion)。\n\n## 内容密度\n\n```ts\nimport { useDensity } from \"morya-ui\";\n\nconst { preference, setDensity } = useDensity();\nsetDensity(\"compact\"); // 'compact' | 'comfortable' | 'spacious'\n```\n\n也会写到 `document.documentElement` 的 `data-m-density`，并缩放 `--m-space-*` 与 `--m-control-height-*`。 \n应用级可用 `createMoryaUI({ density: 'compact' })` 或 `<MConfigProvider density=\"compact\">`。\n\n在组件页侧栏「主题」可临时改主色、圆角与密度，用于本地预览。完整交互页见 [主题编辑器](/theme-editor)（可导出 `createTheme` / CSS）。\n\n## 控件尺寸与聚焦\n\n默认控件高度采用 compact 节奏：\n\n| Size | 高度 | 字号 |\n| --------------- | ------------------------------------ | ------ |\n| `small` | `28px`（`--m-control-height-small`） | `14px` |\n| 默认 / `medium` | `34px` | `14px` |\n| `large` | `40px` | `15px` |\n\n聚焦样式为 **主色描边 + 2px 淡色光晕**（非外扩 outline ring）：\n\n```css\nborder-color: var(--m-color-primary-hover);\nbox-shadow: var(--m-focus-shadow); /* 0 0 0 2px primary@20% */\n```\n\n相关 token：`--m-radius-control`、`--m-control-padding-x-*`、`--m-button-padding-x-*`、`--m-focus-shadow` / `--m-focus-shadow-danger`。\n\n## createTheme\n\n从 seed 推导完整 `--m-*` 并应用到文档或作用域元素：\n\n```ts\nimport { createTheme } from \"morya-ui\";\n\nconst theme = createTheme({\n seed: { colorPrimary: \"#0b6e4f\", borderRadius: 8 },\n // algorithm: 'dark' | 'compact' | ['dark', 'compact']\n});\n\ntheme.apply(); // 写到 :root（或传入元素做局部主题）\n// const dispose = theme.inject() // 写入 <style data-m-theme>（组件级覆盖需要）\n```\n\n在线调色与导出片段：[主题编辑器](/theme-editor)。\n\n## 与 ConfigProvider\n\n主题切换是「视觉层」；`MConfigProvider` / `createMoryaUI` 负责尺寸、文案、浮层挂载等「行为默认值」。二者可同时使用，详见 [全局配置](/docs/config)。\n\n进出场与 `useMotion` 见 [动效](/docs/motion)。\n",
|
|
33559
|
+
"markdown": "---\ntitle: 主题\norder: 5\ndescription: 亮暗主题、设计令牌与内容密度。\n---\n\n# 主题\n\n主题能力内置于 `morya-ui`。组件只消费语义化 CSS 变量（`--m-*`），不自行维护第二套色板。\n\n引入 `morya-ui/styles.css` 时已包含这些变量；主题 JS API（`useTheme` 等）从同一包导入。\n\n## 亮 / 暗色\n\n```ts\nimport { useTheme } from \"morya-ui\";\n\nconst { isDark, setTheme, toggleTheme } = useTheme();\n\nsetTheme(\"light\"); // 或 'dark'\ntoggleTheme();\n```\n\n文档站右上角的按钮调用的就是同一套 API。主题偏好会写到 `document.documentElement` 的 `data-theme`。\n\n## 设计令牌\n\n常用变量示例见 [设计令牌](/docs/design-tokens) 完整列表（支持搜索与分类）。\n\n| Token | 用途 |\n| ----------------------------------------------------------------- | --------------------------------------------- |\n| `--m-color-primary` | 品牌主色 |\n| `--m-color-surface` | 页面底色 |\n| `--m-color-text` | 正文 |\n| `--m-color-border` | 分割线 / 描边 |\n| `--m-radius-sm/md/lg` | 圆角阶梯 |\n| `--m-space-*` | 间距阶梯 |\n| `--m-font-size-xs/sm/md/lg` | 组件正文字号阶梯 |\n| `--m-opacity-disabled` | 禁用态透明度 |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | 浮层层叠（Config `zIndex` 会写 `--m-z-base`） |\n| `--m-overlay-menu-min-width` / `--m-control-affix-*` | 菜单最小宽、输入清除区尺寸 |\n\n动效相关 token（`--m-motion-*`）见 [动效](/docs/motion)。\n\n## 内容密度\n\n```ts\nimport { useDensity } from \"morya-ui\";\n\nconst { preference, setDensity } = useDensity();\nsetDensity(\"compact\"); // 'compact' | 'comfortable' | 'spacious'\n```\n\n也会写到 `document.documentElement` 的 `data-m-density`，并缩放 `--m-space-*` 与 `--m-control-height-*`。 \n应用级可用 `createMoryaUI({ density: 'compact' })` 或 `<MConfigProvider density=\"compact\">`。\n\n在组件页侧栏「主题」可临时改主色、圆角与密度，用于本地预览。完整交互页见 [主题编辑器](/theme-editor)（可导出 `createTheme` / CSS）。\n\n## 控件尺寸与聚焦\n\n默认控件高度采用 compact 节奏：\n\n| Size | 高度 | 字号 |\n| --------------- | ------------------------------------ | ------ |\n| `small` | `28px`（`--m-control-height-small`） | `14px` |\n| 默认 / `medium` | `34px` | `14px` |\n| `large` | `40px` | `15px` |\n\n聚焦样式为 **主色描边 + 2px 淡色光晕**（非外扩 outline ring）：\n\n```css\nborder-color: var(--m-color-primary-hover);\nbox-shadow: var(--m-focus-shadow); /* 0 0 0 2px primary@20% */\n```\n\n相关 token：`--m-radius-control`、`--m-control-padding-x-*`、`--m-button-padding-x-*`、`--m-focus-shadow` / `--m-focus-shadow-danger`。\n\n## createTheme\n\n从 seed 推导完整 `--m-*` 并应用到文档或作用域元素：\n\n```ts\nimport { createTheme } from \"morya-ui\";\n\nconst theme = createTheme({\n seed: { colorPrimary: \"#0b6e4f\", borderRadius: 8 },\n // algorithm: 'dark' | 'compact' | ['dark', 'compact']\n});\n\ntheme.apply(); // 写到 :root（或传入元素做局部主题）\n// const dispose = theme.inject() // 写入 <style data-m-theme>（组件级覆盖需要）\n```\n\n在线调色与导出片段：[主题编辑器](/theme-editor)。\n\n## 与 ConfigProvider\n\n主题切换是「视觉层」；`MConfigProvider` / `createMoryaUI` 负责尺寸、文案、浮层挂载等「行为默认值」。二者可同时使用，详见 [全局配置](/docs/config)。\n\n进出场与 `useMotion` 见 [动效](/docs/motion)。\n",
|
|
33382
33560
|
"sections": [
|
|
33383
33561
|
{
|
|
33384
33562
|
"title": "",
|
|
@@ -33393,7 +33571,7 @@
|
|
|
33393
33571
|
{
|
|
33394
33572
|
"title": "设计令牌",
|
|
33395
33573
|
"id": "设计令牌",
|
|
33396
|
-
"body": "常用变量示例见 [设计令牌](/docs/design-tokens) 完整列表（支持搜索与分类）。\n\n| Token | 用途 |\n| ----------------------------------------------------------------- | --------------------------------------------- |\n| `--m-color-primary` | 品牌主色 |\n| `--m-color-surface` | 页面底色 |\n| `--m-color-text` | 正文 |\n| `--m-color-border` | 分割线 / 描边 |\n| `--m-radius-sm/md/lg` | 圆角阶梯 |\n| `--m-space-*` | 间距阶梯 |\n| `--m-font-size-xs/sm/md/lg` | 组件正文字号阶梯 |\n| `--m-opacity-disabled` | 禁用态透明度 |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | 浮层层叠（Config `zIndex` 会写 `--m-z-base`） |\n| `--m-menu-min-width` / `--m-control-affix-*` | 菜单最小宽、输入清除区尺寸 |\n\n动效相关 token（`--m-motion-*`）见 [动效](/docs/motion)。"
|
|
33574
|
+
"body": "常用变量示例见 [设计令牌](/docs/design-tokens) 完整列表（支持搜索与分类）。\n\n| Token | 用途 |\n| ----------------------------------------------------------------- | --------------------------------------------- |\n| `--m-color-primary` | 品牌主色 |\n| `--m-color-surface` | 页面底色 |\n| `--m-color-text` | 正文 |\n| `--m-color-border` | 分割线 / 描边 |\n| `--m-radius-sm/md/lg` | 圆角阶梯 |\n| `--m-space-*` | 间距阶梯 |\n| `--m-font-size-xs/sm/md/lg` | 组件正文字号阶梯 |\n| `--m-opacity-disabled` | 禁用态透明度 |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | 浮层层叠（Config `zIndex` 会写 `--m-z-base`） |\n| `--m-overlay-menu-min-width` / `--m-control-affix-*` | 菜单最小宽、输入清除区尺寸 |\n\n动效相关 token（`--m-motion-*`）见 [动效](/docs/motion)。"
|
|
33397
33575
|
},
|
|
33398
33576
|
{
|
|
33399
33577
|
"title": "内容密度",
|
|
@@ -33420,7 +33598,7 @@
|
|
|
33420
33598
|
"en-US": {
|
|
33421
33599
|
"title": "Theme",
|
|
33422
33600
|
"description": "Light and dark themes, design tokens, and density.",
|
|
33423
|
-
"markdown": "---\ntitle: Theme\norder: 5\ndescription: Light and dark themes, design tokens, and density.\n---\n\n# Theme\n\nTheme support is built into `morya-ui`. Components consume semantic CSS variables (`--m-*`) and do not keep a second palette.\n\nImporting `morya-ui/styles.css` already includes these variables. Theme JS APIs (`useTheme` and friends) come from the same package.\n\n## Light / dark\n\n```ts\nimport { useTheme } from \"morya-ui\";\n\nconst { isDark, setTheme, toggleTheme } = useTheme();\n\nsetTheme(\"light\"); // or 'dark'\ntoggleTheme();\n```\n\nThe button at the top-right of the docs site uses the same API. The preference is written to `data-theme` on `document.documentElement`.\n\n## Design tokens\n\nSee the full [Design tokens](/docs/design-tokens) catalog (searchable, grouped by category).\n\n| Token | Use |\n| ----------------------------------------------------------------- | ----------------------------------------------- |\n| `--m-color-primary` | Brand color |\n| `--m-color-surface` | Page background |\n| `--m-color-text` | Body text |\n| `--m-color-border` | Dividers / strokes |\n| `--m-radius-sm/md/lg` | Radius scale |\n| `--m-space-*` | Spacing scale |\n| `--m-font-size-xs/sm/md/lg` | Component type scale |\n| `--m-opacity-disabled` | Disabled opacity |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | Overlay stacking (`zIndex` writes `--m-z-base`) |\n| `--m-menu-min-width` / `--m-control-affix-*` | Menu min width, input clear-button size |\n\nMotion tokens (`--m-motion-*`) are covered in [Motion](/docs/motion).\n\n## Density\n\n```ts\nimport { useDensity } from \"morya-ui\";\n\nconst { preference, setDensity } = useDensity();\nsetDensity(\"compact\"); // 'compact' | 'comfortable' | 'spacious'\n```\n\nThis writes `data-m-density` on `document.documentElement` and scales `--m-space-*` plus `--m-control-height-*`. \nAt the app level use `createMoryaUI({ density: 'compact' })` or `<MConfigProvider density=\"compact\">`.\n\nThe Components page sidebar Theme panel can temporarily change accent, radius, and density for local preview. Full interactive page: [Theme editor](/theme-editor) (exports `createTheme` / CSS).\n\n## Control size and focus\n\nDefault control heights follow a compact rhythm:\n\n| Size | Height | Font size |\n| ------------------ | ----------------------------------- | --------- |\n| `small` | `28px` (`--m-control-height-small`) | `14px` |\n| Default / `medium` | `34px` | `14px` |\n| `large` | `40px` | `15px` |\n\nFocus uses a **brand border + 2px tinted glow** (not an outset outline ring):\n\n```css\nborder-color: var(--m-color-primary-hover);\nbox-shadow: var(--m-focus-shadow); /* 0 0 0 2px primary@20% */\n```\n\nRelated tokens: `--m-radius-control`, `--m-control-padding-x-*`, `--m-button-padding-x-*`, `--m-focus-shadow` / `--m-focus-shadow-danger`.\n\n## createTheme\n\nDerive the full `--m-*` set from a seed and apply it to the document or a scoped element:\n\n```ts\nimport { createTheme } from \"morya-ui\";\n\nconst theme = createTheme({\n seed: { colorPrimary: \"#0b6e4f\", borderRadius: 8 },\n // algorithm: 'dark' | 'compact' | ['dark', 'compact']\n});\n\ntheme.apply(); // write onto :root (or pass an element for scoped theming)\n// const dispose = theme.inject() // <style data-m-theme> (needed for component overrides)\n```\n\nLive tuning and export snippets: [Theme editor](/theme-editor).\n\n## With ConfigProvider\n\nTheme switching is the visual layer. `MConfigProvider` / `createMoryaUI` own size, copy, overlay mount, and other behavioral defaults. Use both together; see [Configuration](/docs/config).\n\nEnter/exit presets and `useMotion` live under [Motion](/docs/motion).\n",
|
|
33601
|
+
"markdown": "---\ntitle: Theme\norder: 5\ndescription: Light and dark themes, design tokens, and density.\n---\n\n# Theme\n\nTheme support is built into `morya-ui`. Components consume semantic CSS variables (`--m-*`) and do not keep a second palette.\n\nImporting `morya-ui/styles.css` already includes these variables. Theme JS APIs (`useTheme` and friends) come from the same package.\n\n## Light / dark\n\n```ts\nimport { useTheme } from \"morya-ui\";\n\nconst { isDark, setTheme, toggleTheme } = useTheme();\n\nsetTheme(\"light\"); // or 'dark'\ntoggleTheme();\n```\n\nThe button at the top-right of the docs site uses the same API. The preference is written to `data-theme` on `document.documentElement`.\n\n## Design tokens\n\nSee the full [Design tokens](/docs/design-tokens) catalog (searchable, grouped by category).\n\n| Token | Use |\n| ----------------------------------------------------------------- | ----------------------------------------------- |\n| `--m-color-primary` | Brand color |\n| `--m-color-surface` | Page background |\n| `--m-color-text` | Body text |\n| `--m-color-border` | Dividers / strokes |\n| `--m-radius-sm/md/lg` | Radius scale |\n| `--m-space-*` | Spacing scale |\n| `--m-font-size-xs/sm/md/lg` | Component type scale |\n| `--m-opacity-disabled` | Disabled opacity |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | Overlay stacking (`zIndex` writes `--m-z-base`) |\n| `--m-overlay-menu-min-width` / `--m-control-affix-*` | Menu min width, input clear-button size |\n\nMotion tokens (`--m-motion-*`) are covered in [Motion](/docs/motion).\n\n## Density\n\n```ts\nimport { useDensity } from \"morya-ui\";\n\nconst { preference, setDensity } = useDensity();\nsetDensity(\"compact\"); // 'compact' | 'comfortable' | 'spacious'\n```\n\nThis writes `data-m-density` on `document.documentElement` and scales `--m-space-*` plus `--m-control-height-*`. \nAt the app level use `createMoryaUI({ density: 'compact' })` or `<MConfigProvider density=\"compact\">`.\n\nThe Components page sidebar Theme panel can temporarily change accent, radius, and density for local preview. Full interactive page: [Theme editor](/theme-editor) (exports `createTheme` / CSS).\n\n## Control size and focus\n\nDefault control heights follow a compact rhythm:\n\n| Size | Height | Font size |\n| ------------------ | ----------------------------------- | --------- |\n| `small` | `28px` (`--m-control-height-small`) | `14px` |\n| Default / `medium` | `34px` | `14px` |\n| `large` | `40px` | `15px` |\n\nFocus uses a **brand border + 2px tinted glow** (not an outset outline ring):\n\n```css\nborder-color: var(--m-color-primary-hover);\nbox-shadow: var(--m-focus-shadow); /* 0 0 0 2px primary@20% */\n```\n\nRelated tokens: `--m-radius-control`, `--m-control-padding-x-*`, `--m-button-padding-x-*`, `--m-focus-shadow` / `--m-focus-shadow-danger`.\n\n## createTheme\n\nDerive the full `--m-*` set from a seed and apply it to the document or a scoped element:\n\n```ts\nimport { createTheme } from \"morya-ui\";\n\nconst theme = createTheme({\n seed: { colorPrimary: \"#0b6e4f\", borderRadius: 8 },\n // algorithm: 'dark' | 'compact' | ['dark', 'compact']\n});\n\ntheme.apply(); // write onto :root (or pass an element for scoped theming)\n// const dispose = theme.inject() // <style data-m-theme> (needed for component overrides)\n```\n\nLive tuning and export snippets: [Theme editor](/theme-editor).\n\n## With ConfigProvider\n\nTheme switching is the visual layer. `MConfigProvider` / `createMoryaUI` own size, copy, overlay mount, and other behavioral defaults. Use both together; see [Configuration](/docs/config).\n\nEnter/exit presets and `useMotion` live under [Motion](/docs/motion).\n",
|
|
33424
33602
|
"sections": [
|
|
33425
33603
|
{
|
|
33426
33604
|
"title": "",
|
|
@@ -33435,7 +33613,7 @@
|
|
|
33435
33613
|
{
|
|
33436
33614
|
"title": "Design tokens",
|
|
33437
33615
|
"id": "design-tokens",
|
|
33438
|
-
"body": "See the full [Design tokens](/docs/design-tokens) catalog (searchable, grouped by category).\n\n| Token | Use |\n| ----------------------------------------------------------------- | ----------------------------------------------- |\n| `--m-color-primary` | Brand color |\n| `--m-color-surface` | Page background |\n| `--m-color-text` | Body text |\n| `--m-color-border` | Dividers / strokes |\n| `--m-radius-sm/md/lg` | Radius scale |\n| `--m-space-*` | Spacing scale |\n| `--m-font-size-xs/sm/md/lg` | Component type scale |\n| `--m-opacity-disabled` | Disabled opacity |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | Overlay stacking (`zIndex` writes `--m-z-base`) |\n| `--m-menu-min-width` / `--m-control-affix-*` | Menu min width, input clear-button size |\n\nMotion tokens (`--m-motion-*`) are covered in [Motion](/docs/motion)."
|
|
33616
|
+
"body": "See the full [Design tokens](/docs/design-tokens) catalog (searchable, grouped by category).\n\n| Token | Use |\n| ----------------------------------------------------------------- | ----------------------------------------------- |\n| `--m-color-primary` | Brand color |\n| `--m-color-surface` | Page background |\n| `--m-color-text` | Body text |\n| `--m-color-border` | Dividers / strokes |\n| `--m-radius-sm/md/lg` | Radius scale |\n| `--m-space-*` | Spacing scale |\n| `--m-font-size-xs/sm/md/lg` | Component type scale |\n| `--m-opacity-disabled` | Disabled opacity |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | Overlay stacking (`zIndex` writes `--m-z-base`) |\n| `--m-overlay-menu-min-width` / `--m-control-affix-*` | Menu min width, input clear-button size |\n\nMotion tokens (`--m-motion-*`) are covered in [Motion](/docs/motion)."
|
|
33439
33617
|
},
|
|
33440
33618
|
{
|
|
33441
33619
|
"title": "Density",
|
|
@@ -33902,7 +34080,7 @@
|
|
|
33902
34080
|
"zh-CN": {
|
|
33903
34081
|
"title": "SSR 与服务端框架",
|
|
33904
34082
|
"description": "在 Nuxt、Astro、Vite SSR 等环境中使用 Morya UI。",
|
|
33905
|
-
"markdown": "---\ntitle: SSR 与服务端框架\norder: 10\ndescription: 在 Nuxt、Astro、Vite SSR 等环境中使用 Morya UI。\n---\n\n# SSR 与服务端框架\n\nMorya UI 面向 **Vue 3** 的 SSR 场景做了兼容（推荐 3.5 及以上）：服务端不会访问 `document` / `window`，组件实例 id 在服务端与客户端保持一致，命令式 API（`toast` / `message` / `confirm`）在服务端自动跳过。\n\n以下框架均可接入；按场景选择 **全量 SSR** 或 **客户端 Islands**。\n\n## 通用约定\n\n| 项 | 建议 |\n| --- | --- |\n| 样式 | 在应用入口或框架配置中引入 `morya-ui/styles.css` |\n| 主题 | 优先用根级 **`MConfigProvider`** 设置 `theme` / `density`，避免在 SSR 阶段单独调用 `useTheme()` 写 `document` |\n| 命令式反馈 | `toast()`、`message()`、`confirm()` 仅在浏览器执行；SSR 期间调用不会报错，但不会渲染 |\n| 按需导入 | 配合 `morya-ui/resolver` 与 `unplugin-vue-components` 减小体积 |\n| 浮层 | Dialog / Select / Tooltip 等使用 Vue `Teleport`；SSR 可输出占位，交互在客户端水合后生效 |\n\n## Nuxt 3\n\n推荐使用官方模块 **`@morya-ui/nuxt`**（同仓库 `packages/nuxt`）。\n\n### 安装\n\n```bash\npnpm add morya-ui @morya-ui/nuxt\npnpm add -D unplugin-vue-components\n```\n\n### 配置\n\n```ts\nimport { MoryaUIResolver } from 'morya-ui/resolver'\n// nuxt.config.ts\nimport Components from 'unplugin-vue-components/vite'\n\nexport default defineNuxtConfig({\n modules: ['@morya-ui/nuxt'],\n vite: {\n plugins: [\n Components({\n resolvers: [MoryaUIResolver()],\n }),\n ],\n },\n})\n```\n\n模块默认会：\n\n- 引入 `morya-ui/styles.css`\n- 将 `morya-ui` 加入 `build.transpile`\n- 在客户端注册 overlay 上下文（供 `toast` / `message` 使用）\n\n### 根布局\n\n```vue\n<!-- app.vue -->\n<script setup lang=\"ts\">\nconst theme = ref<'light' | 'dark'>('light')\n</script>\n\n<template>\n <MConfigProvider :theme=\"theme\" density=\"comfortable\">\n <NuxtPage />\n </MConfigProvider>\n</template>\n```\n\n按需导入时无需 `app.use(MoryaUI)`；若需全量注册，可在 `plugins/morya-ui.client.ts` 中 `nuxtApp.vueApp.use(MoryaUI)`。\n\n### 仅客户端组件\n\n极少数依赖浏览器专有 API 的场景（如自定义 `appendTo` 到尚未存在的节点），可用 Nuxt 的 `<ClientOnly>` 包裹。\n\n## Astro + Vue\n\n适合 **静态页 + Vue 岛**（管理后台、控制台嵌入营销站）。\n\n### 安装\n\n```bash\npnpm add morya-ui\nnpx astro add vue\n```\n\n### 在 Vue 岛中使用\n\n```astro\n---\n// src/pages/admin.astro\nimport AdminShell from '../components/AdminShell.vue'\n---\n<AdminShell client:load />\n```\n\n```vue\n<!-- src/components/AdminShell.vue -->\n<script setup lang=\"ts\">\nimport { MButton, MConfigProvider } from 'morya-ui'\nimport 'morya-ui/styles.css'\n</script>\n\n<template>\n <MConfigProvider theme=\"light\">\n <MButton label=\"Hello\" />\n </MConfigProvider>\n</template>\n```\n\n- 交互型后台推荐 `client:load` 或 `client:only`\n- 纯展示块可用 `client:visible` 延迟水合\n- Astro 本身不做 Vue SSR 时，无需处理 hydration id 问题\n\n## Vite SSR（含自定义服务端）\n\n```ts\nimport { MConfigProvider } from 'morya-ui/config-provider'\n// main.server.ts / entry-server.ts\nimport { createSSRApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\nexport function createApp() {\n const app = createSSRApp(App)\n return { app }\n}\n```\n\n客户端入口可注册 overlay 插件：\n\n```ts\n// entry-client.ts\nimport { createMoryaUI } from 'morya-ui'\n\ncreateApp(/* ... */)\n .use(createMoryaUI({ components: false }))\n .mount('#app')\n```\n\n构建时确保 `morya-ui` 进入 `ssr.noExternal`（或 `ssr: { noExternal: ['morya-ui'] }`），以便正确处理 `.vue` 与 CSS 副作用。\n\n## 其他 Vue SSR 方案\n\n| 方案 | 说明 |\n| --- | --- |\n| **
|
|
34083
|
+
"markdown": "---\ntitle: SSR 与服务端框架\norder: 10\ndescription: 在 Nuxt、Astro、Vite SSR 等环境中使用 Morya UI。\n---\n\n# SSR 与服务端框架\n\nMorya UI 面向 **Vue 3** 的 SSR 场景做了兼容（推荐 3.5 及以上）：服务端不会访问 `document` / `window`，组件实例 id 在服务端与客户端保持一致，命令式 API（`toast` / `message` / `confirm`）在服务端自动跳过。\n\n以下框架均可接入；按场景选择 **全量 SSR** 或 **客户端 Islands**。\n\n## 通用约定\n\n| 项 | 建议 |\n| --- | --- |\n| 样式 | 在应用入口或框架配置中引入 `morya-ui/styles.css` |\n| 主题 | 优先用根级 **`MConfigProvider`** 设置 `theme` / `density`，避免在 SSR 阶段单独调用 `useTheme()` 写 `document` |\n| 命令式反馈 | `toast()`、`message()`、`confirm()` 仅在浏览器执行；SSR 期间调用不会报错，但不会渲染 |\n| 按需导入 | 配合 `morya-ui/resolver` 与 `unplugin-vue-components` 减小体积 |\n| 浮层 | Dialog / Select / Tooltip 等使用 Vue `Teleport`；SSR 可输出占位，交互在客户端水合后生效 |\n\n## Nuxt 3\n\n推荐使用官方模块 **`@morya-ui/nuxt`**（同仓库 `packages/nuxt`）。\n\n### 安装\n\n```bash\npnpm add morya-ui @morya-ui/nuxt\npnpm add -D unplugin-vue-components\n```\n\n### 配置\n\n```ts\nimport { MoryaUIResolver } from 'morya-ui/resolver'\n// nuxt.config.ts\nimport Components from 'unplugin-vue-components/vite'\n\nexport default defineNuxtConfig({\n modules: ['@morya-ui/nuxt'],\n vite: {\n plugins: [\n Components({\n resolvers: [MoryaUIResolver()],\n }),\n ],\n },\n})\n```\n\n模块默认会：\n\n- 引入 `morya-ui/styles.css`\n- 将 `morya-ui` 加入 `build.transpile`\n- 在客户端注册 overlay 上下文（供 `toast` / `message` 使用）\n\n### 根布局\n\n```vue\n<!-- app.vue -->\n<script setup lang=\"ts\">\nconst theme = ref<'light' | 'dark'>('light')\n</script>\n\n<template>\n <MConfigProvider :theme=\"theme\" density=\"comfortable\">\n <NuxtPage />\n </MConfigProvider>\n</template>\n```\n\n按需导入时无需 `app.use(MoryaUI)`；若需全量注册，可在 `plugins/morya-ui.client.ts` 中 `nuxtApp.vueApp.use(MoryaUI)`。\n\n### 仅客户端组件\n\n极少数依赖浏览器专有 API 的场景（如自定义 `appendTo` 到尚未存在的节点），可用 Nuxt 的 `<ClientOnly>` 包裹。\n\n## Astro + Vue\n\n适合 **静态页 + Vue 岛**（管理后台、控制台嵌入营销站）。\n\n### 安装\n\n```bash\npnpm add morya-ui\nnpx astro add vue\n```\n\n### 在 Vue 岛中使用\n\n```astro\n---\n// src/pages/admin.astro\nimport AdminShell from '../components/AdminShell.vue'\n---\n<AdminShell client:load />\n```\n\n```vue\n<!-- src/components/AdminShell.vue -->\n<script setup lang=\"ts\">\nimport { MButton, MConfigProvider } from 'morya-ui'\nimport 'morya-ui/styles.css'\n</script>\n\n<template>\n <MConfigProvider theme=\"light\">\n <MButton label=\"Hello\" />\n </MConfigProvider>\n</template>\n```\n\n- 交互型后台推荐 `client:load` 或 `client:only`\n- 纯展示块可用 `client:visible` 延迟水合\n- Astro 本身不做 Vue SSR 时，无需处理 hydration id 问题\n\n## Vite SSR（含自定义服务端）\n\n```ts\nimport { MConfigProvider } from 'morya-ui/config-provider'\n// main.server.ts / entry-server.ts\nimport { createSSRApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\nexport function createApp() {\n const app = createSSRApp(App)\n return { app }\n}\n```\n\n客户端入口可注册 overlay 插件：\n\n```ts\n// entry-client.ts\nimport { createMoryaUI } from 'morya-ui'\n\ncreateApp(/* ... */)\n .use(createMoryaUI({ components: false }))\n .mount('#app')\n```\n\n构建时确保 `morya-ui` 进入 `ssr.noExternal`（或 `ssr: { noExternal: ['morya-ui'] }`），以便正确处理 `.vue` 与 CSS 副作用。\n\n## 其他 Vue SSR 方案\n\n| 方案 | 说明 |\n| --- | --- |\n| **vite-plugin-ssr / vike** | 与 Vite SSR 相同：服务端渲染 + 客户端 `createMoryaUI({ components: false })` |\n| **Inertia + Vue SSR** | 根组件包 `MConfigProvider`；命令式 API 仅在 `onMounted` 后调用 |\n\n## 已知限制\n\n- **不支持 Vue 2**；SSR 仅适用于 Vue 3。\n- **IE** 不在支持范围内（与 Vue 3 一致）。\n- 主题 `localStorage` 持久化仅在浏览器生效；SSR 首屏使用 `MConfigProvider` 或 cookie 同步主题可避免闪动。\n- 全量 E2E SSR 回归仍在完善；若遇到 hydration 警告，请提供最小复现并 [提 Issue](https://github.com/morya-space/morya-ui/issues)。\n\n## 下一步\n\n- [快速上手](/docs/quick-start)：安装与导入方式\n- [全局配置](/docs/config)：`MConfigProvider`\n- [主题](/docs/theme)：亮暗色与 token\n",
|
|
33906
34084
|
"sections": [
|
|
33907
34085
|
{
|
|
33908
34086
|
"title": "",
|
|
@@ -33932,7 +34110,7 @@
|
|
|
33932
34110
|
{
|
|
33933
34111
|
"title": "其他 Vue SSR 方案",
|
|
33934
34112
|
"id": "其他-vue-ssr-方案",
|
|
33935
|
-
"body": "| 方案 | 说明 |\n| --- | --- |\n| **
|
|
34113
|
+
"body": "| 方案 | 说明 |\n| --- | --- |\n| **vite-plugin-ssr / vike** | 与 Vite SSR 相同：服务端渲染 + 客户端 `createMoryaUI({ components: false })` |\n| **Inertia + Vue SSR** | 根组件包 `MConfigProvider`；命令式 API 仅在 `onMounted` 后调用 |"
|
|
33936
34114
|
},
|
|
33937
34115
|
{
|
|
33938
34116
|
"title": "已知限制",
|