@morya-ui/mcp 0.5.0 → 0.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/catalog.json +69 -92
- package/data/example-coverage.json +7 -11
- package/data/golden-pages/dashboard-page.vue +20 -14
- package/data/golden-pages/detail-page.vue +3 -2
- package/data/golden-pages/empty-state.vue +7 -6
- package/data/golden-pages/form-in-dialog.vue +4 -5
- package/data/golden-pages/form-page.vue +1 -1
- package/data/golden-pages/landing-page.vue +8 -41
- package/data/golden-pages/list-page-dense.vue +12 -14
- package/data/golden-pages/list-page-rail.vue +16 -82
- package/data/golden-pages/list-page.vue +10 -8
- package/data/golden-pages/login-page.vue +10 -29
- package/data/golden-pages/result-page.vue +7 -18
- package/data/golden-pages/settings-page.vue +3 -3
- package/data/golden-pages/wizard-form.vue +2 -2
- package/dist/__tests__/tools.test.js +24 -1
- package/dist/index.js +1 -1
- package/dist/page-snippets.d.ts +4 -0
- package/dist/page-snippets.js +5 -0
- package/dist/tools.js +16 -0
- package/package.json +1 -1
package/data/catalog.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
|
-
"generatedAt": "2026-10-
|
|
2
|
+
"generatedAt": "2026-10-14T09:30:48.391Z",
|
|
3
3
|
"library": {
|
|
4
4
|
"name": "morya-ui",
|
|
5
|
-
"version": "0.5.
|
|
5
|
+
"version": "0.5.1"
|
|
6
6
|
},
|
|
7
7
|
"mcp": {
|
|
8
8
|
"name": "@morya-ui/mcp",
|
|
9
|
-
"version": "0.5.
|
|
9
|
+
"version": "0.5.1"
|
|
10
10
|
},
|
|
11
11
|
"components": [
|
|
12
12
|
{
|
|
@@ -4448,7 +4448,7 @@
|
|
|
4448
4448
|
"description": "禁用透明度调节。"
|
|
4449
4449
|
},
|
|
4450
4450
|
{
|
|
4451
|
-
"name": "
|
|
4451
|
+
"name": "clearable",
|
|
4452
4452
|
"type": "boolean",
|
|
4453
4453
|
"default": "false",
|
|
4454
4454
|
"description": "显示清空按钮。"
|
|
@@ -4604,7 +4604,7 @@
|
|
|
4604
4604
|
"sectionId": "显示文本与清空",
|
|
4605
4605
|
"lang": "vue",
|
|
4606
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
|
|
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 clearable />\n</template>",
|
|
4608
4608
|
"locale": "zh-CN"
|
|
4609
4609
|
},
|
|
4610
4610
|
{
|
|
@@ -4658,7 +4658,7 @@
|
|
|
4658
4658
|
"sectionId": "show-text-and-clear",
|
|
4659
4659
|
"lang": "vue",
|
|
4660
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
|
|
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 clearable />\n</template>",
|
|
4662
4662
|
"locale": "en-US"
|
|
4663
4663
|
},
|
|
4664
4664
|
{
|
|
@@ -4728,7 +4728,7 @@
|
|
|
4728
4728
|
{
|
|
4729
4729
|
"id": "props",
|
|
4730
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| `
|
|
4731
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `'#1677ff'` | 当前颜色值（hex）或 CSS 渐变字符串。 |\n| `gradient` | `boolean` | `false` | 启用渐变色模式。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `disabledAlpha` | `boolean` | `false` | 禁用透明度调节。 |\n| `clearable` | `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
4732
|
},
|
|
4733
4733
|
{
|
|
4734
4734
|
"id": "events",
|
|
@@ -4751,7 +4751,7 @@
|
|
|
4751
4751
|
"body": "| 方法名 | 说明 |\n| --- | --- |\n| `open` | 打开颜色选择面板。 |\n| `close` | 关闭颜色选择面板。 |\n| `toggle` | 切换颜色选择面板的显示状态。 |"
|
|
4752
4752
|
}
|
|
4753
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| `
|
|
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| `clearable` | `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
4755
|
},
|
|
4756
4756
|
"en-US": {
|
|
4757
4757
|
"title": "ColorPicker",
|
|
@@ -4800,7 +4800,7 @@
|
|
|
4800
4800
|
{
|
|
4801
4801
|
"id": "props",
|
|
4802
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| `
|
|
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| `clearable` | `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
4804
|
},
|
|
4805
4805
|
{
|
|
4806
4806
|
"id": "events",
|
|
@@ -4823,7 +4823,7 @@
|
|
|
4823
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
4824
|
}
|
|
4825
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| `
|
|
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| `clearable` | `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
4827
|
}
|
|
4828
4828
|
}
|
|
4829
4829
|
},
|
|
@@ -4967,7 +4967,7 @@
|
|
|
4967
4967
|
{
|
|
4968
4968
|
"id": "命令项结构",
|
|
4969
4969
|
"title": "命令项结构",
|
|
4970
|
-
"body": "`CommandMenuItem` 字段：\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `label` | `string` | 展示文案，参与本地过滤。 |\n| `icon` | `string` |
|
|
4970
|
+
"body": "`CommandMenuItem` 字段：\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `label` | `string` | 展示文案，参与本地过滤。 |\n| `icon` | `string \\| Component` | 内置图标名、别名，或自定义 Vue 图标组件。 |\n| `shortcut` | `string` | 可选快捷键展示。 |\n| `command` | `() => void` | 选中后执行；执行完自动关闭面板。 |\n| `disabled` | `boolean` | 禁用项不可激活。 |"
|
|
4971
4971
|
},
|
|
4972
4972
|
{
|
|
4973
4973
|
"id": "键盘",
|
|
@@ -5000,7 +5000,7 @@
|
|
|
5000
5000
|
"body": "<h4 id=\"CommandMenuItem\">CommandMenuItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface CommandMenuItem extends Omit<MenuNodeBase, 'label'> {\n label: string\n}\n```"
|
|
5001
5001
|
}
|
|
5002
5002
|
],
|
|
5003
|
-
"markdown": "---\ntitle: CommandMenu\ncategory: 04 / NAVIGATION\ndescription: 可搜索的命令面板对话框。\n---\n\n# CommandMenu\n\n命令面板：搜索并执行 `model` 中的命令。适合全局快捷键（如 Cmd/Ctrl+K）场景。\n\n## 引入\n\n```ts\nimport type {CommandMenuItem} from 'morya-ui';\nimport { MCommandMenu } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/BasicUsage.zh.vue\"\n```\n\n## 命令项结构\n\n`CommandMenuItem` 字段：\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `label` | `string` | 展示文案，参与本地过滤。 |\n| `icon` | `string` |
|
|
5003
|
+
"markdown": "---\ntitle: CommandMenu\ncategory: 04 / NAVIGATION\ndescription: 可搜索的命令面板对话框。\n---\n\n# CommandMenu\n\n命令面板：搜索并执行 `model` 中的命令。适合全局快捷键（如 Cmd/Ctrl+K）场景。\n\n## 引入\n\n```ts\nimport type {CommandMenuItem} from 'morya-ui';\nimport { MCommandMenu } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/BasicUsage.zh.vue\"\n```\n\n## 命令项结构\n\n`CommandMenuItem` 字段：\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `label` | `string` | 展示文案，参与本地过滤。 |\n| `icon` | `string \\| Component` | 内置图标名、别名，或自定义 Vue 图标组件。 |\n| `shortcut` | `string` | 可选快捷键展示。 |\n| `command` | `() => void` | 选中后执行；执行完自动关闭面板。 |\n| `disabled` | `boolean` | 禁用项不可激活。 |\n\n## 键盘\n\n面板打开时：\n\n| 按键 | 行为 |\n| --- | --- |\n| `↑` / `↓` | 移动高亮项 |\n| `Enter` | 激活当前项 |\n| `Escape` | 关闭面板 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `CommandMenuItem[]` | `[]` | 命令列表。 |\n| `modelValue` | `boolean` | `false` | 是否可见（`v-model`）。 |\n| `placeholder` | `string` | 语言包 `searchCommands` | 搜索框占位。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 可见性变化。 |\n\n## 无障碍\n\n- 面板为 `role=\"dialog\"`、`aria-modal=\"true\"`。\n- 打开后焦点落在搜索框；请为触发按钮提供可访问名称。\n\n## Slots\n\n无插槽。\n\n## 类型\n\n<h4 id=\"CommandMenuItem\">CommandMenuItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface CommandMenuItem extends Omit<MenuNodeBase, 'label'> {\n label: string\n}\n```\n"
|
|
5004
5004
|
},
|
|
5005
5005
|
"en-US": {
|
|
5006
5006
|
"title": "CommandMenu",
|
|
@@ -5024,7 +5024,7 @@
|
|
|
5024
5024
|
{
|
|
5025
5025
|
"id": "command-item-shape",
|
|
5026
5026
|
"title": "Command item shape",
|
|
5027
|
-
"body": "`CommandMenuItem` fields:\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `label` | `string` | Display text; included in local filtering. |\n| `icon` | `string` |
|
|
5027
|
+
"body": "`CommandMenuItem` fields:\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `label` | `string` | Display text; included in local filtering. |\n| `icon` | `string \\| Component` | Built-in icon name, alias, or custom Vue icon component. |\n| `shortcut` | `string` | Optional shortcut hint. |\n| `command` | `() => void` | Runs on activate; closes the palette afterward. |\n| `disabled` | `boolean` | Disabled items cannot be activated. |"
|
|
5028
5028
|
},
|
|
5029
5029
|
{
|
|
5030
5030
|
"id": "keyboard",
|
|
@@ -5057,7 +5057,7 @@
|
|
|
5057
5057
|
"body": "<h4 id=\"CommandMenuItem\">CommandMenuItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface CommandMenuItem extends Omit<MenuNodeBase, 'label'> {\n label: string\n}\n```"
|
|
5058
5058
|
}
|
|
5059
5059
|
],
|
|
5060
|
-
"markdown": "---\ntitle: CommandMenu\ncategory: 04 / NAVIGATION\ndescription: Searchable command palette dialog.\n---\n\n# CommandMenu\n\nSearchable command palette for running actions from `model`. Fits global shortcuts such as Cmd/Ctrl+K.\n\n## Import\n\n```ts\nimport type {CommandMenuItem} from 'morya-ui';\nimport { MCommandMenu } from 'morya-ui'\n```\n\n## Basic usage\n\n```vue preview src=\"./demos/BasicUsage.en.vue\"\n```\n\n## Command item shape\n\n`CommandMenuItem` fields:\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `label` | `string` | Display text; included in local filtering. |\n| `icon` | `string` |
|
|
5060
|
+
"markdown": "---\ntitle: CommandMenu\ncategory: 04 / NAVIGATION\ndescription: Searchable command palette dialog.\n---\n\n# CommandMenu\n\nSearchable command palette for running actions from `model`. Fits global shortcuts such as Cmd/Ctrl+K.\n\n## Import\n\n```ts\nimport type {CommandMenuItem} from 'morya-ui';\nimport { MCommandMenu } from 'morya-ui'\n```\n\n## Basic usage\n\n```vue preview src=\"./demos/BasicUsage.en.vue\"\n```\n\n## Command item shape\n\n`CommandMenuItem` fields:\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `label` | `string` | Display text; included in local filtering. |\n| `icon` | `string \\| Component` | Built-in icon name, alias, or custom Vue icon component. |\n| `shortcut` | `string` | Optional shortcut hint. |\n| `command` | `() => void` | Runs on activate; closes the palette afterward. |\n| `disabled` | `boolean` | Disabled items cannot be activated. |\n\n## Keyboard\n\nWhen open:\n\n| Key | Action |\n| --- | --- |\n| `↑` / `↓` | Move highlight |\n| `Enter` | Activate highlighted item |\n| `Escape` | Close palette |\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `CommandMenuItem[]` | `[]` | Command list. |\n| `modelValue` | `boolean` | `false` | Visibility (`v-model`). |\n| `placeholder` | `string` | locale `searchCommands` | Search input placeholder. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Visibility change. |\n\n## Accessibility\n\n- Panel uses `role=\"dialog\"` and `aria-modal=\"true\"`.\n- Focus moves to the search field on open; label the trigger control.\n\n## Slots\n\nNo slots.\n\n## Types\n\n<h4 id=\"CommandMenuItem\">CommandMenuItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface CommandMenuItem extends Omit<MenuNodeBase, 'label'> {\n label: string\n}\n```\n"
|
|
5061
5061
|
}
|
|
5062
5062
|
}
|
|
5063
5063
|
},
|
|
@@ -12961,12 +12961,6 @@
|
|
|
12961
12961
|
"default": "false",
|
|
12962
12962
|
"description": "显示清除按钮。"
|
|
12963
12963
|
},
|
|
12964
|
-
{
|
|
12965
|
-
"name": "allowClear",
|
|
12966
|
-
"type": "boolean",
|
|
12967
|
-
"default": "—",
|
|
12968
|
-
"description": "`clearable` 的别名。"
|
|
12969
|
-
},
|
|
12970
12964
|
{
|
|
12971
12965
|
"name": "maxlength",
|
|
12972
12966
|
"type": "number",
|
|
@@ -13399,7 +13393,7 @@
|
|
|
13399
13393
|
{
|
|
13400
13394
|
"id": "props",
|
|
13401
13395
|
"title": "Props",
|
|
13402
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 绑定值。 |\n| `label` | `string` | — | 标签文案。 |\n| `helpText` | `string` | — | 辅助说明。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `status` | `'error' \\| 'warning'` | — | 视觉校验态；`error` 等同 invalid，`warning` 为警告描边。与 `invalid` 并存时以错误优先。 |\n| `id` | `string` | — | 原生 id；未传时自动生成。 |\n| `type` | `'text' \\| 'email' \\| 'password' \\| 'search' \\| 'url' \\| 'tel'` | `'text'` | 原生 type。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸；默认中等。可继承外层 Form `size`。 |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | 样式变体。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `readonly` | `boolean` | `false` | 只读。 |\n| `clearable` | `boolean` | `false` | 显示清除按钮。 |\n| `
|
|
13396
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 绑定值。 |\n| `label` | `string` | — | 标签文案。 |\n| `helpText` | `string` | — | 辅助说明。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `status` | `'error' \\| 'warning'` | — | 视觉校验态；`error` 等同 invalid，`warning` 为警告描边。与 `invalid` 并存时以错误优先。 |\n| `id` | `string` | — | 原生 id；未传时自动生成。 |\n| `type` | `'text' \\| 'email' \\| 'password' \\| 'search' \\| 'url' \\| 'tel'` | `'text'` | 原生 type。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸；默认中等。可继承外层 Form `size`。 |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | 样式变体。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `readonly` | `boolean` | `false` | 只读。 |\n| `clearable` | `boolean` | `false` | 显示清除按钮。 |\n| `maxlength` | `number` | — | 原生 maxlength。 |\n| `showCount` | `boolean` | `false` | 显示字数统计。 |\n| `errorMessage` | `string` | — | 错误文案；有值时视为 invalid。 |\n| `placeholder` | `string` | — | 占位符。 |\n| `name` | `string` | — | 原生 name。 |\n| `autocomplete` | `string` | — | 原生 autocomplete。 |\n| `autofocus` | `boolean` | `false` | 挂载后聚焦。 |\n| `pt` | [InputPassThrough](/docs/types#InputPassThrough) | — | DOM 分段透传，见上文 `pt`。 |"
|
|
13403
13397
|
},
|
|
13404
13398
|
{
|
|
13405
13399
|
"id": "slots",
|
|
@@ -13422,7 +13416,7 @@
|
|
|
13422
13416
|
"body": "<h4 id=\"InputPassThrough\">InputPassThrough</h4>\n\n`pt` 的类型。在 [FieldPassThrough](/docs/types#FieldPassThrough) 基础上多了前后缀等键：\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\n`PassThroughPart` 见 [API 类型 · PassThroughPart](/docs/types#PassThroughPart)。"
|
|
13423
13417
|
}
|
|
13424
13418
|
],
|
|
13425
|
-
"markdown": "---\ntitle: Input\ncategory: 02 / FORM\ndescription: 文本输入框。\n---\n\n# Input\n\n单行文本输入。\n\n## 引入\n\n```ts\nimport { MInput } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Invalid\n\n`invalid` 表示校验失败；也可只传 `error-message`。\n\n```vue preview src=\"./demos/Invalid.vue\"\n```\n\n## Clearable\n\n```vue preview src=\"./demos/Clearable.vue\"\n```\n\n## Prefix / Suffix\n\n```vue preview src=\"./demos/PrefixSuffix.zh.vue\"\n```\n\n## Password-like type\n\n```vue preview src=\"./demos/PasswordLikeType.vue\"\n```\n\n## Sizes\n\n支持 `small` / `large`，并兼容 `sm` / `md` / `lg`。\n\n```vue preview src=\"./demos/Sizes.vue\"\n```\n\n## Count\n\n`showCount` 显示字数；配合 `maxlength` 展示上限。\n\n```vue preview src=\"./demos/Count.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n```\n\n## 外层 attrs 与布局\n\n除 `@keydown`、`@focus` 等**控件事件**外，其余 fallthrough attrs（`class`、`style`、`data-*`、`title`、`tabindex` 等）均落在 field 外层（`.m-input-field`），不会直接写到 `<input>`。栅格、间距、测试 id 这样写即可：\n\n```vue preview src=\"./demos/OuterAttrsAndLayout.zh.vue\"\n```\n\n更多约定见 [样式与 attrs](/docs/attrs)。\n\n## 键盘与焦点事件\n\n`@keydown`、`@focus`、`@blur` 等绑在底层 input 上，用法与原生 input 相同：\n\n```vue preview src=\"./demos/KeyboardAndFocusEvents.zh.vue\"\n```\n\n## pt\n\n按 DOM 分段透传。常用键：`root`、`input`、`label`、`prefix`、`suffix`、`help`、`count`。\n\n```vue preview src=\"./demos/Pt.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 绑定值。 |\n| `label` | `string` | — | 标签文案。 |\n| `helpText` | `string` | — | 辅助说明。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `status` | `'error' \\| 'warning'` | — | 视觉校验态；`error` 等同 invalid，`warning` 为警告描边。与 `invalid` 并存时以错误优先。 |\n| `id` | `string` | — | 原生 id；未传时自动生成。 |\n| `type` | `'text' \\| 'email' \\| 'password' \\| 'search' \\| 'url' \\| 'tel'` | `'text'` | 原生 type。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸；默认中等。可继承外层 Form `size`。 |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | 样式变体。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `readonly` | `boolean` | `false` | 只读。 |\n| `clearable` | `boolean` | `false` | 显示清除按钮。 |\n| `
|
|
13419
|
+
"markdown": "---\ntitle: Input\ncategory: 02 / FORM\ndescription: 文本输入框。\n---\n\n# Input\n\n单行文本输入。\n\n## 引入\n\n```ts\nimport { MInput } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Invalid\n\n`invalid` 表示校验失败；也可只传 `error-message`。\n\n```vue preview src=\"./demos/Invalid.vue\"\n```\n\n## Clearable\n\n```vue preview src=\"./demos/Clearable.vue\"\n```\n\n## Prefix / Suffix\n\n```vue preview src=\"./demos/PrefixSuffix.zh.vue\"\n```\n\n## Password-like type\n\n```vue preview src=\"./demos/PasswordLikeType.vue\"\n```\n\n## Sizes\n\n支持 `small` / `large`，并兼容 `sm` / `md` / `lg`。\n\n```vue preview src=\"./demos/Sizes.vue\"\n```\n\n## Count\n\n`showCount` 显示字数；配合 `maxlength` 展示上限。\n\n```vue preview src=\"./demos/Count.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n```\n\n## 外层 attrs 与布局\n\n除 `@keydown`、`@focus` 等**控件事件**外，其余 fallthrough attrs（`class`、`style`、`data-*`、`title`、`tabindex` 等）均落在 field 外层（`.m-input-field`），不会直接写到 `<input>`。栅格、间距、测试 id 这样写即可：\n\n```vue preview src=\"./demos/OuterAttrsAndLayout.zh.vue\"\n```\n\n更多约定见 [样式与 attrs](/docs/attrs)。\n\n## 键盘与焦点事件\n\n`@keydown`、`@focus`、`@blur` 等绑在底层 input 上，用法与原生 input 相同：\n\n```vue preview src=\"./demos/KeyboardAndFocusEvents.zh.vue\"\n```\n\n## pt\n\n按 DOM 分段透传。常用键：`root`、`input`、`label`、`prefix`、`suffix`、`help`、`count`。\n\n```vue preview src=\"./demos/Pt.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 绑定值。 |\n| `label` | `string` | — | 标签文案。 |\n| `helpText` | `string` | — | 辅助说明。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `status` | `'error' \\| 'warning'` | — | 视觉校验态；`error` 等同 invalid，`warning` 为警告描边。与 `invalid` 并存时以错误优先。 |\n| `id` | `string` | — | 原生 id；未传时自动生成。 |\n| `type` | `'text' \\| 'email' \\| 'password' \\| 'search' \\| 'url' \\| 'tel'` | `'text'` | 原生 type。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸；默认中等。可继承外层 Form `size`。 |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | 样式变体。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `readonly` | `boolean` | `false` | 只读。 |\n| `clearable` | `boolean` | `false` | 显示清除按钮。 |\n| `maxlength` | `number` | — | 原生 maxlength。 |\n| `showCount` | `boolean` | `false` | 显示字数统计。 |\n| `errorMessage` | `string` | — | 错误文案；有值时视为 invalid。 |\n| `placeholder` | `string` | — | 占位符。 |\n| `name` | `string` | — | 原生 name。 |\n| `autocomplete` | `string` | — | 原生 autocomplete。 |\n| `autofocus` | `boolean` | `false` | 挂载后聚焦。 |\n| `pt` | [InputPassThrough](/docs/types#InputPassThrough) | — | DOM 分段透传，见上文 `pt`。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `prefix` | 输入框左侧装饰（如单位、图标）。 |\n| `suffix` | 输入框右侧装饰；与清除按钮可并存。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string` | 值变化。 |\n| `clear` | — | 点击清除时触发。 |\n| `blur` | — | — |\n| `change` | — | — |\n| `focus` | — | — |\n\n## Instance\n\n| 方法 | 说明 |\n| --- | --- |\n| `focus()` | 聚焦底层 input。 |\n| `blur()` | 使底层 input 失焦。 |\n| `select()` | 选中底层 input 的全部文本。 |\n\n## 类型\n\n<h4 id=\"InputPassThrough\">InputPassThrough</h4>\n\n`pt` 的类型。在 [FieldPassThrough](/docs/types#FieldPassThrough) 基础上多了前后缀等键：\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\n`PassThroughPart` 见 [API 类型 · PassThroughPart](/docs/types#PassThroughPart)。\n"
|
|
13426
13420
|
},
|
|
13427
13421
|
"en-US": {
|
|
13428
13422
|
"title": "Input",
|
|
@@ -13501,7 +13495,7 @@
|
|
|
13501
13495
|
{
|
|
13502
13496
|
"id": "props",
|
|
13503
13497
|
"title": "Props",
|
|
13504
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Bound value. |\n| `label` | `string` | — | Label text. |\n| `helpText` | `string` | — | Helper text. |\n| `invalid` | `boolean` | `false` | Validation failed state. |\n| `status` | `'error' \\| 'warning'` | — | Visual status; `error` matches invalid, `warning` is caution chrome. Error wins over warning. |\n| `id` | `string` | — | Native id; auto-generated when omitted. |\n| `type` | `'text' \\| 'email' \\| 'password' \\| 'search' \\| 'url' \\| 'tel'` | `'text'` | Native type. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size; medium by default. Inherits Form `size` when omitted. |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | Style variant. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `readonly` | `boolean` | `false` | Read-only. |\n| `clearable` | `boolean` | `false` | Show clear button. |\n| `
|
|
13498
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Bound value. |\n| `label` | `string` | — | Label text. |\n| `helpText` | `string` | — | Helper text. |\n| `invalid` | `boolean` | `false` | Validation failed state. |\n| `status` | `'error' \\| 'warning'` | — | Visual status; `error` matches invalid, `warning` is caution chrome. Error wins over warning. |\n| `id` | `string` | — | Native id; auto-generated when omitted. |\n| `type` | `'text' \\| 'email' \\| 'password' \\| 'search' \\| 'url' \\| 'tel'` | `'text'` | Native type. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size; medium by default. Inherits Form `size` when omitted. |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | Style variant. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `readonly` | `boolean` | `false` | Read-only. |\n| `clearable` | `boolean` | `false` | Show clear button. |\n| `maxlength` | `number` | — | Native maxlength. |\n| `showCount` | `boolean` | `false` | Show character count. |\n| `errorMessage` | `string` | — | Error copy; implies invalid when set. |\n| `placeholder` | `string` | — | Placeholder. |\n| `name` | `string` | — | Native name. |\n| `autocomplete` | `string` | — | Native autocomplete. |\n| `autofocus` | `boolean` | `false` | Focus on mount. |\n| `pt` | [InputPassThrough](/docs/types#InputPassThrough) | — | Pass-through per DOM part; see **pt** above. |"
|
|
13505
13499
|
},
|
|
13506
13500
|
{
|
|
13507
13501
|
"id": "slots",
|
|
@@ -13524,7 +13518,7 @@
|
|
|
13524
13518
|
"body": "<h4 id=\"InputPassThrough\">InputPassThrough</h4>\n\nType of `pt`. Extends [FieldPassThrough](/docs/types#FieldPassThrough) with affix parts:\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\nSee [PassThroughPart](/docs/types#PassThroughPart) in API types."
|
|
13525
13519
|
}
|
|
13526
13520
|
],
|
|
13527
|
-
"markdown": "---\ntitle: Input\ncategory: 02 / FORM\ndescription: Text input field.\n---\n\n# Input\n\nSingle-line text input.\n\n## Import\n\n```ts\nimport { MInput } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Invalid\n\nUse `invalid` for validation failure, or rely on `error-message` alone.\n\n```vue preview src=\"./demos/Invalid.vue\"\n```\n\n## Clearable\n\n```vue preview src=\"./demos/Clearable.vue\"\n```\n\n## Prefix / Suffix\n\n```vue preview src=\"./demos/PrefixSuffix.en.vue\"\n```\n\n## Password-like type\n\n```vue preview src=\"./demos/PasswordLikeType.vue\"\n```\n\n## Sizes\n\nSupports `small` / `large`, and also `sm` / `md` / `lg`.\n\n```vue preview src=\"./demos/Sizes.vue\"\n```\n\n## Count\n\n`showCount` shows the character count; pair with `maxlength` for an upper bound.\n\n```vue preview src=\"./demos/Count.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n```\n\n## Outer attrs & layout\n\nAll fallthrough attrs except **control events** (`@keydown`, `@focus`, …) bind to the field wrapper (`.m-input-field`), not the raw `<input>`—including `class`, `style`, `data-*`, `title`, `tabindex`, and undeclared attrs:\n\n```vue preview src=\"./demos/OuterAttrsAndLayout.en.vue\"\n```\n\nSee [Styling & attrs](/docs/attrs) for library-wide rules.\n\n## Keyboard & focus events\n\n`@keydown`, `@focus`, `@blur`, and similar listeners attach to the underlying input:\n\n```vue preview src=\"./demos/KeyboardAndFocusEvents.en.vue\"\n```\n\n## pt\n\nPass-through per DOM part. Common keys: `root`, `input`, `label`, `prefix`, `suffix`, `help`, `count`.\n\n```vue preview src=\"./demos/Pt.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Bound value. |\n| `label` | `string` | — | Label text. |\n| `helpText` | `string` | — | Helper text. |\n| `invalid` | `boolean` | `false` | Validation failed state. |\n| `status` | `'error' \\| 'warning'` | — | Visual status; `error` matches invalid, `warning` is caution chrome. Error wins over warning. |\n| `id` | `string` | — | Native id; auto-generated when omitted. |\n| `type` | `'text' \\| 'email' \\| 'password' \\| 'search' \\| 'url' \\| 'tel'` | `'text'` | Native type. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size; medium by default. Inherits Form `size` when omitted. |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | Style variant. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `readonly` | `boolean` | `false` | Read-only. |\n| `clearable` | `boolean` | `false` | Show clear button. |\n| `
|
|
13521
|
+
"markdown": "---\ntitle: Input\ncategory: 02 / FORM\ndescription: Text input field.\n---\n\n# Input\n\nSingle-line text input.\n\n## Import\n\n```ts\nimport { MInput } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Invalid\n\nUse `invalid` for validation failure, or rely on `error-message` alone.\n\n```vue preview src=\"./demos/Invalid.vue\"\n```\n\n## Clearable\n\n```vue preview src=\"./demos/Clearable.vue\"\n```\n\n## Prefix / Suffix\n\n```vue preview src=\"./demos/PrefixSuffix.en.vue\"\n```\n\n## Password-like type\n\n```vue preview src=\"./demos/PasswordLikeType.vue\"\n```\n\n## Sizes\n\nSupports `small` / `large`, and also `sm` / `md` / `lg`.\n\n```vue preview src=\"./demos/Sizes.vue\"\n```\n\n## Count\n\n`showCount` shows the character count; pair with `maxlength` for an upper bound.\n\n```vue preview src=\"./demos/Count.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n```\n\n## Outer attrs & layout\n\nAll fallthrough attrs except **control events** (`@keydown`, `@focus`, …) bind to the field wrapper (`.m-input-field`), not the raw `<input>`—including `class`, `style`, `data-*`, `title`, `tabindex`, and undeclared attrs:\n\n```vue preview src=\"./demos/OuterAttrsAndLayout.en.vue\"\n```\n\nSee [Styling & attrs](/docs/attrs) for library-wide rules.\n\n## Keyboard & focus events\n\n`@keydown`, `@focus`, `@blur`, and similar listeners attach to the underlying input:\n\n```vue preview src=\"./demos/KeyboardAndFocusEvents.en.vue\"\n```\n\n## pt\n\nPass-through per DOM part. Common keys: `root`, `input`, `label`, `prefix`, `suffix`, `help`, `count`.\n\n```vue preview src=\"./demos/Pt.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Bound value. |\n| `label` | `string` | — | Label text. |\n| `helpText` | `string` | — | Helper text. |\n| `invalid` | `boolean` | `false` | Validation failed state. |\n| `status` | `'error' \\| 'warning'` | — | Visual status; `error` matches invalid, `warning` is caution chrome. Error wins over warning. |\n| `id` | `string` | — | Native id; auto-generated when omitted. |\n| `type` | `'text' \\| 'email' \\| 'password' \\| 'search' \\| 'url' \\| 'tel'` | `'text'` | Native type. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size; medium by default. Inherits Form `size` when omitted. |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | Style variant. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `readonly` | `boolean` | `false` | Read-only. |\n| `clearable` | `boolean` | `false` | Show clear button. |\n| `maxlength` | `number` | — | Native maxlength. |\n| `showCount` | `boolean` | `false` | Show character count. |\n| `errorMessage` | `string` | — | Error copy; implies invalid when set. |\n| `placeholder` | `string` | — | Placeholder. |\n| `name` | `string` | — | Native name. |\n| `autocomplete` | `string` | — | Native autocomplete. |\n| `autofocus` | `boolean` | `false` | Focus on mount. |\n| `pt` | [InputPassThrough](/docs/types#InputPassThrough) | — | Pass-through per DOM part; see **pt** above. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `prefix` | Left adornment (unit, icon, and so on). |\n| `suffix` | Right adornment; can coexist with the clear button. |\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string` | Value changed. |\n| `clear` | — | Fired when clear is clicked. |\n\n## Instance\n\n| Method | Description |\n| --- | --- |\n| `focus()` | Focus the underlying input. |\n| `blur()` | Blur the underlying input. |\n| `select()` | Select all text in the input. |\n\n## Types\n\n<h4 id=\"InputPassThrough\">InputPassThrough</h4>\n\nType of `pt`. Extends [FieldPassThrough](/docs/types#FieldPassThrough) with affix parts:\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\nSee [PassThroughPart](/docs/types#PassThroughPart) in API types.\n"
|
|
13528
13522
|
}
|
|
13529
13523
|
}
|
|
13530
13524
|
},
|
|
@@ -14333,12 +14327,6 @@
|
|
|
14333
14327
|
"default": "false",
|
|
14334
14328
|
"description": "显示清除按钮。"
|
|
14335
14329
|
},
|
|
14336
|
-
{
|
|
14337
|
-
"name": "allowClear",
|
|
14338
|
-
"type": "boolean",
|
|
14339
|
-
"default": "—",
|
|
14340
|
-
"description": "`clearable` 的别名。"
|
|
14341
|
-
},
|
|
14342
14330
|
{
|
|
14343
14331
|
"name": "maxlength",
|
|
14344
14332
|
"type": "number",
|
|
@@ -14568,7 +14556,7 @@
|
|
|
14568
14556
|
{
|
|
14569
14557
|
"id": "props",
|
|
14570
14558
|
"title": "Props",
|
|
14571
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 绑定值。 |\n| `label` | `string` | — | 标签文案。 |\n| `feedback` | `boolean` | `false` | 显示强度提示。 |\n| `toggleMask` | `boolean` | `true` | 显示切换明文按钮。 |\n| `showPasswordOn` | `'click' \\| 'mousedown'` | `'click'` | 显示明文的方式；`mousedown` 为按住预览。 |\n| `showIcon` | `IconName \\| Component` | `'eye'` | 密文态图标（点击显示）。 |\n| `hideIcon` | `IconName \\| Component` | `'eye-off'` | 明文态图标（点击隐藏）。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸；可继承 Form `size`。 |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | 样式变体。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `status` | `'error' \\| 'warning'` | — | 视觉校验态；`error` 等同 invalid，`warning` 为警告描边。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `readonly` | `boolean` | `false` | 只读。 |\n| `clearable` | `boolean` | `false` | 显示清除按钮。 |\n| `
|
|
14559
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 绑定值。 |\n| `label` | `string` | — | 标签文案。 |\n| `feedback` | `boolean` | `false` | 显示强度提示。 |\n| `toggleMask` | `boolean` | `true` | 显示切换明文按钮。 |\n| `showPasswordOn` | `'click' \\| 'mousedown'` | `'click'` | 显示明文的方式；`mousedown` 为按住预览。 |\n| `showIcon` | `IconName \\| Component` | `'eye'` | 密文态图标（点击显示）。 |\n| `hideIcon` | `IconName \\| Component` | `'eye-off'` | 明文态图标（点击隐藏）。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸；可继承 Form `size`。 |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | 样式变体。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `status` | `'error' \\| 'warning'` | — | 视觉校验态；`error` 等同 invalid，`warning` 为警告描边。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `readonly` | `boolean` | `false` | 只读。 |\n| `clearable` | `boolean` | `false` | 显示清除按钮。 |\n| `maxlength` | `number` | — | 原生 maxlength。 |\n| `showCount` | `boolean` | `false` | 显示字数统计。 |\n| `id` | `string` | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
14572
14560
|
},
|
|
14573
14561
|
{
|
|
14574
14562
|
"id": "events",
|
|
@@ -14586,7 +14574,7 @@
|
|
|
14586
14574
|
"body": "| 插槽名 | 参数 | 说明 |\n| --- | --- | --- |\n| `showIcon` | `{ unmasked }` | 替换显示密码图标。 |\n| `hideIcon` | `{ unmasked }` | 替换隐藏密码图标。 |"
|
|
14587
14575
|
}
|
|
14588
14576
|
],
|
|
14589
|
-
"markdown": "---\ntitle: InputPassword\ncategory: 02 / FORM\ndescription: 密码输入框，支持显示/隐藏与强度提示。\n---\n\n# InputPassword\n\n密码输入。默认提供显示/隐藏切换；可选密码强度反馈。\n\n## 引入\n\n```ts\nimport { MInputPassword } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Feedback\n\n```vue preview src=\"./demos/Feedback.vue\"\n```\n\n## Custom icons\n\n默认用 `eye` / `eye-off`。可用属性换成其它系统图标，或用插槽完全自定义。\n\n```vue preview src=\"./demos/CustomIcons.zh.vue\"\n```\n\n## Hold to peek\n\n`showPasswordOn=\"mousedown\"` 按住显示、松开隐藏（键盘 Space / Enter 同样按住预览）。\n\n```vue preview src=\"./demos/HoldToPeek.vue\"\n```\n\n## Clearable & count\n\n```vue preview src=\"./demos/ClearableAndCount.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 绑定值。 |\n| `label` | `string` | — | 标签文案。 |\n| `feedback` | `boolean` | `false` | 显示强度提示。 |\n| `toggleMask` | `boolean` | `true` | 显示切换明文按钮。 |\n| `showPasswordOn` | `'click' \\| 'mousedown'` | `'click'` | 显示明文的方式；`mousedown` 为按住预览。 |\n| `showIcon` | `IconName \\| Component` | `'eye'` | 密文态图标（点击显示）。 |\n| `hideIcon` | `IconName \\| Component` | `'eye-off'` | 明文态图标（点击隐藏）。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸；可继承 Form `size`。 |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | 样式变体。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `status` | `'error' \\| 'warning'` | — | 视觉校验态；`error` 等同 invalid，`warning` 为警告描边。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `readonly` | `boolean` | `false` | 只读。 |\n| `clearable` | `boolean` | `false` | 显示清除按钮。 |\n| `
|
|
14577
|
+
"markdown": "---\ntitle: InputPassword\ncategory: 02 / FORM\ndescription: 密码输入框，支持显示/隐藏与强度提示。\n---\n\n# InputPassword\n\n密码输入。默认提供显示/隐藏切换；可选密码强度反馈。\n\n## 引入\n\n```ts\nimport { MInputPassword } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Feedback\n\n```vue preview src=\"./demos/Feedback.vue\"\n```\n\n## Custom icons\n\n默认用 `eye` / `eye-off`。可用属性换成其它系统图标，或用插槽完全自定义。\n\n```vue preview src=\"./demos/CustomIcons.zh.vue\"\n```\n\n## Hold to peek\n\n`showPasswordOn=\"mousedown\"` 按住显示、松开隐藏（键盘 Space / Enter 同样按住预览）。\n\n```vue preview src=\"./demos/HoldToPeek.vue\"\n```\n\n## Clearable & count\n\n```vue preview src=\"./demos/ClearableAndCount.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 绑定值。 |\n| `label` | `string` | — | 标签文案。 |\n| `feedback` | `boolean` | `false` | 显示强度提示。 |\n| `toggleMask` | `boolean` | `true` | 显示切换明文按钮。 |\n| `showPasswordOn` | `'click' \\| 'mousedown'` | `'click'` | 显示明文的方式；`mousedown` 为按住预览。 |\n| `showIcon` | `IconName \\| Component` | `'eye'` | 密文态图标（点击显示）。 |\n| `hideIcon` | `IconName \\| Component` | `'eye-off'` | 明文态图标（点击隐藏）。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸；可继承 Form `size`。 |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | 样式变体。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `status` | `'error' \\| 'warning'` | — | 视觉校验态；`error` 等同 invalid，`warning` 为警告描边。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `readonly` | `boolean` | `false` | 只读。 |\n| `clearable` | `boolean` | `false` | 显示清除按钮。 |\n| `maxlength` | `number` | — | 原生 maxlength。 |\n| `showCount` | `boolean` | `false` | 显示字数统计。 |\n| `id` | `string` | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string` | 值变化。 |\n| `clear` | — | 点击清除时触发。 |\n| `blur` | — | — |\n| `change` | — | — |\n| `focus` | — | — |\n\n## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `focus()` | 聚焦底层输入框。 |\n| `blur()` | 使底层输入框失焦。 |\n| `select()` | 选中输入框的全部文本。 |\n\n## Slots\n\n| 插槽名 | 参数 | 说明 |\n| --- | --- | --- |\n| `showIcon` | `{ unmasked }` | 替换显示密码图标。 |\n| `hideIcon` | `{ unmasked }` | 替换隐藏密码图标。 |\n"
|
|
14590
14578
|
},
|
|
14591
14579
|
"en-US": {
|
|
14592
14580
|
"title": "InputPassword",
|
|
@@ -14630,7 +14618,7 @@
|
|
|
14630
14618
|
{
|
|
14631
14619
|
"id": "props",
|
|
14632
14620
|
"title": "Props",
|
|
14633
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Bound value. |\n| `label` | `string` | — | Label text. |\n| `feedback` | `boolean` | `false` | Show strength feedback. |\n| `toggleMask` | `boolean` | `true` | Show toggle for revealing the password. |\n| `showPasswordOn` | `'click' \\| 'mousedown'` | `'click'` | How to reveal; `mousedown` is hold-to-peek. |\n| `showIcon` | `IconName \\| Component` | `'eye'` | Icon while masked (click to reveal). |\n| `hideIcon` | `IconName \\| Component` | `'eye-off'` | Icon while visible (click to hide). |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size; inherits Form `size` when omitted. |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | Visual variant. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `invalid` | `boolean` | `false` | Validation failed state. |\n| `status` | `'error' \\| 'warning'` | — | Visual status; `error` matches invalid, `warning` is caution chrome. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `readonly` | `boolean` | `false` | Read-only. |\n| `clearable` | `boolean` | `false` | Show a clear button. |\n| `
|
|
14621
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Bound value. |\n| `label` | `string` | — | Label text. |\n| `feedback` | `boolean` | `false` | Show strength feedback. |\n| `toggleMask` | `boolean` | `true` | Show toggle for revealing the password. |\n| `showPasswordOn` | `'click' \\| 'mousedown'` | `'click'` | How to reveal; `mousedown` is hold-to-peek. |\n| `showIcon` | `IconName \\| Component` | `'eye'` | Icon while masked (click to reveal). |\n| `hideIcon` | `IconName \\| Component` | `'eye-off'` | Icon while visible (click to hide). |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size; inherits Form `size` when omitted. |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | Visual variant. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `invalid` | `boolean` | `false` | Validation failed state. |\n| `status` | `'error' \\| 'warning'` | — | Visual status; `error` matches invalid, `warning` is caution chrome. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `readonly` | `boolean` | `false` | Read-only. |\n| `clearable` | `boolean` | `false` | Show a clear button. |\n| `maxlength` | `number` | — | Native maxlength. |\n| `showCount` | `boolean` | `false` | Show character count. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
14634
14622
|
},
|
|
14635
14623
|
{
|
|
14636
14624
|
"id": "events",
|
|
@@ -14648,7 +14636,7 @@
|
|
|
14648
14636
|
"body": "| Slot | Props | Description |\n| --- | --- | --- |\n| `showIcon` | `{ unmasked }` | Replace the show-password icon. |\n| `hideIcon` | `{ unmasked }` | Replace the hide-password icon. |"
|
|
14649
14637
|
}
|
|
14650
14638
|
],
|
|
14651
|
-
"markdown": "---\ntitle: InputPassword\ncategory: 02 / FORM\ndescription: Password input with show/hide toggle and optional strength feedback.\n---\n\n# InputPassword\n\nPassword input. Includes a show/hide toggle by default; optional password strength feedback.\n\n## Import\n\n```ts\nimport { MInputPassword } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Feedback\n\n```vue preview src=\"./demos/Feedback.vue\"\n```\n\n## Custom icons\n\nDefaults are `eye` / `eye-off`. Swap them with other system icons via props, or replace them entirely with slots.\n\n```vue preview src=\"./demos/CustomIcons.en.vue\"\n```\n\n## Hold to peek\n\n`showPasswordOn=\"mousedown\"` reveals while pressed and hides on release (Space / Enter do the same).\n\n```vue preview src=\"./demos/HoldToPeek.vue\"\n```\n\n## Clearable & count\n\n```vue preview src=\"./demos/ClearableAndCount.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Bound value. |\n| `label` | `string` | — | Label text. |\n| `feedback` | `boolean` | `false` | Show strength feedback. |\n| `toggleMask` | `boolean` | `true` | Show toggle for revealing the password. |\n| `showPasswordOn` | `'click' \\| 'mousedown'` | `'click'` | How to reveal; `mousedown` is hold-to-peek. |\n| `showIcon` | `IconName \\| Component` | `'eye'` | Icon while masked (click to reveal). |\n| `hideIcon` | `IconName \\| Component` | `'eye-off'` | Icon while visible (click to hide). |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size; inherits Form `size` when omitted. |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | Visual variant. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `invalid` | `boolean` | `false` | Validation failed state. |\n| `status` | `'error' \\| 'warning'` | — | Visual status; `error` matches invalid, `warning` is caution chrome. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `readonly` | `boolean` | `false` | Read-only. |\n| `clearable` | `boolean` | `false` | Show a clear button. |\n| `
|
|
14639
|
+
"markdown": "---\ntitle: InputPassword\ncategory: 02 / FORM\ndescription: Password input with show/hide toggle and optional strength feedback.\n---\n\n# InputPassword\n\nPassword input. Includes a show/hide toggle by default; optional password strength feedback.\n\n## Import\n\n```ts\nimport { MInputPassword } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Feedback\n\n```vue preview src=\"./demos/Feedback.vue\"\n```\n\n## Custom icons\n\nDefaults are `eye` / `eye-off`. Swap them with other system icons via props, or replace them entirely with slots.\n\n```vue preview src=\"./demos/CustomIcons.en.vue\"\n```\n\n## Hold to peek\n\n`showPasswordOn=\"mousedown\"` reveals while pressed and hides on release (Space / Enter do the same).\n\n```vue preview src=\"./demos/HoldToPeek.vue\"\n```\n\n## Clearable & count\n\n```vue preview src=\"./demos/ClearableAndCount.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Bound value. |\n| `label` | `string` | — | Label text. |\n| `feedback` | `boolean` | `false` | Show strength feedback. |\n| `toggleMask` | `boolean` | `true` | Show toggle for revealing the password. |\n| `showPasswordOn` | `'click' \\| 'mousedown'` | `'click'` | How to reveal; `mousedown` is hold-to-peek. |\n| `showIcon` | `IconName \\| Component` | `'eye'` | Icon while masked (click to reveal). |\n| `hideIcon` | `IconName \\| Component` | `'eye-off'` | Icon while visible (click to hide). |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size; inherits Form `size` when omitted. |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | Visual variant. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `invalid` | `boolean` | `false` | Validation failed state. |\n| `status` | `'error' \\| 'warning'` | — | Visual status; `error` matches invalid, `warning` is caution chrome. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `readonly` | `boolean` | `false` | Read-only. |\n| `clearable` | `boolean` | `false` | Show a clear button. |\n| `maxlength` | `number` | — | Native maxlength. |\n| `showCount` | `boolean` | `false` | Show character count. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string` | Value changed. |\n| `clear` | — | Emitted when the value is cleared. |\n\n## Methods\n\n| Method | Description |\n| --- | --- |\n| `focus()` | Focus the underlying input. |\n| `blur()` | Blur the underlying input. |\n| `select()` | Select all text in the input. |\n\n## Slots\n\n| Slot | Props | Description |\n| --- | --- | --- |\n| `showIcon` | `{ unmasked }` | Replace the show-password icon. |\n| `hideIcon` | `{ unmasked }` | Replace the hide-password icon. |\n"
|
|
14652
14640
|
}
|
|
14653
14641
|
}
|
|
14654
14642
|
},
|
|
@@ -16793,7 +16781,7 @@
|
|
|
16793
16781
|
{
|
|
16794
16782
|
"id": "菜单项字段",
|
|
16795
16783
|
"title": "菜单项字段",
|
|
16796
|
-
"body": "| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `label` | `string` | 展示文案。 |\n| `icon` | `string` |
|
|
16784
|
+
"body": "| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `label` | `string` | 展示文案。 |\n| `icon` | `string \\| Component` | 内置图标名、别名，或自定义 Vue 图标组件。 |\n| `command` | `() => void` | 点击时执行。 |\n| `disabled` | `boolean` | 禁用项。 |\n| `items` | `MegaMenuItem[][]` | 分栏子面板。 |"
|
|
16797
16785
|
},
|
|
16798
16786
|
{
|
|
16799
16787
|
"id": "props",
|
|
@@ -16821,7 +16809,7 @@
|
|
|
16821
16809
|
"body": "<h4 id=\"MegaMenuItem\">MegaMenuItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface MegaMenuItem extends Omit<MenuNodeBase, 'label' | 'items'> {\n label: string\n /** Column groups for mega panel; each entry is a column of items. */\n items?: MegaMenuItem[][]\n}\n```"
|
|
16822
16810
|
}
|
|
16823
16811
|
],
|
|
16824
|
-
"markdown": "---\ntitle: MegaMenu\ncategory: 04 / NAVIGATION\ndescription: 水平菜单，子项按多列面板展示。\n---\n\n# MegaMenu\n\n顶层水平导航；展开后以**分栏面板**展示子链接，适合站点级导航。\n\n## 引入\n\n```ts\nimport type {MegaMenuItem} from 'morya-ui';\nimport { MMegaMenu } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/BasicUsage.zh.vue\"\n```\n\n## 面板结构\n\n`items` 为**列数组**：外层每一项是一列，列内为同级链接。\n\n```ts\n{\n label: '产品',\n items: [\n [ { label: '列 A · 项 1' }, { label: '列 A · 项 2' } ],\n [ { label: '列 B · 项 1' } ],\n ],\n}\n```\n\n无 `items` 的顶层项为普通链接，点击执行 `command`。\n\n## 菜单项字段\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `label` | `string` | 展示文案。 |\n| `icon` | `string` |
|
|
16812
|
+
"markdown": "---\ntitle: MegaMenu\ncategory: 04 / NAVIGATION\ndescription: 水平菜单，子项按多列面板展示。\n---\n\n# MegaMenu\n\n顶层水平导航；展开后以**分栏面板**展示子链接，适合站点级导航。\n\n## 引入\n\n```ts\nimport type {MegaMenuItem} from 'morya-ui';\nimport { MMegaMenu } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/BasicUsage.zh.vue\"\n```\n\n## 面板结构\n\n`items` 为**列数组**：外层每一项是一列，列内为同级链接。\n\n```ts\n{\n label: '产品',\n items: [\n [ { label: '列 A · 项 1' }, { label: '列 A · 项 2' } ],\n [ { label: '列 B · 项 1' } ],\n ],\n}\n```\n\n无 `items` 的顶层项为普通链接，点击执行 `command`。\n\n## 菜单项字段\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `label` | `string` | 展示文案。 |\n| `icon` | `string \\| Component` | 内置图标名、别名，或自定义 Vue 图标组件。 |\n| `command` | `() => void` | 点击时执行。 |\n| `disabled` | `boolean` | 禁用项。 |\n| `items` | `MegaMenuItem[][]` | 分栏子面板。 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `MegaMenuItem[]` | `[]` | 顶层菜单项。 |\n| `teleport` | `boolean` | `true` | 面板 Teleport；默认 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `selectedKey` | `string \\| null` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## 无障碍\n\n- 顶层项使用按钮/链接语义；展开面板请确保键盘可到达子项。\n- 复杂站点导航建议配合 Skip link 与当前页 `aria-current`。\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `select` | — | — |\n| `update:selectedKey` | — | — |\n\n## Slots\n\n无插槽。\n\n## 类型\n\n<h4 id=\"MegaMenuItem\">MegaMenuItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface MegaMenuItem extends Omit<MenuNodeBase, 'label' | 'items'> {\n label: string\n /** Column groups for mega panel; each entry is a column of items. */\n items?: MegaMenuItem[][]\n}\n```\n"
|
|
16825
16813
|
},
|
|
16826
16814
|
"en-US": {
|
|
16827
16815
|
"title": "MegaMenu",
|
|
@@ -16850,7 +16838,7 @@
|
|
|
16850
16838
|
{
|
|
16851
16839
|
"id": "item-fields",
|
|
16852
16840
|
"title": "Item fields",
|
|
16853
|
-
"body": "| Field | Type | Description |\n| --- | --- | --- |\n| `label` | `string` | Display text. |\n| `icon` | `string` |
|
|
16841
|
+
"body": "| Field | Type | Description |\n| --- | --- | --- |\n| `label` | `string` | Display text. |\n| `icon` | `string \\| Component` | Built-in icon name, alias, or custom Vue icon component. |\n| `command` | `() => void` | Runs on activate. |\n| `disabled` | `boolean` | Disabled item. |\n| `items` | `MegaMenuItem[][]` | Column groups for the mega panel. |"
|
|
16854
16842
|
},
|
|
16855
16843
|
{
|
|
16856
16844
|
"id": "props",
|
|
@@ -16878,7 +16866,7 @@
|
|
|
16878
16866
|
"body": "<h4 id=\"MegaMenuItem\">MegaMenuItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface MegaMenuItem extends Omit<MenuNodeBase, 'label' | 'items'> {\n label: string\n /** Column groups for mega panel; each entry is a column of items. */\n items?: MegaMenuItem[][]\n}\n```"
|
|
16879
16867
|
}
|
|
16880
16868
|
],
|
|
16881
|
-
"markdown": "---\ntitle: MegaMenu\ncategory: 04 / NAVIGATION\ndescription: Horizontal menu with multi-column mega panels.\n---\n\n# MegaMenu\n\nHorizontal top navigation. Sub-links render in a **multi-column panel**—suited to site-wide nav.\n\n## Import\n\n```ts\nimport type {MegaMenuItem} from 'morya-ui';\nimport { MMegaMenu } from 'morya-ui'\n```\n\n## Basic usage\n\n```vue preview src=\"./demos/BasicUsage.en.vue\"\n```\n\n## Panel shape\n\n`items` is an array of **columns**. Each column is a list of links at the same level.\n\n```ts\n{\n label: 'Products',\n items: [\n [ { label: 'Col A · item 1' }, { label: 'Col A · item 2' } ],\n [ { label: 'Col B · item 1' } ],\n ],\n}\n```\n\nTop-level entries without `items` behave as plain links via `command`.\n\n## Item fields\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `label` | `string` | Display text. |\n| `icon` | `string` |
|
|
16869
|
+
"markdown": "---\ntitle: MegaMenu\ncategory: 04 / NAVIGATION\ndescription: Horizontal menu with multi-column mega panels.\n---\n\n# MegaMenu\n\nHorizontal top navigation. Sub-links render in a **multi-column panel**—suited to site-wide nav.\n\n## Import\n\n```ts\nimport type {MegaMenuItem} from 'morya-ui';\nimport { MMegaMenu } from 'morya-ui'\n```\n\n## Basic usage\n\n```vue preview src=\"./demos/BasicUsage.en.vue\"\n```\n\n## Panel shape\n\n`items` is an array of **columns**. Each column is a list of links at the same level.\n\n```ts\n{\n label: 'Products',\n items: [\n [ { label: 'Col A · item 1' }, { label: 'Col A · item 2' } ],\n [ { label: 'Col B · item 1' } ],\n ],\n}\n```\n\nTop-level entries without `items` behave as plain links via `command`.\n\n## Item fields\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `label` | `string` | Display text. |\n| `icon` | `string \\| Component` | Built-in icon name, alias, or custom Vue icon component. |\n| `command` | `() => void` | Runs on activate. |\n| `disabled` | `boolean` | Disabled item. |\n| `items` | `MegaMenuItem[][]` | Column groups for the mega panel. |\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `MegaMenuItem[]` | `[]` | Top-level items. |\n| `teleport` | `boolean` | `true` | Panel Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Accessibility\n\n- Top items expose button/link semantics; ensure submenu links are keyboard reachable.\n- Pair with skip links and `aria-current` on the active page when used as primary nav.\n\n## Events\n\nNo custom events.\n\n## Slots\n\nNo slots.\n\n## Types\n\n<h4 id=\"MegaMenuItem\">MegaMenuItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface MegaMenuItem extends Omit<MenuNodeBase, 'label' | 'items'> {\n label: string\n /** Column groups for mega panel; each entry is a column of items. */\n items?: MegaMenuItem[][]\n}\n```\n"
|
|
16882
16870
|
}
|
|
16883
16871
|
}
|
|
16884
16872
|
},
|
|
@@ -16976,11 +16964,6 @@
|
|
|
16976
16964
|
"type": "boolean",
|
|
16977
16965
|
"description": "显示清除按钮"
|
|
16978
16966
|
},
|
|
16979
|
-
{
|
|
16980
|
-
"name": "allowClear",
|
|
16981
|
-
"type": "boolean",
|
|
16982
|
-
"description": "`clearable` 的别名"
|
|
16983
|
-
},
|
|
16984
16967
|
{
|
|
16985
16968
|
"name": "loading",
|
|
16986
16969
|
"type": "boolean",
|
|
@@ -17110,7 +17093,7 @@
|
|
|
17110
17093
|
{
|
|
17111
17094
|
"id": "props",
|
|
17112
17095
|
"title": "Props",
|
|
17113
|
-
"body": "| 参数 | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 文本 |\n| `options` | `string[] \\| { value, label? }[]` | `[]` | 建议项 |\n| `prefix` | `string \\| string[]` | `'@'` | 触发字符 |\n| `split` | `string` | `' '` | 选中后追加的分隔符 |\n| `rows` | `number` | `3` | 行数 |\n| `placeholder` | `string` | — | 占位 |\n| `disabled` / `readonly` | `boolean` | `false` | 禁用 / 只读 |\n| `status` | `'error' \\| 'warning'` | — | 校验态（同 Input） |\n| `invalid` / `errorMessage` / `helpText` | — | — | 字段反馈 |\n| `size` / `variant` / `fluid` | — | — | 与 Textarea 一致 |\n| `emptyMessage` | `string` | locale 空态 | 无匹配文案 |\n| `clearable` | `boolean` | `false` | 显示清除按钮 |\n| `
|
|
17096
|
+
"body": "| 参数 | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 文本 |\n| `options` | `string[] \\| { value, label? }[]` | `[]` | 建议项 |\n| `prefix` | `string \\| string[]` | `'@'` | 触发字符 |\n| `split` | `string` | `' '` | 选中后追加的分隔符 |\n| `rows` | `number` | `3` | 行数 |\n| `placeholder` | `string` | — | 占位 |\n| `disabled` / `readonly` | `boolean` | `false` | 禁用 / 只读 |\n| `status` | `'error' \\| 'warning'` | — | 校验态（同 Input） |\n| `invalid` / `errorMessage` / `helpText` | — | — | 字段反馈 |\n| `size` / `variant` / `fluid` | — | — | 与 Textarea 一致 |\n| `emptyMessage` | `string` | locale 空态 | 无匹配文案 |\n| `clearable` | `boolean` | `false` | 显示清除按钮 |\n| `loading` | `boolean` | `false` | 建议面板内显示加载中 |\n| `id` | `string` | — | 控件 id |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) | — | 字段透传 |"
|
|
17114
17097
|
},
|
|
17115
17098
|
{
|
|
17116
17099
|
"id": "异步建议",
|
|
@@ -17123,7 +17106,7 @@
|
|
|
17123
17106
|
"body": "| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string` | 文本变化 |\n| `select` | `MentionsOption` | 选中建议 |\n| `focus` / `blur` / `change` | — | 原生语义 |"
|
|
17124
17107
|
}
|
|
17125
17108
|
],
|
|
17126
|
-
"markdown": "---\ntitle: Mentions\ncategory: 02 / FORM\ndescription: 输入 @ 等前缀时弹出建议并插入提及文本。\n---\n\n# Mentions\n\n多行输入中通过 **前缀**（默认 `@`）触发建议列表，选中后在光标处插入 `prefix + value + split` 纯文本 token。适合评论、协作输入等场景。\n\n## 引入\n\n```ts\nimport { MMentions } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## 多前缀\n\n`prefix` 可为字符串或数组；`split` 默认为空格，表示 mention 结束符。\n\n```vue preview src=\"./demos/Prefix.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 文本 |\n| `options` | `string[] \\| { value, label? }[]` | `[]` | 建议项 |\n| `prefix` | `string \\| string[]` | `'@'` | 触发字符 |\n| `split` | `string` | `' '` | 选中后追加的分隔符 |\n| `rows` | `number` | `3` | 行数 |\n| `placeholder` | `string` | — | 占位 |\n| `disabled` / `readonly` | `boolean` | `false` | 禁用 / 只读 |\n| `status` | `'error' \\| 'warning'` | — | 校验态（同 Input） |\n| `invalid` / `errorMessage` / `helpText` | — | — | 字段反馈 |\n| `size` / `variant` / `fluid` | — | — | 与 Textarea 一致 |\n| `emptyMessage` | `string` | locale 空态 | 无匹配文案 |\n| `clearable` | `boolean` | `false` | 显示清除按钮 |\n| `
|
|
17109
|
+
"markdown": "---\ntitle: Mentions\ncategory: 02 / FORM\ndescription: 输入 @ 等前缀时弹出建议并插入提及文本。\n---\n\n# Mentions\n\n多行输入中通过 **前缀**（默认 `@`）触发建议列表，选中后在光标处插入 `prefix + value + split` 纯文本 token。适合评论、协作输入等场景。\n\n## 引入\n\n```ts\nimport { MMentions } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## 多前缀\n\n`prefix` 可为字符串或数组；`split` 默认为空格，表示 mention 结束符。\n\n```vue preview src=\"./demos/Prefix.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 文本 |\n| `options` | `string[] \\| { value, label? }[]` | `[]` | 建议项 |\n| `prefix` | `string \\| string[]` | `'@'` | 触发字符 |\n| `split` | `string` | `' '` | 选中后追加的分隔符 |\n| `rows` | `number` | `3` | 行数 |\n| `placeholder` | `string` | — | 占位 |\n| `disabled` / `readonly` | `boolean` | `false` | 禁用 / 只读 |\n| `status` | `'error' \\| 'warning'` | — | 校验态（同 Input） |\n| `invalid` / `errorMessage` / `helpText` | — | — | 字段反馈 |\n| `size` / `variant` / `fluid` | — | — | 与 Textarea 一致 |\n| `emptyMessage` | `string` | locale 空态 | 无匹配文案 |\n| `clearable` | `boolean` | `false` | 显示清除按钮 |\n| `loading` | `boolean` | `false` | 建议面板内显示加载中 |\n| `id` | `string` | — | 控件 id |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) | — | 字段透传 |\n\n## 异步建议\n\n无内置请求 API：在 `@input` / 自定义 debounce 后更新 `options`，并设 `loading` 为 `true` 直至数据返回。面板会在有活跃 mention 时保持打开。\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string` | 文本变化 |\n| `select` | `MentionsOption` | 选中建议 |\n| `focus` / `blur` / `change` | — | 原生语义 |\n"
|
|
17127
17110
|
},
|
|
17128
17111
|
"en-US": {
|
|
17129
17112
|
"title": "Mentions",
|
|
@@ -17152,7 +17135,7 @@
|
|
|
17152
17135
|
{
|
|
17153
17136
|
"id": "props",
|
|
17154
17137
|
"title": "Props",
|
|
17155
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Text |\n| `options` | `string[] \\| { value, label? }[]` | `[]` | Suggestions |\n| `prefix` | `string \\| string[]` | `'@'` | Trigger character(s) |\n| `split` | `string` | `' '` | Separator appended after selection |\n| `rows` | `number` | `3` | Row count |\n| `placeholder` | `string` | — | Placeholder |\n| `disabled` / `readonly` | `boolean` | `false` | Disabled / read-only |\n| `status` | `'error' \\| 'warning'` | — | Validate status (like Input) |\n| `invalid` / `errorMessage` / `helpText` | — | — | Field feedback |\n| `size` / `variant` / `fluid` | — | — | Same ideas as Textarea |\n| `emptyMessage` | `string` | locale empty | Copy when nothing matches |\n| `clearable` | `boolean` | `false` | Show clear control |\n| `
|
|
17138
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Text |\n| `options` | `string[] \\| { value, label? }[]` | `[]` | Suggestions |\n| `prefix` | `string \\| string[]` | `'@'` | Trigger character(s) |\n| `split` | `string` | `' '` | Separator appended after selection |\n| `rows` | `number` | `3` | Row count |\n| `placeholder` | `string` | — | Placeholder |\n| `disabled` / `readonly` | `boolean` | `false` | Disabled / read-only |\n| `status` | `'error' \\| 'warning'` | — | Validate status (like Input) |\n| `invalid` / `errorMessage` / `helpText` | — | — | Field feedback |\n| `size` / `variant` / `fluid` | — | — | Same ideas as Textarea |\n| `emptyMessage` | `string` | locale empty | Copy when nothing matches |\n| `clearable` | `boolean` | `false` | Show clear control |\n| `loading` | `boolean` | `false` | Spinner in suggestion panel |\n| `id` | `string` | — | Control id |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) | — | Field pass-through |"
|
|
17156
17139
|
},
|
|
17157
17140
|
{
|
|
17158
17141
|
"id": "async-suggestions",
|
|
@@ -17165,7 +17148,7 @@
|
|
|
17165
17148
|
"body": "| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string` | Text changed |\n| `select` | `MentionsOption` | Suggestion picked |\n| `focus` / `blur` / `change` | — | Native semantics |"
|
|
17166
17149
|
}
|
|
17167
17150
|
],
|
|
17168
|
-
"markdown": "---\ntitle: Mentions\ncategory: 02 / FORM\ndescription: Suggest and insert mention tokens when typing a prefix.\n---\n\n# Mentions\n\nMulti-line field that opens a suggestion list after a **prefix** (default `@`). Choosing an item inserts plain text `prefix + value + split`. Good for comments and collaborative inputs.\n\n## Import\n\n```ts\nimport { MMentions } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Multiple prefixes\n\n`prefix` may be a string or array; `split` defaults to a space and closes an active mention.\n\n```vue preview src=\"./demos/Prefix.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Text |\n| `options` | `string[] \\| { value, label? }[]` | `[]` | Suggestions |\n| `prefix` | `string \\| string[]` | `'@'` | Trigger character(s) |\n| `split` | `string` | `' '` | Separator appended after selection |\n| `rows` | `number` | `3` | Row count |\n| `placeholder` | `string` | — | Placeholder |\n| `disabled` / `readonly` | `boolean` | `false` | Disabled / read-only |\n| `status` | `'error' \\| 'warning'` | — | Validate status (like Input) |\n| `invalid` / `errorMessage` / `helpText` | — | — | Field feedback |\n| `size` / `variant` / `fluid` | — | — | Same ideas as Textarea |\n| `emptyMessage` | `string` | locale empty | Copy when nothing matches |\n| `clearable` | `boolean` | `false` | Show clear control |\n| `
|
|
17151
|
+
"markdown": "---\ntitle: Mentions\ncategory: 02 / FORM\ndescription: Suggest and insert mention tokens when typing a prefix.\n---\n\n# Mentions\n\nMulti-line field that opens a suggestion list after a **prefix** (default `@`). Choosing an item inserts plain text `prefix + value + split`. Good for comments and collaborative inputs.\n\n## Import\n\n```ts\nimport { MMentions } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Multiple prefixes\n\n`prefix` may be a string or array; `split` defaults to a space and closes an active mention.\n\n```vue preview src=\"./demos/Prefix.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Text |\n| `options` | `string[] \\| { value, label? }[]` | `[]` | Suggestions |\n| `prefix` | `string \\| string[]` | `'@'` | Trigger character(s) |\n| `split` | `string` | `' '` | Separator appended after selection |\n| `rows` | `number` | `3` | Row count |\n| `placeholder` | `string` | — | Placeholder |\n| `disabled` / `readonly` | `boolean` | `false` | Disabled / read-only |\n| `status` | `'error' \\| 'warning'` | — | Validate status (like Input) |\n| `invalid` / `errorMessage` / `helpText` | — | — | Field feedback |\n| `size` / `variant` / `fluid` | — | — | Same ideas as Textarea |\n| `emptyMessage` | `string` | locale empty | Copy when nothing matches |\n| `clearable` | `boolean` | `false` | Show clear control |\n| `loading` | `boolean` | `false` | Spinner in suggestion panel |\n| `id` | `string` | — | Control id |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) | — | Field pass-through |\n\n## Async suggestions\n\nNo built-in fetch: debounce in your handler, set `loading` while fetching, then replace `options`. The panel stays open while a mention is active.\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string` | Text changed |\n| `select` | `MentionsOption` | Suggestion picked |\n| `focus` / `blur` / `change` | — | Native semantics |\n"
|
|
17169
17152
|
}
|
|
17170
17153
|
}
|
|
17171
17154
|
},
|
|
@@ -17416,7 +17399,7 @@
|
|
|
17416
17399
|
"sectionId": "类型",
|
|
17417
17400
|
"lang": "ts",
|
|
17418
17401
|
"preview": false,
|
|
17419
|
-
"code": "interface MenuItem {\n key?: string\n label?: string\n icon?: string
|
|
17402
|
+
"code": "interface MenuItem {\n key?: string\n label?: string\n icon?: string | Component // 内置图标名、别名，或自定义 Vue 组件\n to?: string | RouteLocationRaw // 有 vue-router 时用 RouterLink\n command?: () => void\n disabled?: boolean\n separator?: boolean\n items?: MenuItem[]\n}",
|
|
17420
17403
|
"locale": "zh-CN"
|
|
17421
17404
|
},
|
|
17422
17405
|
{
|
|
@@ -17506,7 +17489,7 @@
|
|
|
17506
17489
|
"sectionId": "types",
|
|
17507
17490
|
"lang": "ts",
|
|
17508
17491
|
"preview": false,
|
|
17509
|
-
"code": "interface MenuItem {\n key?: string\n label?: string\n icon?: string\n to?: string | RouteLocationRaw // RouterLink when vue-router is installed\n command?: () => void\n disabled?: boolean\n separator?: boolean\n items?: MenuItem[]\n}",
|
|
17492
|
+
"code": "interface MenuItem {\n key?: string\n label?: string\n icon?: string | Component // Built-in icon name, alias, or custom Vue component\n to?: string | RouteLocationRaw // RouterLink when vue-router is installed\n command?: () => void\n disabled?: boolean\n separator?: boolean\n items?: MenuItem[]\n}",
|
|
17510
17493
|
"locale": "en-US"
|
|
17511
17494
|
}
|
|
17512
17495
|
],
|
|
@@ -17553,7 +17536,7 @@
|
|
|
17553
17536
|
{
|
|
17554
17537
|
"id": "水平菜单",
|
|
17555
17538
|
"title": "水平菜单",
|
|
17556
|
-
"body": "`mode=\"horizontal\"`
|
|
17539
|
+
"body": "`mode=\"horizontal\"` 用于顶栏一级导航；选中/含选中子项的一级项以**底部指示条**高亮，子菜单经 `MPopover` 以下拉飞出层展示（Teleport + 主题滚动条），选中后自动关闭。`popup` 模式的主菜单列表同样内置 `MScrollbar`。\n\n```vue preview src=\"./demos/HorizontalMode.zh.vue\"\n```"
|
|
17557
17540
|
},
|
|
17558
17541
|
{
|
|
17559
17542
|
"id": "反色-深色侧栏",
|
|
@@ -17563,7 +17546,7 @@
|
|
|
17563
17546
|
{
|
|
17564
17547
|
"id": "弹出模式",
|
|
17565
17548
|
"title": "弹出模式",
|
|
17566
|
-
"body": "`popup` + `v-model` 将菜单作为浮层，默认 Teleport 到 `body`
|
|
17549
|
+
"body": "`popup` + `v-model` 将菜单作为浮层，默认 Teleport 到 `body` 并相对**默认插槽触发器**定位（无插槽时回退到最后一次指针位置）。面板最小宽度跟随触发器（下限 `10rem`），下方空间不足时向上翻转；打开期间触发器容器带 `m-menu-popup--open` / `data-open` 与 `aria-expanded`，便于自定义高亮。点击外部或选中叶子项后关闭。\n\n```vue preview src=\"./demos/PopupMode.zh.vue\"\n```"
|
|
17567
17550
|
},
|
|
17568
17551
|
{
|
|
17569
17552
|
"id": "props",
|
|
@@ -17583,15 +17566,15 @@
|
|
|
17583
17566
|
{
|
|
17584
17567
|
"id": "menuitem",
|
|
17585
17568
|
"title": "MenuItem",
|
|
17586
|
-
"body": "| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `key` | `string` | 唯一标识；未传时使用 `label`。 |\n| `label` | `string` | 展示文本。 |\n| `icon` | `string` | [Tabler 图标名](/components/Icon)
|
|
17569
|
+
"body": "| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `key` | `string` | 唯一标识；未传时使用 `label`。 |\n| `label` | `string` | 展示文本。 |\n| `icon` | `string \\| Component` | [Tabler 图标名](/components/Icon)、别名，或自定义 Vue 图标组件。 |\n| `command` | `() => void` | 点击回调（与 `select` 事件同时触发）。 |\n| `disabled` | `boolean` | 禁用。 |\n| `separator` | `boolean` | 分隔线（忽略其他字段）。 |\n| `items` | `MenuItem[]` | 子菜单。 |"
|
|
17587
17570
|
},
|
|
17588
17571
|
{
|
|
17589
17572
|
"id": "类型",
|
|
17590
17573
|
"title": "类型",
|
|
17591
|
-
"body": "<h4 id=\"MenuItem\">MenuItem</h4>\n\n`model` 数组项，支持嵌套：\n\n```ts\ninterface MenuItem {\n key?: string\n label?: string\n icon?: string
|
|
17574
|
+
"body": "<h4 id=\"MenuItem\">MenuItem</h4>\n\n`model` 数组项，支持嵌套：\n\n```ts\ninterface MenuItem {\n key?: string\n label?: string\n icon?: string | Component // 内置图标名、别名，或自定义 Vue 组件\n to?: string | RouteLocationRaw // 有 vue-router 时用 RouterLink\n command?: () => void\n disabled?: boolean\n separator?: boolean\n items?: MenuItem[]\n}\n```\n\n`key` 未传时用 `label` 作为标识。`separator: true` 时渲染分隔线。更多见 [API 类型](/docs/types)。"
|
|
17592
17575
|
}
|
|
17593
17576
|
],
|
|
17594
|
-
"markdown": "---\ntitle: Menu\ncategory: 04 / NAVIGATION\ndescription: 垂直/水平导航菜单，支持多级嵌套、受控选中、手风琴展开与折叠侧栏飞出层。\n---\n\n# Menu\n\n基于 `model` 渲染的**导航菜单**，适合后台侧栏、顶栏导航等场景。支持：\n\n- 多级嵌套 `items` 与受控 `selectedKey`\n- 展开路径自动跟随选中项；`accordion` 手风琴\n- `collapsed` 图标模式 + 右侧飞出子菜单（Popover）\n- 非 popup 时默认 `embedded`，无边框铺满 `MLayoutSider`\n\n> 单层悬停子菜单见 [TieredMenu](/components/TieredMenu)；顶栏菜单见 [Menubar](/components/Menubar)；操作列表见 [Dropdown](/components/Dropdown)。\n\n## 引入\n\n```ts\nimport type {MenuItem} from 'morya-ui';\nimport { MMenu } from 'morya-ui'\n```\n\n## 导航选中\n\n为叶子项设置稳定的 `key`，用 `v-model:selected-key` 与路由同步；点击时触发 `select`。\n\n```vue preview src=\"./demos/Selection.zh.vue\"\n```\n\n未提供 `key` 时会回退到 `label`；生产环境建议始终显式设置 `key`。\n\n## 嵌套子菜单\n\n点击带子项的节点可展开/收起；选中子项时父级会显示 `child-active` 高亮。\n\n```vue preview src=\"./demos/NestedSubmenus.zh.vue\"\n```\n\n## 手风琴与展开控制\n\n`accordion` 同时只保留一个一级子菜单展开。`defaultExpandedKeys` / `v-model:expanded-keys` 可受控展开项；变更 `selectedKey` 时会自动展开其祖先路径。\n\n```vue preview src=\"./demos/AccordionAndExpandedKeys.zh.vue\"\n```\n\n## 折叠与飞出层\n\n`collapsed` 隐藏文案，仅保留图标；**每个可折叠展示的菜单项必须提供 `icon`**（否则折叠后几乎空白）。悬停时在右侧显示 `MTooltip` 标签，带子项的节点还会弹出飞出层（`.m-menu--flyout`）。飞出层经 `MPopover` Teleport 到 `body`，不会被侧栏裁剪。`collapsed-width` 应与侧栏折叠宽度一致，用于居中图标。\n\n使用 `item.to` 时菜单项会渲染为 `RouterLink` / `<a>`；组件已重置链接的默认蓝色下划线，视觉与普通菜单项一致。\n\n```vue preview src=\"./demos/CollapsedAndFlyout.zh.vue\"\n```\n\n## 嵌入 Layout 侧栏\n\n推荐结构：**全局 Header + 下方 `has-sider` Layout**。菜单放在 `MLayoutSider` 内，与 `v-model:collapsed` 联动。\n\n```vue preview src=\"./demos/EmbedInLayoutSider.zh.vue\"\n```\n\n## 水平菜单\n\n`mode=\"horizontal\"`
|
|
17577
|
+
"markdown": "---\ntitle: Menu\ncategory: 04 / NAVIGATION\ndescription: 垂直/水平导航菜单，支持多级嵌套、受控选中、手风琴展开与折叠侧栏飞出层。\n---\n\n# Menu\n\n基于 `model` 渲染的**导航菜单**，适合后台侧栏、顶栏导航等场景。支持：\n\n- 多级嵌套 `items` 与受控 `selectedKey`\n- 展开路径自动跟随选中项；`accordion` 手风琴\n- `collapsed` 图标模式 + 右侧飞出子菜单（Popover）\n- 非 popup 时默认 `embedded`，无边框铺满 `MLayoutSider`\n\n> 单层悬停子菜单见 [TieredMenu](/components/TieredMenu)；顶栏菜单见 [Menubar](/components/Menubar)；操作列表见 [Dropdown](/components/Dropdown)。\n\n## 引入\n\n```ts\nimport type {MenuItem} from 'morya-ui';\nimport { MMenu } from 'morya-ui'\n```\n\n## 导航选中\n\n为叶子项设置稳定的 `key`，用 `v-model:selected-key` 与路由同步；点击时触发 `select`。\n\n```vue preview src=\"./demos/Selection.zh.vue\"\n```\n\n未提供 `key` 时会回退到 `label`；生产环境建议始终显式设置 `key`。\n\n## 嵌套子菜单\n\n点击带子项的节点可展开/收起；选中子项时父级会显示 `child-active` 高亮。\n\n```vue preview src=\"./demos/NestedSubmenus.zh.vue\"\n```\n\n## 手风琴与展开控制\n\n`accordion` 同时只保留一个一级子菜单展开。`defaultExpandedKeys` / `v-model:expanded-keys` 可受控展开项；变更 `selectedKey` 时会自动展开其祖先路径。\n\n```vue preview src=\"./demos/AccordionAndExpandedKeys.zh.vue\"\n```\n\n## 折叠与飞出层\n\n`collapsed` 隐藏文案，仅保留图标；**每个可折叠展示的菜单项必须提供 `icon`**（否则折叠后几乎空白）。悬停时在右侧显示 `MTooltip` 标签，带子项的节点还会弹出飞出层（`.m-menu--flyout`）。飞出层经 `MPopover` Teleport 到 `body`，不会被侧栏裁剪。`collapsed-width` 应与侧栏折叠宽度一致，用于居中图标。\n\n使用 `item.to` 时菜单项会渲染为 `RouterLink` / `<a>`；组件已重置链接的默认蓝色下划线，视觉与普通菜单项一致。\n\n```vue preview src=\"./demos/CollapsedAndFlyout.zh.vue\"\n```\n\n## 嵌入 Layout 侧栏\n\n推荐结构：**全局 Header + 下方 `has-sider` Layout**。菜单放在 `MLayoutSider` 内，与 `v-model:collapsed` 联动。\n\n```vue preview src=\"./demos/EmbedInLayoutSider.zh.vue\"\n```\n\n## 水平菜单\n\n`mode=\"horizontal\"` 用于顶栏一级导航；选中/含选中子项的一级项以**底部指示条**高亮，子菜单经 `MPopover` 以下拉飞出层展示（Teleport + 主题滚动条），选中后自动关闭。`popup` 模式的主菜单列表同样内置 `MScrollbar`。\n\n```vue preview src=\"./demos/HorizontalMode.zh.vue\"\n```\n\n## 反色（深色侧栏）\n\n`inverted` 配合 `MLayoutSider` 的 `inverted`，用于深色背景侧栏。\n\n```vue preview src=\"./demos/InvertedDarkSider.zh.vue\"\n```\n\n## 弹出模式\n\n`popup` + `v-model` 将菜单作为浮层，默认 Teleport 到 `body` 并相对**默认插槽触发器**定位（无插槽时回退到最后一次指针位置）。面板最小宽度跟随触发器（下限 `10rem`），下方空间不足时向上翻转；打开期间触发器容器带 `m-menu-popup--open` / `data-open` 与 `aria-expanded`，便于自定义高亮。点击外部或选中叶子项后关闭。\n\n```vue preview src=\"./demos/PopupMode.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `MenuItem[]` | — | 菜单项，可嵌套 `items`。 |\n| `popup` | `boolean` | `false` | 浮层模式；配合 `v-model` 控制显隐。 |\n| `modelValue` | `boolean` | `false` | popup 可见性（`v-model`）。 |\n| `placement` | `'bottom-start' \\| 'bottom-end' \\| 'top-start' \\| 'top-end'` | `'bottom-start'` | popup 相对触发器的位置。 |\n| `selectedKey` | `string \\| null` | `null` | 当前选中项 key（`v-model:selected-key`）。 |\n| `collapsed` | `boolean` | `false` | 图标模式；子菜单以右侧飞出层展示。 |\n| `collapsedWidth` | `number` | `80` | 折叠宽度（px），用于居中图标。 |\n| `indent` | `number` | `12` | 每层额外左内边距（px）。 |\n| `rootIndent` | `number` | `16` | 根级左内边距（px）。 |\n| `accordion` | `boolean` | `false` | 手风琴：同时只展开一个一级子菜单。 |\n| `defaultExpandedKeys` | `string[]` | `[]` | 默认展开的 submenu keys。 |\n| `expandedKeys` | `string[]` | — | 受控展开 keys（`v-model:expanded-keys`）。 |\n| `defaultExpandAll` | `boolean` | `false` | 初始展开全部子菜单。 |\n| `mode` | `'vertical' \\| 'horizontal'` | `'vertical'` | 布局方向。 |\n| `inverted` | `boolean` | `false` | 反色样式，适合深色侧栏。 |\n| `embedded` | `boolean` | `!popup` | 嵌入布局：去边框与最小宽度。 |\n| `teleport` | `boolean` | `true` | popup 时 Teleport 到 `appendTo`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Teleport 目标；未传时使用 ConfigProvider。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | popup 可见性变化。 |\n| `update:selectedKey` | `string \\| null` | 选中项变化。 |\n| `update:expandedKeys` | `string[]` | 展开项变化。 |\n| `select` | `MenuItem` | 点击叶子项（非 disabled / separator）。 |\n\n## Slots\n\n| 插槽 | 说明 |\n| --- | --- |\n| `default` | popup 模式的触发器锚点（如按钮）；菜单相对其定位。 |\n\n## MenuItem\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `key` | `string` | 唯一标识；未传时使用 `label`。 |\n| `label` | `string` | 展示文本。 |\n| `icon` | `string \\| Component` | [Tabler 图标名](/components/Icon)、别名，或自定义 Vue 图标组件。 |\n| `command` | `() => void` | 点击回调（与 `select` 事件同时触发）。 |\n| `disabled` | `boolean` | 禁用。 |\n| `separator` | `boolean` | 分隔线（忽略其他字段）。 |\n| `items` | `MenuItem[]` | 子菜单。 |\n\n## 类型\n\n<h4 id=\"MenuItem\">MenuItem</h4>\n\n`model` 数组项，支持嵌套：\n\n```ts\ninterface MenuItem {\n key?: string\n label?: string\n icon?: string | Component // 内置图标名、别名，或自定义 Vue 组件\n to?: string | RouteLocationRaw // 有 vue-router 时用 RouterLink\n command?: () => void\n disabled?: boolean\n separator?: boolean\n items?: MenuItem[]\n}\n```\n\n`key` 未传时用 `label` 作为标识。`separator: true` 时渲染分隔线。更多见 [API 类型](/docs/types)。\n"
|
|
17595
17578
|
},
|
|
17596
17579
|
"en-US": {
|
|
17597
17580
|
"title": "Menu",
|
|
@@ -17635,7 +17618,7 @@
|
|
|
17635
17618
|
{
|
|
17636
17619
|
"id": "horizontal-mode",
|
|
17637
17620
|
"title": "Horizontal mode",
|
|
17638
|
-
"body": "`mode=\"horizontal\"` for top nav bars. Submenus open in a `MPopover` dropdown flyout (teleported, themed scrollbar) and close after selection. Popup mode root menus also use built-in `MScrollbar`.\n\n```vue preview src=\"./demos/HorizontalMode.en.vue\"\n```"
|
|
17621
|
+
"body": "`mode=\"horizontal\"` for top nav bars. The selected top-level item (or one containing the selection) is highlighted with a **bottom indicator bar**. Submenus open in a `MPopover` dropdown flyout (teleported, themed scrollbar) and close after selection. Popup mode root menus also use built-in `MScrollbar`.\n\n```vue preview src=\"./demos/HorizontalMode.en.vue\"\n```"
|
|
17639
17622
|
},
|
|
17640
17623
|
{
|
|
17641
17624
|
"id": "inverted-dark-sider",
|
|
@@ -17645,7 +17628,7 @@
|
|
|
17645
17628
|
{
|
|
17646
17629
|
"id": "popup-mode",
|
|
17647
17630
|
"title": "Popup mode",
|
|
17648
|
-
"body": "`popup` + `v-model` renders a floating menu, teleported to `body` by default and positioned against the **default-slot trigger** (falls back to the last pointer position when no slot). Closes on outside click or leaf selection.\n\n```vue preview src=\"./demos/PopupMode.en.vue\"\n```"
|
|
17631
|
+
"body": "`popup` + `v-model` renders a floating menu, teleported to `body` by default and positioned against the **default-slot trigger** (falls back to the last pointer position when no slot). The panel's minimum width follows the trigger (floor `10rem`) and flips upward when space below runs out. While open, the trigger wrapper carries `m-menu-popup--open` / `data-open` and `aria-expanded` for custom highlight. Closes on outside click or leaf selection.\n\n```vue preview src=\"./demos/PopupMode.en.vue\"\n```"
|
|
17649
17632
|
},
|
|
17650
17633
|
{
|
|
17651
17634
|
"id": "props",
|
|
@@ -17665,15 +17648,15 @@
|
|
|
17665
17648
|
{
|
|
17666
17649
|
"id": "menuitem",
|
|
17667
17650
|
"title": "MenuItem",
|
|
17668
|
-
"body": "| Field | Type | Description |\n| --- | --- | --- |\n| `key` | `string` | Unique id; falls back to `label`. |\n| `label` | `string` | Display text. |\n| `icon` | `string` | [Tabler icon name](/components/Icon) or
|
|
17651
|
+
"body": "| Field | Type | Description |\n| --- | --- | --- |\n| `key` | `string` | Unique id; falls back to `label`. |\n| `label` | `string` | Display text. |\n| `icon` | `string \\| Component` | [Tabler icon name](/components/Icon), alias, or custom Vue icon component. |\n| `command` | `() => void` | Click handler (also emits `select`). |\n| `disabled` | `boolean` | Disabled state. |\n| `separator` | `boolean` | Separator line (ignores other fields). |\n| `items` | `MenuItem[]` | Child menu items. |"
|
|
17669
17652
|
},
|
|
17670
17653
|
{
|
|
17671
17654
|
"id": "types",
|
|
17672
17655
|
"title": "Types",
|
|
17673
|
-
"body": "<h4 id=\"MenuItem\">MenuItem</h4>\n\nEach entry in `model`; supports nesting:\n\n```ts\ninterface MenuItem {\n key?: string\n label?: string\n icon?: string\n to?: string | RouteLocationRaw // RouterLink when vue-router is installed\n command?: () => void\n disabled?: boolean\n separator?: boolean\n items?: MenuItem[]\n}\n```\n\nWhen `key` is omitted, `label` is used as the identifier. `separator: true` renders a divider. See also [API types](/docs/types)."
|
|
17656
|
+
"body": "<h4 id=\"MenuItem\">MenuItem</h4>\n\nEach entry in `model`; supports nesting:\n\n```ts\ninterface MenuItem {\n key?: string\n label?: string\n icon?: string | Component // Built-in icon name, alias, or custom Vue component\n to?: string | RouteLocationRaw // RouterLink when vue-router is installed\n command?: () => void\n disabled?: boolean\n separator?: boolean\n items?: MenuItem[]\n}\n```\n\nWhen `key` is omitted, `label` is used as the identifier. `separator: true` renders a divider. See also [API types](/docs/types)."
|
|
17674
17657
|
}
|
|
17675
17658
|
],
|
|
17676
|
-
"markdown": "---\ntitle: Menu\ncategory: 04 / NAVIGATION\ndescription: Vertical/horizontal navigation menu with nested items, controlled selection, accordion, and collapsed flyout submenus.\n---\n\n# Menu\n\nNavigation menu rendered from a `model`. Typical uses: admin sidebar, top navigation.\n\n- Nested `items` with controlled `selectedKey`\n- Auto-expand ancestor path when selection changes; optional `accordion`\n- `collapsed` icon rail with right-side flyout submenus (Popover)\n- Non-popup menus default to `embedded` (borderless, full-width in `MLayoutSider`)\n\n> One-level hover submenus: [TieredMenu](/components/TieredMenu). Top bar: [Menubar](/components/Menubar). Action lists: [Dropdown](/components/Dropdown).\n\n## Import\n\n```ts\nimport type {MenuItem} from 'morya-ui';\nimport { MMenu } from 'morya-ui'\n```\n\n## Selection\n\nGive leaf items stable `key` values; sync with routing via `v-model:selected-key`. Emits `select` on click.\n\n```vue preview src=\"./demos/Selection.en.vue\"\n```\n\nIf `key` is omitted, `label` is used as fallback. Prefer explicit keys in production.\n\n## Nested submenus\n\nClick a group to expand/collapse. When a child is selected, the parent shows `child-active` styling.\n\n```vue preview src=\"./demos/NestedSubmenus.en.vue\"\n```\n\n## Accordion & expanded keys\n\n`accordion` keeps at most one top-level group open. Use `defaultExpandedKeys` or `v-model:expanded-keys` for controlled expansion. Changing `selectedKey` auto-expands its ancestor path.\n\n```vue preview src=\"./demos/AccordionAndExpandedKeys.en.vue\"\n```\n\n## Collapsed & flyout\n\n`collapsed` hides labels and keeps icons. Hover shows an `MTooltip` with the label; groups also open a right flyout (`.m-menu--flyout`) via `MPopover` teleported to `body`, so it is not clipped by the sider. Set `collapsed-width` to match the sider width for centered icons.\n\n```vue preview src=\"./demos/CollapsedAndFlyout.en.vue\"\n```\n\n## Embed in Layout sider\n\nRecommended shell: **global Header + inner `has-sider` Layout**. Bind menu `collapsed` to `MLayoutSider`.\n\n```vue preview src=\"./demos/EmbedInLayoutSider.en.vue\"\n```\n\n## Horizontal mode\n\n`mode=\"horizontal\"` for top nav bars. Submenus open in a `MPopover` dropdown flyout (teleported, themed scrollbar) and close after selection. Popup mode root menus also use built-in `MScrollbar`.\n\n```vue preview src=\"./demos/HorizontalMode.en.vue\"\n```\n\n## Inverted (dark sider)\n\nUse `inverted` with `MLayoutSider`'s `inverted` on dark backgrounds.\n\n```vue preview src=\"./demos/InvertedDarkSider.en.vue\"\n```\n\n## Popup mode\n\n`popup` + `v-model` renders a floating menu, teleported to `body` by default and positioned against the **default-slot trigger** (falls back to the last pointer position when no slot). Closes on outside click or leaf selection.\n\n```vue preview src=\"./demos/PopupMode.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `MenuItem[]` | — | Menu items; may nest `items`. |\n| `popup` | `boolean` | `false` | Overlay mode; use with `v-model`. |\n| `modelValue` | `boolean` | `false` | Popup visibility (`v-model`). |\n| `placement` | `'bottom-start' \\| 'bottom-end' \\| 'top-start' \\| 'top-end'` | `'bottom-start'` | Popup position relative to the trigger. |\n| `selectedKey` | `string \\| null` | `null` | Selected item key (`v-model:selected-key`). |\n| `collapsed` | `boolean` | `false` | Icon-only; submenus in right flyout. |\n| `collapsedWidth` | `number` | `80` | Collapsed width (px) for icon centering. |\n| `indent` | `number` | `12` | Extra padding-left per level (px). |\n| `rootIndent` | `number` | `16` | Root item padding-left (px). |\n| `accordion` | `boolean` | `false` | Only one top-level submenu open at a time. |\n| `defaultExpandedKeys` | `string[]` | `[]` | Initially expanded submenu keys. |\n| `expandedKeys` | `string[]` | — | Controlled expanded keys (`v-model:expanded-keys`). |\n| `defaultExpandAll` | `boolean` | `false` | Expand all submenus initially. |\n| `mode` | `'vertical' \\| 'horizontal'` | `'vertical'` | Layout direction. |\n| `inverted` | `boolean` | `false` | Inverted colors for dark sider. |\n| `embedded` | `boolean` | `!popup` | Embed in layout (no border/min-width). |\n| `teleport` | `boolean` | `true` | Teleport popup to `appendTo`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Teleport target; falls back to ConfigProvider. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Popup visibility changed. |\n| `update:selectedKey` | `string \\| null` | Selected item changed. |\n| `update:expandedKeys` | `string[]` | Expanded keys changed. |\n| `select` | `MenuItem` | Leaf clicked (not disabled / separator). |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Popup trigger anchor (e.g. a button); menu positions against it. |\n\n## MenuItem\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `key` | `string` | Unique id; falls back to `label`. |\n| `label` | `string` | Display text. |\n| `icon` | `string` | [Tabler icon name](/components/Icon) or
|
|
17659
|
+
"markdown": "---\ntitle: Menu\ncategory: 04 / NAVIGATION\ndescription: Vertical/horizontal navigation menu with nested items, controlled selection, accordion, and collapsed flyout submenus.\n---\n\n# Menu\n\nNavigation menu rendered from a `model`. Typical uses: admin sidebar, top navigation.\n\n- Nested `items` with controlled `selectedKey`\n- Auto-expand ancestor path when selection changes; optional `accordion`\n- `collapsed` icon rail with right-side flyout submenus (Popover)\n- Non-popup menus default to `embedded` (borderless, full-width in `MLayoutSider`)\n\n> One-level hover submenus: [TieredMenu](/components/TieredMenu). Top bar: [Menubar](/components/Menubar). Action lists: [Dropdown](/components/Dropdown).\n\n## Import\n\n```ts\nimport type {MenuItem} from 'morya-ui';\nimport { MMenu } from 'morya-ui'\n```\n\n## Selection\n\nGive leaf items stable `key` values; sync with routing via `v-model:selected-key`. Emits `select` on click.\n\n```vue preview src=\"./demos/Selection.en.vue\"\n```\n\nIf `key` is omitted, `label` is used as fallback. Prefer explicit keys in production.\n\n## Nested submenus\n\nClick a group to expand/collapse. When a child is selected, the parent shows `child-active` styling.\n\n```vue preview src=\"./demos/NestedSubmenus.en.vue\"\n```\n\n## Accordion & expanded keys\n\n`accordion` keeps at most one top-level group open. Use `defaultExpandedKeys` or `v-model:expanded-keys` for controlled expansion. Changing `selectedKey` auto-expands its ancestor path.\n\n```vue preview src=\"./demos/AccordionAndExpandedKeys.en.vue\"\n```\n\n## Collapsed & flyout\n\n`collapsed` hides labels and keeps icons. Hover shows an `MTooltip` with the label; groups also open a right flyout (`.m-menu--flyout`) via `MPopover` teleported to `body`, so it is not clipped by the sider. Set `collapsed-width` to match the sider width for centered icons.\n\n```vue preview src=\"./demos/CollapsedAndFlyout.en.vue\"\n```\n\n## Embed in Layout sider\n\nRecommended shell: **global Header + inner `has-sider` Layout**. Bind menu `collapsed` to `MLayoutSider`.\n\n```vue preview src=\"./demos/EmbedInLayoutSider.en.vue\"\n```\n\n## Horizontal mode\n\n`mode=\"horizontal\"` for top nav bars. The selected top-level item (or one containing the selection) is highlighted with a **bottom indicator bar**. Submenus open in a `MPopover` dropdown flyout (teleported, themed scrollbar) and close after selection. Popup mode root menus also use built-in `MScrollbar`.\n\n```vue preview src=\"./demos/HorizontalMode.en.vue\"\n```\n\n## Inverted (dark sider)\n\nUse `inverted` with `MLayoutSider`'s `inverted` on dark backgrounds.\n\n```vue preview src=\"./demos/InvertedDarkSider.en.vue\"\n```\n\n## Popup mode\n\n`popup` + `v-model` renders a floating menu, teleported to `body` by default and positioned against the **default-slot trigger** (falls back to the last pointer position when no slot). The panel's minimum width follows the trigger (floor `10rem`) and flips upward when space below runs out. While open, the trigger wrapper carries `m-menu-popup--open` / `data-open` and `aria-expanded` for custom highlight. Closes on outside click or leaf selection.\n\n```vue preview src=\"./demos/PopupMode.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `MenuItem[]` | — | Menu items; may nest `items`. |\n| `popup` | `boolean` | `false` | Overlay mode; use with `v-model`. |\n| `modelValue` | `boolean` | `false` | Popup visibility (`v-model`). |\n| `placement` | `'bottom-start' \\| 'bottom-end' \\| 'top-start' \\| 'top-end'` | `'bottom-start'` | Popup position relative to the trigger. |\n| `selectedKey` | `string \\| null` | `null` | Selected item key (`v-model:selected-key`). |\n| `collapsed` | `boolean` | `false` | Icon-only; submenus in right flyout. |\n| `collapsedWidth` | `number` | `80` | Collapsed width (px) for icon centering. |\n| `indent` | `number` | `12` | Extra padding-left per level (px). |\n| `rootIndent` | `number` | `16` | Root item padding-left (px). |\n| `accordion` | `boolean` | `false` | Only one top-level submenu open at a time. |\n| `defaultExpandedKeys` | `string[]` | `[]` | Initially expanded submenu keys. |\n| `expandedKeys` | `string[]` | — | Controlled expanded keys (`v-model:expanded-keys`). |\n| `defaultExpandAll` | `boolean` | `false` | Expand all submenus initially. |\n| `mode` | `'vertical' \\| 'horizontal'` | `'vertical'` | Layout direction. |\n| `inverted` | `boolean` | `false` | Inverted colors for dark sider. |\n| `embedded` | `boolean` | `!popup` | Embed in layout (no border/min-width). |\n| `teleport` | `boolean` | `true` | Teleport popup to `appendTo`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Teleport target; falls back to ConfigProvider. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Popup visibility changed. |\n| `update:selectedKey` | `string \\| null` | Selected item changed. |\n| `update:expandedKeys` | `string[]` | Expanded keys changed. |\n| `select` | `MenuItem` | Leaf clicked (not disabled / separator). |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Popup trigger anchor (e.g. a button); menu positions against it. |\n\n## MenuItem\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `key` | `string` | Unique id; falls back to `label`. |\n| `label` | `string` | Display text. |\n| `icon` | `string \\| Component` | [Tabler icon name](/components/Icon), alias, or custom Vue icon component. |\n| `command` | `() => void` | Click handler (also emits `select`). |\n| `disabled` | `boolean` | Disabled state. |\n| `separator` | `boolean` | Separator line (ignores other fields). |\n| `items` | `MenuItem[]` | Child menu items. |\n\n## Types\n\n<h4 id=\"MenuItem\">MenuItem</h4>\n\nEach entry in `model`; supports nesting:\n\n```ts\ninterface MenuItem {\n key?: string\n label?: string\n icon?: string | Component // Built-in icon name, alias, or custom Vue component\n to?: string | RouteLocationRaw // RouterLink when vue-router is installed\n command?: () => void\n disabled?: boolean\n separator?: boolean\n items?: MenuItem[]\n}\n```\n\nWhen `key` is omitted, `label` is used as the identifier. `separator: true` renders a divider. See also [API types](/docs/types).\n"
|
|
17677
17660
|
}
|
|
17678
17661
|
}
|
|
17679
17662
|
},
|
|
@@ -20962,7 +20945,7 @@
|
|
|
20962
20945
|
"description": "显示清除按钮。"
|
|
20963
20946
|
},
|
|
20964
20947
|
{
|
|
20965
|
-
"name": "
|
|
20948
|
+
"name": "clearable",
|
|
20966
20949
|
"type": "boolean | null",
|
|
20967
20950
|
"default": "null",
|
|
20968
20951
|
"description": "`cancel` 的别名；传入时优先。"
|
|
@@ -21144,12 +21127,12 @@
|
|
|
21144
21127
|
{
|
|
21145
21128
|
"id": "half",
|
|
21146
21129
|
"title": "Half",
|
|
21147
|
-
"body": "`allowHalf` 支持 0.5 步进。`
|
|
21130
|
+
"body": "`allowHalf` 支持 0.5 步进。`clearable` 是 `cancel` 的别名，传入时优先。\n\n```vue preview src=\"./demos/Half.vue\"\n```"
|
|
21148
21131
|
},
|
|
21149
21132
|
{
|
|
21150
21133
|
"id": "props",
|
|
21151
21134
|
"title": "Props",
|
|
21152
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `number` | `0` | 当前评分。 |\n| `stars` | `number` | `5` | 星星数量。 |\n| `cancel` | `boolean` | `true` | 显示清除按钮。 |\n| `
|
|
21135
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `number` | `0` | 当前评分。 |\n| `stars` | `number` | `5` | 星星数量。 |\n| `cancel` | `boolean` | `true` | 显示清除按钮。 |\n| `clearable` | `boolean \\| null` | `null` | `cancel` 的别名；传入时优先。 |\n| `allowHalf` | `boolean` | `false` | 允许半星。 |\n| `readonly` | `boolean` | `false` | 只读。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `ariaLabel` | `string` | — | — |\n| `errorMessage` | `string` | — | — |\n| `helpText` | `string` | — | — |\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). |"
|
|
21153
21136
|
},
|
|
21154
21137
|
{
|
|
21155
21138
|
"id": "events",
|
|
@@ -21162,7 +21145,7 @@
|
|
|
21162
21145
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `icon` | 自定义星级 `{ active }`。 |"
|
|
21163
21146
|
}
|
|
21164
21147
|
],
|
|
21165
|
-
"markdown": "---\ntitle: Rating\ncategory: 02 / FORM\ndescription: 星级评分控件，支持清除与只读。\n---\n\n# Rating\n\n点击星星进行评分。默认提供清除按钮。\n\n## 引入\n\n```ts\nimport { MRating } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Readonly\n\n```vue preview src=\"./demos/Readonly.vue\"\n```\n\n## Half\n\n`allowHalf` 支持 0.5 步进。`
|
|
21148
|
+
"markdown": "---\ntitle: Rating\ncategory: 02 / FORM\ndescription: 星级评分控件，支持清除与只读。\n---\n\n# Rating\n\n点击星星进行评分。默认提供清除按钮。\n\n## 引入\n\n```ts\nimport { MRating } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Readonly\n\n```vue preview src=\"./demos/Readonly.vue\"\n```\n\n## Half\n\n`allowHalf` 支持 0.5 步进。`clearable` 是 `cancel` 的别名，传入时优先。\n\n```vue preview src=\"./demos/Half.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `number` | `0` | 当前评分。 |\n| `stars` | `number` | `5` | 星星数量。 |\n| `cancel` | `boolean` | `true` | 显示清除按钮。 |\n| `clearable` | `boolean \\| null` | `null` | `cancel` 的别名；传入时优先。 |\n| `allowHalf` | `boolean` | `false` | 允许半星。 |\n| `readonly` | `boolean` | `false` | 只读。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `ariaLabel` | `string` | — | — |\n| `errorMessage` | `string` | — | — |\n| `helpText` | `string` | — | — |\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\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `number` | 评分变化。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `icon` | 自定义星级 `{ active }`。 |\n"
|
|
21166
21149
|
},
|
|
21167
21150
|
"en-US": {
|
|
21168
21151
|
"title": "Rating",
|
|
@@ -21191,12 +21174,12 @@
|
|
|
21191
21174
|
{
|
|
21192
21175
|
"id": "half",
|
|
21193
21176
|
"title": "Half",
|
|
21194
|
-
"body": "`allowHalf` enables 0.5 increments. `
|
|
21177
|
+
"body": "`allowHalf` enables 0.5 increments. `clearable` is an alias of `cancel` and takes precedence when set.\n\n```vue preview src=\"./demos/Half.vue\"\n```"
|
|
21195
21178
|
},
|
|
21196
21179
|
{
|
|
21197
21180
|
"id": "props",
|
|
21198
21181
|
"title": "Props",
|
|
21199
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `number` | `0` | Current rating. |\n| `stars` | `number` | `5` | Number of stars. |\n| `cancel` | `boolean` | `true` | Show the clear button. |\n| `
|
|
21182
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `number` | `0` | Current rating. |\n| `stars` | `number` | `5` | Number of stars. |\n| `cancel` | `boolean` | `true` | Show the clear button. |\n| `clearable` | `boolean \\| null` | `null` | Alias of `cancel`; takes precedence when set. |\n| `allowHalf` | `boolean` | `false` | Allow half-star values. |\n| `readonly` | `boolean` | `false` | Read-only. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
21200
21183
|
},
|
|
21201
21184
|
{
|
|
21202
21185
|
"id": "events",
|
|
@@ -21209,7 +21192,7 @@
|
|
|
21209
21192
|
"body": "| Slot | Description |\n| --- | --- |\n| `icon` | Custom star `{ active }`. |"
|
|
21210
21193
|
}
|
|
21211
21194
|
],
|
|
21212
|
-
"markdown": "---\ntitle: Rating\ncategory: 02 / FORM\ndescription: Star rating control with clear and readonly support.\n---\n\n# Rating\n\nClick stars to rate. A clear button is shown by default.\n\n## Import\n\n```ts\nimport { MRating } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Readonly\n\n```vue preview src=\"./demos/Readonly.vue\"\n```\n\n## Half\n\n`allowHalf` enables 0.5 increments. `
|
|
21195
|
+
"markdown": "---\ntitle: Rating\ncategory: 02 / FORM\ndescription: Star rating control with clear and readonly support.\n---\n\n# Rating\n\nClick stars to rate. A clear button is shown by default.\n\n## Import\n\n```ts\nimport { MRating } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Readonly\n\n```vue preview src=\"./demos/Readonly.vue\"\n```\n\n## Half\n\n`allowHalf` enables 0.5 increments. `clearable` is an alias of `cancel` and takes precedence when set.\n\n```vue preview src=\"./demos/Half.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `number` | `0` | Current rating. |\n| `stars` | `number` | `5` | Number of stars. |\n| `cancel` | `boolean` | `true` | Show the clear button. |\n| `clearable` | `boolean \\| null` | `null` | Alias of `cancel`; takes precedence when set. |\n| `allowHalf` | `boolean` | `false` | Allow half-star values. |\n| `readonly` | `boolean` | `false` | Read-only. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `number` | Emitted when the rating changes. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `icon` | Custom star `{ active }`. |\n"
|
|
21213
21196
|
}
|
|
21214
21197
|
}
|
|
21215
21198
|
},
|
|
@@ -22395,8 +22378,8 @@
|
|
|
22395
22378
|
"name": "Select",
|
|
22396
22379
|
"exportName": "MSelect",
|
|
22397
22380
|
"category": "02 / FORM",
|
|
22398
|
-
"description": "表单选择器：mode=\"multiple\" | \"tags\"、labelInValue、fieldNames、showSearch、
|
|
22399
|
-
"descriptionEn": "Form select: mode=multiple|tags, labelInValue, fieldNames, showSearch,
|
|
22381
|
+
"description": "表单选择器：mode=\"multiple\" | \"tags\"、labelInValue、fieldNames、showSearch、clearable、optionRender、popupRender。",
|
|
22382
|
+
"descriptionEn": "Form select: mode=multiple|tags, labelInValue, fieldNames, showSearch, clearable, optionRender, popupRender.",
|
|
22400
22383
|
"import": "import { MSelect } from 'morya-ui'",
|
|
22401
22384
|
"props": [
|
|
22402
22385
|
{
|
|
@@ -22514,7 +22497,7 @@
|
|
|
22514
22497
|
"description": "折叠标签摘要。"
|
|
22515
22498
|
},
|
|
22516
22499
|
{
|
|
22517
|
-
"name": "
|
|
22500
|
+
"name": "clearable",
|
|
22518
22501
|
"type": "boolean",
|
|
22519
22502
|
"default": "false",
|
|
22520
22503
|
"description": "有值时显示清除按钮。"
|
|
@@ -22707,7 +22690,7 @@
|
|
|
22707
22690
|
"sectionId": "clearable",
|
|
22708
22691
|
"lang": "vue",
|
|
22709
22692
|
"preview": true,
|
|
22710
|
-
"code": "<script setup lang=\"ts\">\nimport { MSelect } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<string | number | undefined>('design')\nconst options = [\n { label: 'Design', value: 'design' },\n { label: 'Development', value: 'dev' },\n]\n</script>\n\n<template>\n <MSelect v-model=\"value\" label=\"Team\" :options=\"options\"
|
|
22693
|
+
"code": "<script setup lang=\"ts\">\nimport { MSelect } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<string | number | undefined>('design')\nconst options = [\n { label: 'Design', value: 'design' },\n { label: 'Development', value: 'dev' },\n]\n</script>\n\n<template>\n <MSelect v-model=\"value\" label=\"Team\" :options=\"options\" clearable />\n</template>",
|
|
22711
22694
|
"locale": "zh-CN"
|
|
22712
22695
|
},
|
|
22713
22696
|
{
|
|
@@ -22752,7 +22735,7 @@
|
|
|
22752
22735
|
"sectionId": "多选与标签创建",
|
|
22753
22736
|
"lang": "vue",
|
|
22754
22737
|
"preview": true,
|
|
22755
|
-
"code": "<script setup lang=\"ts\">\nimport { MSelect } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<Array<string | number>>(['design'])\nconst options = [\n { label: 'Design', value: 'design' },\n { label: 'Development', value: 'dev' },\n { label: 'Research', value: 'research' },\n]\n</script>\n\n<template>\n <div style=\"display:grid;gap:1rem;width:min(24rem,100%)\">\n <MSelect v-model=\"value\" :options=\"options\" mode=\"multiple\"
|
|
22738
|
+
"code": "<script setup lang=\"ts\">\nimport { MSelect } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<Array<string | number>>(['design'])\nconst options = [\n { label: 'Design', value: 'design' },\n { label: 'Development', value: 'dev' },\n { label: 'Research', value: 'research' },\n]\n</script>\n\n<template>\n <div style=\"display:grid;gap:1rem;width:min(24rem,100%)\">\n <MSelect v-model=\"value\" :options=\"options\" mode=\"multiple\" clearable placeholder=\"Teams\" />\n <MSelect v-model=\"value\" :options=\"options\" mode=\"multiple\" :max-tag-count=\"1\" placeholder=\"Collapsed tags\" />\n </div>\n</template>",
|
|
22756
22739
|
"locale": "zh-CN"
|
|
22757
22740
|
},
|
|
22758
22741
|
{
|
|
@@ -22869,7 +22852,7 @@
|
|
|
22869
22852
|
"sectionId": "clearable",
|
|
22870
22853
|
"lang": "vue",
|
|
22871
22854
|
"preview": true,
|
|
22872
|
-
"code": "<script setup lang=\"ts\">\nimport { MSelect } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<string | number | undefined>('design')\nconst options = [\n { label: 'Design', value: 'design' },\n { label: 'Development', value: 'dev' },\n]\n</script>\n\n<template>\n <MSelect v-model=\"value\" label=\"Team\" :options=\"options\"
|
|
22855
|
+
"code": "<script setup lang=\"ts\">\nimport { MSelect } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<string | number | undefined>('design')\nconst options = [\n { label: 'Design', value: 'design' },\n { label: 'Development', value: 'dev' },\n]\n</script>\n\n<template>\n <MSelect v-model=\"value\" label=\"Team\" :options=\"options\" clearable />\n</template>",
|
|
22873
22856
|
"locale": "en-US"
|
|
22874
22857
|
},
|
|
22875
22858
|
{
|
|
@@ -22914,7 +22897,7 @@
|
|
|
22914
22897
|
"sectionId": "multiple-and-tag-creation",
|
|
22915
22898
|
"lang": "vue",
|
|
22916
22899
|
"preview": true,
|
|
22917
|
-
"code": "<script setup lang=\"ts\">\nimport { MSelect } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<Array<string | number>>(['design'])\nconst options = [\n { label: 'Design', value: 'design' },\n { label: 'Development', value: 'dev' },\n { label: 'Research', value: 'research' },\n]\n</script>\n\n<template>\n <div style=\"display:grid;gap:1rem;width:min(24rem,100%)\">\n <MSelect v-model=\"value\" :options=\"options\" mode=\"multiple\"
|
|
22900
|
+
"code": "<script setup lang=\"ts\">\nimport { MSelect } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<Array<string | number>>(['design'])\nconst options = [\n { label: 'Design', value: 'design' },\n { label: 'Development', value: 'dev' },\n { label: 'Research', value: 'research' },\n]\n</script>\n\n<template>\n <div style=\"display:grid;gap:1rem;width:min(24rem,100%)\">\n <MSelect v-model=\"value\" :options=\"options\" mode=\"multiple\" clearable placeholder=\"Teams\" />\n <MSelect v-model=\"value\" :options=\"options\" mode=\"multiple\" :max-tag-count=\"1\" placeholder=\"Collapsed tags\" />\n </div>\n</template>",
|
|
22918
22901
|
"locale": "en-US"
|
|
22919
22902
|
},
|
|
22920
22903
|
{
|
|
@@ -23011,7 +22994,7 @@
|
|
|
23011
22994
|
"locales": {
|
|
23012
22995
|
"zh-CN": {
|
|
23013
22996
|
"title": "Select",
|
|
23014
|
-
"description": "表单选择器：mode=\"multiple\" | \"tags\"、labelInValue、fieldNames、showSearch、
|
|
22997
|
+
"description": "表单选择器：mode=\"multiple\" | \"tags\"、labelInValue、fieldNames、showSearch、clearable、optionRender、popupRender。",
|
|
23015
22998
|
"sections": [
|
|
23016
22999
|
{
|
|
23017
23000
|
"id": "overview",
|
|
@@ -23031,7 +23014,7 @@
|
|
|
23031
23014
|
{
|
|
23032
23015
|
"id": "clearable",
|
|
23033
23016
|
"title": "Clearable",
|
|
23034
|
-
"body": "`
|
|
23017
|
+
"body": "`clearable` 在已选值时显示清除按钮。\n\n```vue preview src=\"./demos/Clearable.vue\"\n```"
|
|
23035
23018
|
},
|
|
23036
23019
|
{
|
|
23037
23020
|
"id": "invalid",
|
|
@@ -23101,7 +23084,7 @@
|
|
|
23101
23084
|
{
|
|
23102
23085
|
"id": "props",
|
|
23103
23086
|
"title": "Props",
|
|
23104
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array<string \\| number> \\| SelectLabeledValue` | — | 选中值；`mode` 时数组，`labelInValue` 时为 `{ value, label }`。 |\n| `options` | `Array<`[SelectOption](/docs/types#SelectOption)` \\| `[SelectOptionGroup](/docs/types#SelectOptionGroup)`>` | — | 选项列表；可混入 `{ label, options }` 分组。 |\n| `fieldNames` | `{ label?, value?, disabled?, options? }` | — | 重映射原始选项字段名。 |\n| `labelInValue` | `boolean` | `false` | `v-model` / 事件返回 `{ value, label }`。 |\n| `label` | `string` | — | 字段标签。 |\n| `helpText` | `string` | — | 辅助说明。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `status` | `'error' \\| 'warning'` | — | 视觉校验态；`error` 等同 invalid，`warning` 为警告描边。 |\n| `placeholder` | `string` | — | 占位文案。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `required` | `boolean` | `false` | 表单必填辅助。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸；可继承 Form `size`。 |\n| `variant` | `'outlined' \\| 'filled'` | — | 输入面样式。 |\n| `fluid` | `boolean` | `false` | 宽度撑满容器。 |\n| `mode` | `'multiple' \\| 'tags'` | — | 多选；`tags` 额外允许创建选项。 |\n| `remote` | `boolean` | `false` | 关闭本地筛选，输入时发出 `search`。 |\n| `loading` | `boolean` | `false` | 异步加载中。 |\n| `maxTagCount` | `number` | — | 多选时最多展示的标签数，其余折叠。 |\n| `maxTagPlaceholder` | `(omitted) => MRenderable` | locale `moreTags` | 折叠标签摘要。 |\n| `
|
|
23087
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array<string \\| number> \\| SelectLabeledValue` | — | 选中值；`mode` 时数组，`labelInValue` 时为 `{ value, label }`。 |\n| `options` | `Array<`[SelectOption](/docs/types#SelectOption)` \\| `[SelectOptionGroup](/docs/types#SelectOptionGroup)`>` | — | 选项列表；可混入 `{ label, options }` 分组。 |\n| `fieldNames` | `{ label?, value?, disabled?, options? }` | — | 重映射原始选项字段名。 |\n| `labelInValue` | `boolean` | `false` | `v-model` / 事件返回 `{ value, label }`。 |\n| `label` | `string` | — | 字段标签。 |\n| `helpText` | `string` | — | 辅助说明。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `status` | `'error' \\| 'warning'` | — | 视觉校验态；`error` 等同 invalid，`warning` 为警告描边。 |\n| `placeholder` | `string` | — | 占位文案。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `required` | `boolean` | `false` | 表单必填辅助。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸；可继承 Form `size`。 |\n| `variant` | `'outlined' \\| 'filled'` | — | 输入面样式。 |\n| `fluid` | `boolean` | `false` | 宽度撑满容器。 |\n| `mode` | `'multiple' \\| 'tags'` | — | 多选；`tags` 额外允许创建选项。 |\n| `remote` | `boolean` | `false` | 关闭本地筛选，输入时发出 `search`。 |\n| `loading` | `boolean` | `false` | 异步加载中。 |\n| `maxTagCount` | `number` | — | 多选时最多展示的标签数，其余折叠。 |\n| `maxTagPlaceholder` | `(omitted) => MRenderable` | locale `moreTags` | 折叠标签摘要。 |\n| `clearable` | `boolean` | `false` | 有值时显示清除按钮。 |\n| `notFoundContent` | `MRenderable` | locale `emptyOptions` | 空选项 / 无匹配文案。 |\n| `showSearch` | `boolean` | `false` | 浮层中显示搜索输入。 |\n| `optionFilterProp` | `string` | `'label'` | 本地匹配读取的选项字段。 |\n| `filterOption` | `boolean \\| (input, option) => boolean` | 按 `optionFilterProp` 匹配 | 本地过滤规则；`false` 关闭。 |\n| `optionRender` | `(option) => MRenderable` | — | 自定义选项行（优先于 `option` 插槽）。 |\n| `popupRender` | `(menu) => VNodeChild` | — | 包裹浮层菜单。 |\n| `suffixIcon` | `IconName` | `'chevron-down'` | 右侧图标。 |\n| `teleport` | `boolean` | `true` | 菜单 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | 挂载目标；`'self'` 就地渲染。 |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | 菜单对齐。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 菜单进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `id` | `string` | — | 控件 id。 |\n| `errorMessage` | `string` | — | 校验错误文案；与 `invalid` 同时生效时优先展示。 |\n| `name` | `string` | — | 辅助原生 name（存在隐藏 input 时）。 |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 分段透传。 |\n| `virtual` | `boolean` | 自动 | `true` 强制虚拟列表；`false` 关闭；默认选项 ≥80 时开启。 |"
|
|
23105
23088
|
},
|
|
23106
23089
|
{
|
|
23107
23090
|
"id": "events",
|
|
@@ -23119,11 +23102,11 @@
|
|
|
23119
23102
|
"body": "<h4 id=\"SelectOption\">SelectOption</h4>\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h4 id=\"SelectOptionGroup\">SelectOptionGroup</h4>\n\n```ts\ninterface SelectOptionGroup {\n label: string\n items: SelectOption[]\n}\n```\n\n<h4 id=\"SelectModelValue\">SelectModelValue</h4>\n\n单选为 `string | number`；`multiple` 时为 `(string | number)[]`。详见 [API 类型](/docs/types#SelectModelValue)。"
|
|
23120
23103
|
}
|
|
23121
23104
|
],
|
|
23122
|
-
"markdown": "---\ntitle: Select\ncategory: 02 / FORM\ndescription: 表单选择器：mode=\"multiple\" | \"tags\"、labelInValue、fieldNames、showSearch、
|
|
23105
|
+
"markdown": "---\ntitle: Select\ncategory: 02 / FORM\ndescription: 表单选择器：mode=\"multiple\" | \"tags\"、labelInValue、fieldNames、showSearch、clearable、optionRender、popupRender。\n---\n\n# Select\n\n表单选择器，用于从选项列表中选择一个或多个值。\n\n**与 Dropdown 的区别：** `MSelect` 是表单控件；动作菜单请使用 `MDropdown`。\n\n## 引入\n\n```ts\nimport { MSelect } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Clearable\n\n`clearable` 在已选值时显示清除按钮。\n\n```vue preview src=\"./demos/Clearable.vue\"\n```\n\n## Invalid\n\n```vue preview src=\"./demos/Invalid.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n```\n\n## Sizes\n\n```vue preview src=\"./demos/Sizes.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.vue\"\n```\n\n## 多选与标签创建\n\n`mode=\"multiple\"` 时 `v-model` 为数组，已选项以可移除标签展示，菜单在选择后保持打开。\n`mode=\"tags\"` 在此基础上允许用当前搜索词创建选项（回车或点击「创建」行）。\n\n```vue preview src=\"./demos/Multiple.vue\"\n```\n\n```vue preview src=\"./demos/Tag.vue\"\n```\n\n`maxTagCount` 折叠多余标签；折叠摘要由 `maxTagPlaceholder` 自定义，默认取 locale `moreTags`。\n\n## labelInValue\n\n打开后 `v-model` 与事件载荷为 `{ value, label }`：\n\n```vue\n<MSelect v-model=\"picked\" label-in-value :options=\"options\" />\n```\n\n## fieldNames\n\n选项字段名不叫 `label` / `value` 时，用 `fieldNames` 重映射（支持分组子项）：\n\n```vue\n<MSelect :options=\"[{ title: 'Apple', id: 'apple' }]\" :field-names=\"{ label: 'title', value: 'id' }\" />\n```\n\n多余字段会被保留，因此 `optionFilterProp` 可以指向自定义键。\n\n## Group\n\n`options` 可混入 `{ label, options }` 分组（[SelectOptionGroup](/docs/types#SelectOptionGroup)），菜单显示分组标题行；分组本身不可选，搜索会按组内选项过滤并隐藏空组。\n\n```vue preview src=\"./demos/Group.vue\"\n```\n\n## 搜索与过滤\n\n`showSearch` 在浮层中显示搜索输入。本地过滤规则：\n\n- `filterOption` 省略 / `true`：按 `optionFilterProp`（默认 `label`）模糊匹配；\n- `filterOption: false`：关闭本地过滤；\n- `filterOption: (input, option) => boolean`：自定义谓词。\n\n`remote` 跳过本地过滤并随输入发出 `search`（需配合 `showSearch`），用 `loading` 表示请求进行中。\n\n```vue preview src=\"./demos/Remote.vue\"\n```\n\n## 自定义选项渲染\n\n- `optionRender(option)`：自定义每行内容（优先于 `option` 插槽）；\n- `popupRender(menu)`：在浮层外层包一层自定义结构；\n- `suffixIcon`：替换右侧箭头图标。\n\n```vue preview src=\"./demos/HeaderFooter.vue\"\n```\n\n## Empty\n\n无选项或筛选无结果时展示空态文案；可用 `notFoundContent` 覆盖，否则读取 ConfigProvider `locale.emptyOptions`。\n\n```vue preview src=\"./demos/Empty.zh.vue\"\n```\n\n## Teleport\n\n菜单默认 Teleport 到 `body`（`teleport` + `appendTo`）。设 `append-to=\"self\"` 或 `teleport={false}` 可就地渲染。\n\n```vue preview src=\"./demos/Teleport.vue\"\n```\n\n## 样式与 attrs\n\n除控件 **事件** 外，fallthrough attrs 落在外层 field 根；`@keydown` 等由内部 combobox 接收。`placeholder`、`name` 优先用 props。下拉位置用 `placement` / `appendTo`；改面板 DOM 用 `pt`（键名见 Props）。详见 [样式与 attrs](/docs/attrs)。\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array<string \\| number> \\| SelectLabeledValue` | — | 选中值；`mode` 时数组，`labelInValue` 时为 `{ value, label }`。 |\n| `options` | `Array<`[SelectOption](/docs/types#SelectOption)` \\| `[SelectOptionGroup](/docs/types#SelectOptionGroup)`>` | — | 选项列表；可混入 `{ label, options }` 分组。 |\n| `fieldNames` | `{ label?, value?, disabled?, options? }` | — | 重映射原始选项字段名。 |\n| `labelInValue` | `boolean` | `false` | `v-model` / 事件返回 `{ value, label }`。 |\n| `label` | `string` | — | 字段标签。 |\n| `helpText` | `string` | — | 辅助说明。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `status` | `'error' \\| 'warning'` | — | 视觉校验态；`error` 等同 invalid，`warning` 为警告描边。 |\n| `placeholder` | `string` | — | 占位文案。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `required` | `boolean` | `false` | 表单必填辅助。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸；可继承 Form `size`。 |\n| `variant` | `'outlined' \\| 'filled'` | — | 输入面样式。 |\n| `fluid` | `boolean` | `false` | 宽度撑满容器。 |\n| `mode` | `'multiple' \\| 'tags'` | — | 多选；`tags` 额外允许创建选项。 |\n| `remote` | `boolean` | `false` | 关闭本地筛选，输入时发出 `search`。 |\n| `loading` | `boolean` | `false` | 异步加载中。 |\n| `maxTagCount` | `number` | — | 多选时最多展示的标签数，其余折叠。 |\n| `maxTagPlaceholder` | `(omitted) => MRenderable` | locale `moreTags` | 折叠标签摘要。 |\n| `clearable` | `boolean` | `false` | 有值时显示清除按钮。 |\n| `notFoundContent` | `MRenderable` | locale `emptyOptions` | 空选项 / 无匹配文案。 |\n| `showSearch` | `boolean` | `false` | 浮层中显示搜索输入。 |\n| `optionFilterProp` | `string` | `'label'` | 本地匹配读取的选项字段。 |\n| `filterOption` | `boolean \\| (input, option) => boolean` | 按 `optionFilterProp` 匹配 | 本地过滤规则；`false` 关闭。 |\n| `optionRender` | `(option) => MRenderable` | — | 自定义选项行（优先于 `option` 插槽）。 |\n| `popupRender` | `(menu) => VNodeChild` | — | 包裹浮层菜单。 |\n| `suffixIcon` | `IconName` | `'chevron-down'` | 右侧图标。 |\n| `teleport` | `boolean` | `true` | 菜单 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | 挂载目标；`'self'` 就地渲染。 |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | 菜单对齐。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 菜单进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `id` | `string` | — | 控件 id。 |\n| `errorMessage` | `string` | — | 校验错误文案；与 `invalid` 同时生效时优先展示。 |\n| `name` | `string` | — | 辅助原生 name（存在隐藏 input 时）。 |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 分段透传。 |\n| `virtual` | `boolean` | 自动 | `true` 强制虚拟列表；`false` 关闭；默认选项 ≥80 时开启。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | [SelectModelValue](/docs/types#SelectModelValue) | 值变化。 |\n| `change` | [SelectModelValue](/docs/types#SelectModelValue) | 选择完成或清除。 |\n| `clear` | — | 点击清除时触发。 |\n| `show` | — | 菜单打开。 |\n| `hide` | — | 菜单关闭。 |\n| `search` | `string` | 筛选词变化（`filter` / `remote`）。 |\n| `select` | `value, option` | 选中某一项。 |\n| `deselect` | `value, option` | 多选模式下取消某一项。 |\n| `create` | [SelectOption](/docs/types#SelectOption) `{ label, value, disabled? }` | `tag` 模式下创建了新选项。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `value` | 自定义触发器展示（单选）。 |\n| `option` | 选项 `{ option }`。 |\n| `header` | 浮窗列表上方的自定义内容。 |\n| `footer` | 浮窗列表下方的自定义内容。 |\n\n## 类型\n\n<h4 id=\"SelectOption\">SelectOption</h4>\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h4 id=\"SelectOptionGroup\">SelectOptionGroup</h4>\n\n```ts\ninterface SelectOptionGroup {\n label: string\n items: SelectOption[]\n}\n```\n\n<h4 id=\"SelectModelValue\">SelectModelValue</h4>\n\n单选为 `string | number`；`multiple` 时为 `(string | number)[]`。详见 [API 类型](/docs/types#SelectModelValue)。\n"
|
|
23123
23106
|
},
|
|
23124
23107
|
"en-US": {
|
|
23125
23108
|
"title": "Select",
|
|
23126
|
-
"description": "Form select: mode=multiple|tags, labelInValue, fieldNames, showSearch,
|
|
23109
|
+
"description": "Form select: mode=multiple|tags, labelInValue, fieldNames, showSearch, clearable, optionRender, popupRender.",
|
|
23127
23110
|
"sections": [
|
|
23128
23111
|
{
|
|
23129
23112
|
"id": "overview",
|
|
@@ -23143,7 +23126,7 @@
|
|
|
23143
23126
|
{
|
|
23144
23127
|
"id": "clearable",
|
|
23145
23128
|
"title": "Clearable",
|
|
23146
|
-
"body": "`
|
|
23129
|
+
"body": "`clearable` shows a clear button when a value is selected.\n\n```vue preview src=\"./demos/Clearable.vue\"\n\n```"
|
|
23147
23130
|
},
|
|
23148
23131
|
{
|
|
23149
23132
|
"id": "invalid",
|
|
@@ -23213,12 +23196,12 @@
|
|
|
23213
23196
|
{
|
|
23214
23197
|
"id": "props",
|
|
23215
23198
|
"title": "Props",
|
|
23216
|
-
"body": "| Prop | Type | Default | Description |\n| ------------------- | --------------------------------------------------------------------------------------------------------- | --------------------------- | -------------------------------------------------------------------------------- |\n| `modelValue` | `string \\| number \\| Array<string \\| number> \\| SelectLabeledValue` | — | Selected value; an array in `mode`, or `{ value, label }` with `labelInValue`. |\n| `options` | `Array<`[SelectOption](/docs/types#SelectOption)`\\|`[SelectOptionGroup](/docs/types#SelectOptionGroup)`>` | — | Options list; may mix in `{ label, options }` groups. |\n| `fieldNames` | `{ label?, value?, disabled?, options? }` | — | Remap raw option keys. |\n| `labelInValue` | `boolean` | `false` | `v-model` / events return `{ value, label }`. |\n| `label` | `string` | — | Field label. |\n| `helpText` | `string` | — | Help text. |\n| `invalid` | `boolean` | `false` | Invalid state. |\n| `status` | `'error' \\| 'warning'` | — | Visual status; `error` matches invalid, `warning` is caution chrome. |\n| `placeholder` | `string` | — | Placeholder text. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `required` | `boolean` | `false` | Form required hint. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size; inherits Form `size` when omitted. |\n| `variant` | `'outlined' \\| 'filled'` | — | Input surface style. |\n| `fluid` | `boolean` | `false` | Stretch to the container width. |\n| `mode` | `'multiple' \\| 'tags'` | — | Multi-value; `tags` also allows creating options. |\n| `remote` | `boolean` | `false` | Skip local filtering and emit `search`. |\n| `loading` | `boolean` | `false` | Async loading state. |\n| `maxTagCount` | `number` | — | Max visible tags; extras collapse. |\n| `maxTagPlaceholder` | `(omitted) => MRenderable` | `moreTags` locale | Collapsed-tag summary. |\n| `allowClear` | `boolean` | `false` | Show a clear button when a value is selected. |\n| `notFoundContent` | `MRenderable` | `emptyOptions` locale | Empty / no-match copy. |\n| `showSearch` | `boolean` | `false` | Render a search input in the popup. |\n| `optionFilterProp` | `string` | `'label'` | Option key used for local matching. |\n| `filterOption` | `boolean \\| (input, option) => boolean` | match on `optionFilterProp` | Local filter rule; `false` disables. |\n| `optionRender` | `(option) => MRenderable` | — | Custom option row (wins over the `option` slot). |\n| `popupRender` | `(menu) => VNodeChild` | — | Wrap the popup menu. |\n| `suffixIcon` | `IconName` | `'chevron-down'` | Trigger icon. |\n| `teleport` | `boolean` | `true` | Menu Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | Mount target. `'self'` renders in place. |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | Menu alignment. |\n| `transition` | `string \\| false` | `'scale-fade'` | Menu enter/exit preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `id` | `string` | — | Control id. |\n| `errorMessage` | `string` | — | Validation copy; shown when combined with `invalid`. |\n| `name` | `string` | — | Native name helper (hidden input). |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Per-part DOM pass-through. |\n| `virtual` | `boolean` | auto | `true` forces virtualization; `false` disables; auto-on at 80+ options. |\n| `id` | `string` | — | Control id. |\n| `errorMessage` | `string` | — | Validation error copy. |\n| `name` | `string` | — | Native name when a hidden input is present. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through (`root`, `control`, …). |"
|
|
23199
|
+
"body": "| Prop | Type | Default | Description |\n| ------------------- | --------------------------------------------------------------------------------------------------------- | --------------------------- | -------------------------------------------------------------------------------- |\n| `modelValue` | `string \\| number \\| Array<string \\| number> \\| SelectLabeledValue` | 鈥? | Selected value; an array in `mode`, or `{ value, label }` with `labelInValue`. |\n| `options` | `Array<`[SelectOption](/docs/types#SelectOption)`\\|`[SelectOptionGroup](/docs/types#SelectOptionGroup)`>` | 鈥? | Options list; may mix in `{ label, options }` groups. |\n| `fieldNames` | `{ label?, value?, disabled?, options? }` | 鈥? | Remap raw option keys. |\n| `labelInValue` | `boolean` | `false` | `v-model` / events return `{ value, label }`. |\n| `label` | `string` | 鈥? | Field label. |\n| `helpText` | `string` | 鈥? | Help text. |\n| `invalid` | `boolean` | `false` | Invalid state. |\n| `status` | `'error' \\| 'warning'` | 鈥? | Visual status; `error` matches invalid, `warning` is caution chrome. |\n| `placeholder` | `string` | 鈥? | Placeholder text. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `required` | `boolean` | `false` | Form required hint. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | 鈥? | Size; inherits Form `size` when omitted. |\n| `variant` | `'outlined' \\| 'filled'` | 鈥? | Input surface style. |\n| `fluid` | `boolean` | `false` | Stretch to the container width. |\n| `mode` | `'multiple' \\| 'tags'` | 鈥? | Multi-value; `tags` also allows creating options. |\n| `remote` | `boolean` | `false` | Skip local filtering and emit `search`. |\n| `loading` | `boolean` | `false` | Async loading state. |\n| `maxTagCount` | `number` | 鈥? | Max visible tags; extras collapse. |\n| `maxTagPlaceholder` | `(omitted) => MRenderable` | `moreTags` locale | Collapsed-tag summary. |\n| `clearable` | `boolean` | `false` | Show a clear button when a value is selected. |\n| `notFoundContent` | `MRenderable` | `emptyOptions` locale | Empty / no-match copy. |\n| `showSearch` | `boolean` | `false` | Render a search input in the popup. |\n| `optionFilterProp` | `string` | `'label'` | Option key used for local matching. |\n| `filterOption` | `boolean \\| (input, option) => boolean` | match on `optionFilterProp` | Local filter rule; `false` disables. |\n| `optionRender` | `(option) => MRenderable` | 鈥? | Custom option row (wins over the `option` slot). |\n| `popupRender` | `(menu) => VNodeChild` | 鈥? | Wrap the popup menu. |\n| `suffixIcon` | `IconName` | `'chevron-down'` | Trigger icon. |\n| `teleport` | `boolean` | `true` | Menu Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | Mount target. `'self'` renders in place. |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | Menu alignment. |\n| `transition` | `string \\| false` | `'scale-fade'` | Menu enter/exit preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `id` | `string` | 鈥? | Control id. |\n| `errorMessage` | `string` | 鈥? | Validation copy; shown when combined with `invalid`. |\n| `name` | `string` | 鈥? | Native name helper (hidden input). |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | 鈥? | Per-part DOM pass-through. |\n| `virtual` | `boolean` | auto | `true` forces virtualization; `false` disables; auto-on at 80+ options. |\n| `id` | `string` | 鈥? | Control id. |\n| `errorMessage` | `string` | 鈥? | Validation error copy. |\n| `name` | `string` | 鈥? | Native name when a hidden input is present. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | 鈥? | Pass-through (`root`, `control`, 鈥?. |"
|
|
23217
23200
|
},
|
|
23218
23201
|
{
|
|
23219
23202
|
"id": "events",
|
|
23220
23203
|
"title": "Events",
|
|
23221
|
-
"body": "| Event | Prop | Description |\n| ------------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------- |\n| `update:modelValue` | [SelectModelValue](/docs/types#SelectModelValue) | Emitted when the value changes. |\n| `change` | [SelectModelValue](/docs/types#SelectModelValue) | Emitted after a selection or clear. |\n| `clear` |
|
|
23204
|
+
"body": "| Event | Prop | Description |\n| ------------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------- |\n| `update:modelValue` | [SelectModelValue](/docs/types#SelectModelValue) | Emitted when the value changes. |\n| `change` | [SelectModelValue](/docs/types#SelectModelValue) | Emitted after a selection or clear. |\n| `clear` | 鈥? | Emitted when clear is clicked. |\n| `show` | 鈥? | Emitted when the menu opens. |\n| `hide` | 鈥? | Emitted when the menu closes. |\n| `search` | `string` | Emitted as the filter query changes (`filter` / `remote`). |\n| `select` | `value, option` | Emitted when an option is selected. |\n| `deselect` | `value, option` | Emitted when an option is deselected (multiple mode). |\n| `create` | [SelectOption](/docs/types#SelectOption) `{ label, value, disabled? }` | Emitted when `tag` creates a new option. |"
|
|
23222
23205
|
},
|
|
23223
23206
|
{
|
|
23224
23207
|
"id": "slots",
|
|
@@ -23231,7 +23214,7 @@
|
|
|
23231
23214
|
"body": "<h4 id=\"SelectOption\">SelectOption</h4>\n\n```ts\ninterface SelectOption {\n label: string;\n value: string | number;\n disabled?: boolean;\n}\n```\n\n<h4 id=\"SelectOptionGroup\">SelectOptionGroup</h4>\n\n```ts\ninterface SelectOptionGroup {\n label: string;\n items: SelectOption[];\n}\n```\n\n<h4 id=\"SelectModelValue\">SelectModelValue</h4>\n\nScalar when single-select; array when `multiple`. See [API types](/docs/types#SelectModelValue)."
|
|
23232
23215
|
}
|
|
23233
23216
|
],
|
|
23234
|
-
"markdown": "---\ntitle: Select\ncategory: 02 / FORM\ndescription: \"Form select: mode=multiple|tags, labelInValue, fieldNames, showSearch, allowClear, optionRender, popupRender.\"\n---\n\n# Select\n\nForm select for choosing one or more values from a list of options.\n\n**Unlike Dropdown:** `MSelect` is a form control. Use `MDropdown` for action menus.\n\n## Import\n\n```ts\nimport { MSelect } from \"morya-ui\";\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n\n```\n\n## Clearable\n\n`allowClear` shows a clear button when a value is selected.\n\n```vue preview src=\"./demos/Clearable.vue\"\n\n```\n\n## Invalid\n\n```vue preview src=\"./demos/Invalid.vue\"\n\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n\n```\n\n## Sizes\n\n```vue preview src=\"./demos/Sizes.vue\"\n\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.vue\"\n\n```\n\n## Multiple and tag creation\n\nWith `mode=\"multiple\"`, `v-model` is an array, selected values render as removable tags, and the menu stays open after a pick.\n`mode=\"tags\"` additionally lets the user create an option from the current query (Enter or the create row).\n\n```vue preview src=\"./demos/Multiple.vue\"\n\n```\n\n```vue preview src=\"./demos/Tag.vue\"\n\n```\n\n`maxTagCount` collapses extra tags; the summary is customizable via `maxTagPlaceholder` and defaults to the `moreTags` locale copy.\n\n## labelInValue\n\nWhen enabled, `v-model` and event payloads become `{ value, label }`:\n\n```vue\n<MSelect v-model=\"picked\" label-in-value :options=\"options\" />\n```\n\n## fieldNames\n\nRemap option keys when they are not `label` / `value` (works for group children too):\n\n```vue\n<MSelect\n :options=\"[{ title: 'Apple', id: 'apple' }]\"\n :field-names=\"{ label: 'title', value: 'id' }\"\n/>\n```\n\nExtra keys are preserved, so `optionFilterProp` can target a custom field.\n\n## Group\n\n`options` can mix in `{ label, options }` groups ([SelectOptionGroup](/docs/types#SelectOptionGroup)) to render group header rows. Groups are not selectable; searching narrows options within each group and hides empty groups.\n\n```vue preview src=\"./demos/Group.vue\"\n\n```\n\n## Search and filtering\n\n`showSearch` renders a search input in the popup. Local filtering rules:\n\n- `filterOption` omitted / `true`: fuzzy match on `optionFilterProp` (default `label`);\n- `filterOption: false`: disable local filtering;\n- `filterOption: (input, option) => boolean`: custom predicate.\n\n`remote` skips local filtering and emits `search` as the query changes (pair it with `showSearch`); use `loading` for in-flight requests.\n\n```vue preview src=\"./demos/Remote.vue\"\n\n```\n\n## Custom option rendering\n\n- `optionRender(option)`: custom row content (wins over the `option` slot);\n- `popupRender(menu)`: wrap the popup menu;\n- `suffixIcon`: replace the trigger chevron.\n\n```vue preview src=\"./demos/HeaderFooter.vue\"\n\n```\n\n## Empty\n\nShows empty-state text when there are no options or no matches. Override with `notFoundContent`, otherwise it reads ConfigProvider `locale.emptyOptions`.\n\n```vue preview src=\"./demos/Empty.en.vue\"\n\n```\n\n## Teleport\n\nThe menu Teleports to `body` by default (`teleport` + `appendTo`). Set `append-to=\"self\"` or `teleport={false}` to render in place.\n\n```vue preview src=\"./demos/Teleport.vue\"\n\n```\n\n## Styling & attrs\n\nFallthrough attrs except control **events** bind to the field wrapper; `@keydown` and similar listeners attach to the combobox. Prefer `placeholder` / `name` as props. Use `placement` / `appendTo` for the panel, or `pt` for inner DOM. See [Styling & attrs](/docs/attrs).\n\n## Props\n\n| Prop | Type | Default | Description |\n| ------------------- | --------------------------------------------------------------------------------------------------------- | --------------------------- | -------------------------------------------------------------------------------- |\n| `modelValue` | `string \\| number \\| Array<string \\| number> \\| SelectLabeledValue` | — | Selected value; an array in `mode`, or `{ value, label }` with `labelInValue`. |\n| `options` | `Array<`[SelectOption](/docs/types#SelectOption)`\\|`[SelectOptionGroup](/docs/types#SelectOptionGroup)`>` | — | Options list; may mix in `{ label, options }` groups. |\n| `fieldNames` | `{ label?, value?, disabled?, options? }` | — | Remap raw option keys. |\n| `labelInValue` | `boolean` | `false` | `v-model` / events return `{ value, label }`. |\n| `label` | `string` | — | Field label. |\n| `helpText` | `string` | — | Help text. |\n| `invalid` | `boolean` | `false` | Invalid state. |\n| `status` | `'error' \\| 'warning'` | — | Visual status; `error` matches invalid, `warning` is caution chrome. |\n| `placeholder` | `string` | — | Placeholder text. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `required` | `boolean` | `false` | Form required hint. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size; inherits Form `size` when omitted. |\n| `variant` | `'outlined' \\| 'filled'` | — | Input surface style. |\n| `fluid` | `boolean` | `false` | Stretch to the container width. |\n| `mode` | `'multiple' \\| 'tags'` | — | Multi-value; `tags` also allows creating options. |\n| `remote` | `boolean` | `false` | Skip local filtering and emit `search`. |\n| `loading` | `boolean` | `false` | Async loading state. |\n| `maxTagCount` | `number` | — | Max visible tags; extras collapse. |\n| `maxTagPlaceholder` | `(omitted) => MRenderable` | `moreTags` locale | Collapsed-tag summary. |\n| `allowClear` | `boolean` | `false` | Show a clear button when a value is selected. |\n| `notFoundContent` | `MRenderable` | `emptyOptions` locale | Empty / no-match copy. |\n| `showSearch` | `boolean` | `false` | Render a search input in the popup. |\n| `optionFilterProp` | `string` | `'label'` | Option key used for local matching. |\n| `filterOption` | `boolean \\| (input, option) => boolean` | match on `optionFilterProp` | Local filter rule; `false` disables. |\n| `optionRender` | `(option) => MRenderable` | — | Custom option row (wins over the `option` slot). |\n| `popupRender` | `(menu) => VNodeChild` | — | Wrap the popup menu. |\n| `suffixIcon` | `IconName` | `'chevron-down'` | Trigger icon. |\n| `teleport` | `boolean` | `true` | Menu Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | Mount target. `'self'` renders in place. |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | Menu alignment. |\n| `transition` | `string \\| false` | `'scale-fade'` | Menu enter/exit preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `id` | `string` | — | Control id. |\n| `errorMessage` | `string` | — | Validation copy; shown when combined with `invalid`. |\n| `name` | `string` | — | Native name helper (hidden input). |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Per-part DOM pass-through. |\n| `virtual` | `boolean` | auto | `true` forces virtualization; `false` disables; auto-on at 80+ options. |\n| `id` | `string` | — | Control id. |\n| `errorMessage` | `string` | — | Validation error copy. |\n| `name` | `string` | — | Native name when a hidden input is present. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through (`root`, `control`, …). |\n\n## Events\n\n| Event | Prop | Description |\n| ------------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------- |\n| `update:modelValue` | [SelectModelValue](/docs/types#SelectModelValue) | Emitted when the value changes. |\n| `change` | [SelectModelValue](/docs/types#SelectModelValue) | Emitted after a selection or clear. |\n| `clear` | — | Emitted when clear is clicked. |\n| `show` | — | Emitted when the menu opens. |\n| `hide` | — | Emitted when the menu closes. |\n| `search` | `string` | Emitted as the filter query changes (`filter` / `remote`). |\n| `select` | `value, option` | Emitted when an option is selected. |\n| `deselect` | `value, option` | Emitted when an option is deselected (multiple mode). |\n| `create` | [SelectOption](/docs/types#SelectOption) `{ label, value, disabled? }` | Emitted when `tag` creates a new option. |\n\n## Slots\n\n| Slot | Description |\n| -------- | -------------------------------------------------- |\n| `value` | Custom single-select trigger display. |\n| `option` | Option `{ option }`. |\n| `header` | Custom content above the option list in the popup. |\n| `footer` | Custom content below the option list in the popup. |\n\n## Types\n\n<h4 id=\"SelectOption\">SelectOption</h4>\n\n```ts\ninterface SelectOption {\n label: string;\n value: string | number;\n disabled?: boolean;\n}\n```\n\n<h4 id=\"SelectOptionGroup\">SelectOptionGroup</h4>\n\n```ts\ninterface SelectOptionGroup {\n label: string;\n items: SelectOption[];\n}\n```\n\n<h4 id=\"SelectModelValue\">SelectModelValue</h4>\n\nScalar when single-select; array when `multiple`. See [API types](/docs/types#SelectModelValue).\n"
|
|
23217
|
+
"markdown": "---\ntitle: Select\ncategory: 02 / FORM\ndescription: \"Form select: mode=multiple|tags, labelInValue, fieldNames, showSearch, clearable, optionRender, popupRender.\"\n---\n\n# Select\n\nForm select for choosing one or more values from a list of options.\n\n**Unlike Dropdown:** `MSelect` is a form control. Use `MDropdown` for action menus.\n\n## Import\n\n```ts\nimport { MSelect } from \"morya-ui\";\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n\n```\n\n## Clearable\n\n`clearable` shows a clear button when a value is selected.\n\n```vue preview src=\"./demos/Clearable.vue\"\n\n```\n\n## Invalid\n\n```vue preview src=\"./demos/Invalid.vue\"\n\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n\n```\n\n## Sizes\n\n```vue preview src=\"./demos/Sizes.vue\"\n\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.vue\"\n\n```\n\n## Multiple and tag creation\n\nWith `mode=\"multiple\"`, `v-model` is an array, selected values render as removable tags, and the menu stays open after a pick.\n`mode=\"tags\"` additionally lets the user create an option from the current query (Enter or the create row).\n\n```vue preview src=\"./demos/Multiple.vue\"\n\n```\n\n```vue preview src=\"./demos/Tag.vue\"\n\n```\n\n`maxTagCount` collapses extra tags; the summary is customizable via `maxTagPlaceholder` and defaults to the `moreTags` locale copy.\n\n## labelInValue\n\nWhen enabled, `v-model` and event payloads become `{ value, label }`:\n\n```vue\n<MSelect v-model=\"picked\" label-in-value :options=\"options\" />\n```\n\n## fieldNames\n\nRemap option keys when they are not `label` / `value` (works for group children too):\n\n```vue\n<MSelect\n :options=\"[{ title: 'Apple', id: 'apple' }]\"\n :field-names=\"{ label: 'title', value: 'id' }\"\n/>\n```\n\nExtra keys are preserved, so `optionFilterProp` can target a custom field.\n\n## Group\n\n`options` can mix in `{ label, options }` groups ([SelectOptionGroup](/docs/types#SelectOptionGroup)) to render group header rows. Groups are not selectable; searching narrows options within each group and hides empty groups.\n\n```vue preview src=\"./demos/Group.vue\"\n\n```\n\n## Search and filtering\n\n`showSearch` renders a search input in the popup. Local filtering rules:\n\n- `filterOption` omitted / `true`: fuzzy match on `optionFilterProp` (default `label`);\n- `filterOption: false`: disable local filtering;\n- `filterOption: (input, option) => boolean`: custom predicate.\n\n`remote` skips local filtering and emits `search` as the query changes (pair it with `showSearch`); use `loading` for in-flight requests.\n\n```vue preview src=\"./demos/Remote.vue\"\n\n```\n\n## Custom option rendering\n\n- `optionRender(option)`: custom row content (wins over the `option` slot);\n- `popupRender(menu)`: wrap the popup menu;\n- `suffixIcon`: replace the trigger chevron.\n\n```vue preview src=\"./demos/HeaderFooter.vue\"\n\n```\n\n## Empty\n\nShows empty-state text when there are no options or no matches. Override with `notFoundContent`, otherwise it reads ConfigProvider `locale.emptyOptions`.\n\n```vue preview src=\"./demos/Empty.en.vue\"\n\n```\n\n## Teleport\n\nThe menu Teleports to `body` by default (`teleport` + `appendTo`). Set `append-to=\"self\"` or `teleport={false}` to render in place.\n\n```vue preview src=\"./demos/Teleport.vue\"\n\n```\n\n## Styling & attrs\n\nFallthrough attrs except control **events** bind to the field wrapper; `@keydown` and similar listeners attach to the combobox. Prefer `placeholder` / `name` as props. Use `placement` / `appendTo` for the panel, or `pt` for inner DOM. See [Styling & attrs](/docs/attrs).\n\n## Props\n\n| Prop | Type | Default | Description |\n| ------------------- | --------------------------------------------------------------------------------------------------------- | --------------------------- | -------------------------------------------------------------------------------- |\n| `modelValue` | `string \\| number \\| Array<string \\| number> \\| SelectLabeledValue` | 鈥? | Selected value; an array in `mode`, or `{ value, label }` with `labelInValue`. |\n| `options` | `Array<`[SelectOption](/docs/types#SelectOption)`\\|`[SelectOptionGroup](/docs/types#SelectOptionGroup)`>` | 鈥? | Options list; may mix in `{ label, options }` groups. |\n| `fieldNames` | `{ label?, value?, disabled?, options? }` | 鈥? | Remap raw option keys. |\n| `labelInValue` | `boolean` | `false` | `v-model` / events return `{ value, label }`. |\n| `label` | `string` | 鈥? | Field label. |\n| `helpText` | `string` | 鈥? | Help text. |\n| `invalid` | `boolean` | `false` | Invalid state. |\n| `status` | `'error' \\| 'warning'` | 鈥? | Visual status; `error` matches invalid, `warning` is caution chrome. |\n| `placeholder` | `string` | 鈥? | Placeholder text. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `required` | `boolean` | `false` | Form required hint. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | 鈥? | Size; inherits Form `size` when omitted. |\n| `variant` | `'outlined' \\| 'filled'` | 鈥? | Input surface style. |\n| `fluid` | `boolean` | `false` | Stretch to the container width. |\n| `mode` | `'multiple' \\| 'tags'` | 鈥? | Multi-value; `tags` also allows creating options. |\n| `remote` | `boolean` | `false` | Skip local filtering and emit `search`. |\n| `loading` | `boolean` | `false` | Async loading state. |\n| `maxTagCount` | `number` | 鈥? | Max visible tags; extras collapse. |\n| `maxTagPlaceholder` | `(omitted) => MRenderable` | `moreTags` locale | Collapsed-tag summary. |\n| `clearable` | `boolean` | `false` | Show a clear button when a value is selected. |\n| `notFoundContent` | `MRenderable` | `emptyOptions` locale | Empty / no-match copy. |\n| `showSearch` | `boolean` | `false` | Render a search input in the popup. |\n| `optionFilterProp` | `string` | `'label'` | Option key used for local matching. |\n| `filterOption` | `boolean \\| (input, option) => boolean` | match on `optionFilterProp` | Local filter rule; `false` disables. |\n| `optionRender` | `(option) => MRenderable` | 鈥? | Custom option row (wins over the `option` slot). |\n| `popupRender` | `(menu) => VNodeChild` | 鈥? | Wrap the popup menu. |\n| `suffixIcon` | `IconName` | `'chevron-down'` | Trigger icon. |\n| `teleport` | `boolean` | `true` | Menu Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | Mount target. `'self'` renders in place. |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | Menu alignment. |\n| `transition` | `string \\| false` | `'scale-fade'` | Menu enter/exit preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `id` | `string` | 鈥? | Control id. |\n| `errorMessage` | `string` | 鈥? | Validation copy; shown when combined with `invalid`. |\n| `name` | `string` | 鈥? | Native name helper (hidden input). |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | 鈥? | Per-part DOM pass-through. |\n| `virtual` | `boolean` | auto | `true` forces virtualization; `false` disables; auto-on at 80+ options. |\n| `id` | `string` | 鈥? | Control id. |\n| `errorMessage` | `string` | 鈥? | Validation error copy. |\n| `name` | `string` | 鈥? | Native name when a hidden input is present. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | 鈥? | Pass-through (`root`, `control`, 鈥?. |\n\n## Events\n\n| Event | Prop | Description |\n| ------------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------- |\n| `update:modelValue` | [SelectModelValue](/docs/types#SelectModelValue) | Emitted when the value changes. |\n| `change` | [SelectModelValue](/docs/types#SelectModelValue) | Emitted after a selection or clear. |\n| `clear` | 鈥? | Emitted when clear is clicked. |\n| `show` | 鈥? | Emitted when the menu opens. |\n| `hide` | 鈥? | Emitted when the menu closes. |\n| `search` | `string` | Emitted as the filter query changes (`filter` / `remote`). |\n| `select` | `value, option` | Emitted when an option is selected. |\n| `deselect` | `value, option` | Emitted when an option is deselected (multiple mode). |\n| `create` | [SelectOption](/docs/types#SelectOption) `{ label, value, disabled? }` | Emitted when `tag` creates a new option. |\n\n## Slots\n\n| Slot | Description |\n| -------- | -------------------------------------------------- |\n| `value` | Custom single-select trigger display. |\n| `option` | Option `{ option }`. |\n| `header` | Custom content above the option list in the popup. |\n| `footer` | Custom content below the option list in the popup. |\n\n## Types\n\n<h4 id=\"SelectOption\">SelectOption</h4>\n\n```ts\ninterface SelectOption {\n label: string;\n value: string | number;\n disabled?: boolean;\n}\n```\n\n<h4 id=\"SelectOptionGroup\">SelectOptionGroup</h4>\n\n```ts\ninterface SelectOptionGroup {\n label: string;\n items: SelectOption[];\n}\n```\n\n<h4 id=\"SelectModelValue\">SelectModelValue</h4>\n\nScalar when single-select; array when `multiple`. See [API types](/docs/types#SelectModelValue).\n"
|
|
23235
23218
|
}
|
|
23236
23219
|
}
|
|
23237
23220
|
},
|
|
@@ -28913,12 +28896,6 @@
|
|
|
28913
28896
|
"default": "false",
|
|
28914
28897
|
"description": "显示清除按钮。"
|
|
28915
28898
|
},
|
|
28916
|
-
{
|
|
28917
|
-
"name": "allowClear",
|
|
28918
|
-
"type": "boolean",
|
|
28919
|
-
"default": "—",
|
|
28920
|
-
"description": "`clearable` 的别名。"
|
|
28921
|
-
},
|
|
28922
28899
|
{
|
|
28923
28900
|
"name": "maxlength",
|
|
28924
28901
|
"type": "number",
|
|
@@ -29134,7 +29111,7 @@
|
|
|
29134
29111
|
{
|
|
29135
29112
|
"id": "props",
|
|
29136
29113
|
"title": "Props",
|
|
29137
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 绑定值。 |\n| `label` | `string` | — | 标签文案。 |\n| `helpText` | `string` | — | 辅助说明。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `status` | `'error' \\| 'warning'` | — | 视觉校验态；`error` 等同 invalid，`warning` 为警告描边。 |\n| `errorMessage` | `string` | — | 错误文案；有值时视为 invalid。 |\n| `id` | `string` | — | 原生 id。 |\n| `rows` | `number` | `4` | 可见行数。 |\n| `resize` | `'none' \\| 'vertical' \\| 'horizontal' \\| 'both'` | `'vertical'` | CSS resize；autosize 时强制 `none`。 |\n| `autosize` | `boolean \\| { minRows?: number; maxRows?: number }` | `false` | 按内容自动增高，可限制行数。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸；可继承 Form `size`。 |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | 样式变体。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `readonly` | `boolean` | `false` | 只读。 |\n| `clearable` | `boolean` | `false` | 显示清除按钮。 |\n| `
|
|
29114
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 绑定值。 |\n| `label` | `string` | — | 标签文案。 |\n| `helpText` | `string` | — | 辅助说明。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `status` | `'error' \\| 'warning'` | — | 视觉校验态；`error` 等同 invalid，`warning` 为警告描边。 |\n| `errorMessage` | `string` | — | 错误文案；有值时视为 invalid。 |\n| `id` | `string` | — | 原生 id。 |\n| `rows` | `number` | `4` | 可见行数。 |\n| `resize` | `'none' \\| 'vertical' \\| 'horizontal' \\| 'both'` | `'vertical'` | CSS resize；autosize 时强制 `none`。 |\n| `autosize` | `boolean \\| { minRows?: number; maxRows?: number }` | `false` | 按内容自动增高，可限制行数。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸；可继承 Form `size`。 |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | 样式变体。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `readonly` | `boolean` | `false` | 只读。 |\n| `clearable` | `boolean` | `false` | 显示清除按钮。 |\n| `maxlength` | `number` | — | 原生 maxlength。 |\n| `showCount` | `boolean` | `false` | 显示字数统计。 |\n| `placeholder` | `string` | — | 占位符。 |\n| `name` | `string` | — | 原生 name。 |\n| `autocomplete` | `string` | — | 原生 autocomplete。 |\n| `autofocus` | `boolean` | `false` | 挂载后聚焦。 |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 分段透传（`root`、`input`、`label` 等）。 |"
|
|
29138
29115
|
},
|
|
29139
29116
|
{
|
|
29140
29117
|
"id": "events",
|
|
@@ -29152,7 +29129,7 @@
|
|
|
29152
29129
|
"body": "无插槽。"
|
|
29153
29130
|
}
|
|
29154
29131
|
],
|
|
29155
|
-
"markdown": "---\ntitle: Textarea\ncategory: 02 / FORM\ndescription: 多行文本输入。\n---\n\n# Textarea\n\n多行文本输入。\n\n## 引入\n\n```ts\nimport { MTextarea } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Size & Variant\n\n```vue preview src=\"./demos/SizeAndVariant.vue\"\n```\n\n## AutoResize & Invalid\n\n`autosize` 会随内容增高；可传 `{ minRows, maxRows }` 限制范围。`invalid` 表示校验失败。\n\n```vue preview src=\"./demos/AutoresizeAndInvalid.vue\"\n```\n\n## Clearable & count\n\n```vue preview src=\"./demos/ClearableAndCount.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 绑定值。 |\n| `label` | `string` | — | 标签文案。 |\n| `helpText` | `string` | — | 辅助说明。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `status` | `'error' \\| 'warning'` | — | 视觉校验态；`error` 等同 invalid，`warning` 为警告描边。 |\n| `errorMessage` | `string` | — | 错误文案；有值时视为 invalid。 |\n| `id` | `string` | — | 原生 id。 |\n| `rows` | `number` | `4` | 可见行数。 |\n| `resize` | `'none' \\| 'vertical' \\| 'horizontal' \\| 'both'` | `'vertical'` | CSS resize；autosize 时强制 `none`。 |\n| `autosize` | `boolean \\| { minRows?: number; maxRows?: number }` | `false` | 按内容自动增高，可限制行数。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸；可继承 Form `size`。 |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | 样式变体。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `readonly` | `boolean` | `false` | 只读。 |\n| `clearable` | `boolean` | `false` | 显示清除按钮。 |\n| `
|
|
29132
|
+
"markdown": "---\ntitle: Textarea\ncategory: 02 / FORM\ndescription: 多行文本输入。\n---\n\n# Textarea\n\n多行文本输入。\n\n## 引入\n\n```ts\nimport { MTextarea } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Size & Variant\n\n```vue preview src=\"./demos/SizeAndVariant.vue\"\n```\n\n## AutoResize & Invalid\n\n`autosize` 会随内容增高；可传 `{ minRows, maxRows }` 限制范围。`invalid` 表示校验失败。\n\n```vue preview src=\"./demos/AutoresizeAndInvalid.vue\"\n```\n\n## Clearable & count\n\n```vue preview src=\"./demos/ClearableAndCount.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 绑定值。 |\n| `label` | `string` | — | 标签文案。 |\n| `helpText` | `string` | — | 辅助说明。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `status` | `'error' \\| 'warning'` | — | 视觉校验态；`error` 等同 invalid，`warning` 为警告描边。 |\n| `errorMessage` | `string` | — | 错误文案；有值时视为 invalid。 |\n| `id` | `string` | — | 原生 id。 |\n| `rows` | `number` | `4` | 可见行数。 |\n| `resize` | `'none' \\| 'vertical' \\| 'horizontal' \\| 'both'` | `'vertical'` | CSS resize；autosize 时强制 `none`。 |\n| `autosize` | `boolean \\| { minRows?: number; maxRows?: number }` | `false` | 按内容自动增高，可限制行数。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸；可继承 Form `size`。 |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | 样式变体。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `readonly` | `boolean` | `false` | 只读。 |\n| `clearable` | `boolean` | `false` | 显示清除按钮。 |\n| `maxlength` | `number` | — | 原生 maxlength。 |\n| `showCount` | `boolean` | `false` | 显示字数统计。 |\n| `placeholder` | `string` | — | 占位符。 |\n| `name` | `string` | — | 原生 name。 |\n| `autocomplete` | `string` | — | 原生 autocomplete。 |\n| `autofocus` | `boolean` | `false` | 挂载后聚焦。 |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 分段透传（`root`、`input`、`label` 等）。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string` | 值变化。 |\n| `clear` | — | 点击清除时触发。 |\n| `blur` | — | — |\n| `change` | — | — |\n| `focus` | — | — |\n\n## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `focus()` | 聚焦底层文本域。 |\n| `blur()` | 使底层文本域失焦。 |\n| `select()` | 选中文本域的全部文本。 |\n\n## Slots\n\n无插槽。\n"
|
|
29156
29133
|
},
|
|
29157
29134
|
"en-US": {
|
|
29158
29135
|
"title": "Textarea",
|
|
@@ -29191,7 +29168,7 @@
|
|
|
29191
29168
|
{
|
|
29192
29169
|
"id": "props",
|
|
29193
29170
|
"title": "Props",
|
|
29194
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Bound value. |\n| `label` | `string` | — | Label text. |\n| `helpText` | `string` | — | Helper text. |\n| `invalid` | `boolean` | `false` | Invalid (validation failed) state. |\n| `status` | `'error' \\| 'warning'` | — | Visual status; `error` matches invalid, `warning` is caution chrome. |\n| `id` | `string` | — | Native id. |\n| `rows` | `number` | `4` | Visible rows. |\n| `resize` | `'none' \\| 'vertical' \\| 'horizontal' \\| 'both'` | `'vertical'` | CSS resize; forced to `none` when autosize is on. |\n| `autosize` | `boolean \\| { minRows?: number; maxRows?: number }` | `false` | Auto-grow with content; optional row clamp. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size; inherits Form `size` when omitted. |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | Visual variant. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `readonly` | `boolean` | `false` | Read-only. |\n| `clearable` | `boolean` | `false` | Show a clear button. |\n| `
|
|
29171
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Bound value. |\n| `label` | `string` | — | Label text. |\n| `helpText` | `string` | — | Helper text. |\n| `invalid` | `boolean` | `false` | Invalid (validation failed) state. |\n| `status` | `'error' \\| 'warning'` | — | Visual status; `error` matches invalid, `warning` is caution chrome. |\n| `id` | `string` | — | Native id. |\n| `rows` | `number` | `4` | Visible rows. |\n| `resize` | `'none' \\| 'vertical' \\| 'horizontal' \\| 'both'` | `'vertical'` | CSS resize; forced to `none` when autosize is on. |\n| `autosize` | `boolean \\| { minRows?: number; maxRows?: number }` | `false` | Auto-grow with content; optional row clamp. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size; inherits Form `size` when omitted. |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | Visual variant. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `readonly` | `boolean` | `false` | Read-only. |\n| `clearable` | `boolean` | `false` | Show a clear button. |\n| `maxlength` | `number` | — | Native maxlength. |\n| `showCount` | `boolean` | `false` | Show character count. |\n| `errorMessage` | `string` | — | Error copy; implies invalid when set. |\n| `placeholder` | `string` | — | Placeholder. |\n| `name` | `string` | — | Native name. |\n| `autocomplete` | `string` | — | Native autocomplete. |\n| `autofocus` | `boolean` | `false` | Focus on mount. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through per DOM part (`root`, `input`, `label`, …). |"
|
|
29195
29172
|
},
|
|
29196
29173
|
{
|
|
29197
29174
|
"id": "events",
|
|
@@ -29209,7 +29186,7 @@
|
|
|
29209
29186
|
"body": "No slots."
|
|
29210
29187
|
}
|
|
29211
29188
|
],
|
|
29212
|
-
"markdown": "---\ntitle: Textarea\ncategory: 02 / FORM\ndescription: Multi-line text input.\n---\n\n# Textarea\n\nMulti-line text input.\n\n## Import\n\n```ts\nimport { MTextarea } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Size & Variant\n\n```vue preview src=\"./demos/SizeAndVariant.vue\"\n```\n\n## AutoResize & Invalid\n\n`autosize` grows with content. Pass `{ minRows, maxRows }` to clamp. `invalid` marks a validation failure.\n\n```vue preview src=\"./demos/AutoresizeAndInvalid.vue\"\n```\n\n## Clearable & count\n\n```vue preview src=\"./demos/ClearableAndCount.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Bound value. |\n| `label` | `string` | — | Label text. |\n| `helpText` | `string` | — | Helper text. |\n| `invalid` | `boolean` | `false` | Invalid (validation failed) state. |\n| `status` | `'error' \\| 'warning'` | — | Visual status; `error` matches invalid, `warning` is caution chrome. |\n| `id` | `string` | — | Native id. |\n| `rows` | `number` | `4` | Visible rows. |\n| `resize` | `'none' \\| 'vertical' \\| 'horizontal' \\| 'both'` | `'vertical'` | CSS resize; forced to `none` when autosize is on. |\n| `autosize` | `boolean \\| { minRows?: number; maxRows?: number }` | `false` | Auto-grow with content; optional row clamp. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size; inherits Form `size` when omitted. |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | Visual variant. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `readonly` | `boolean` | `false` | Read-only. |\n| `clearable` | `boolean` | `false` | Show a clear button. |\n| `
|
|
29189
|
+
"markdown": "---\ntitle: Textarea\ncategory: 02 / FORM\ndescription: Multi-line text input.\n---\n\n# Textarea\n\nMulti-line text input.\n\n## Import\n\n```ts\nimport { MTextarea } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Size & Variant\n\n```vue preview src=\"./demos/SizeAndVariant.vue\"\n```\n\n## AutoResize & Invalid\n\n`autosize` grows with content. Pass `{ minRows, maxRows }` to clamp. `invalid` marks a validation failure.\n\n```vue preview src=\"./demos/AutoresizeAndInvalid.vue\"\n```\n\n## Clearable & count\n\n```vue preview src=\"./demos/ClearableAndCount.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Bound value. |\n| `label` | `string` | — | Label text. |\n| `helpText` | `string` | — | Helper text. |\n| `invalid` | `boolean` | `false` | Invalid (validation failed) state. |\n| `status` | `'error' \\| 'warning'` | — | Visual status; `error` matches invalid, `warning` is caution chrome. |\n| `id` | `string` | — | Native id. |\n| `rows` | `number` | `4` | Visible rows. |\n| `resize` | `'none' \\| 'vertical' \\| 'horizontal' \\| 'both'` | `'vertical'` | CSS resize; forced to `none` when autosize is on. |\n| `autosize` | `boolean \\| { minRows?: number; maxRows?: number }` | `false` | Auto-grow with content; optional row clamp. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size; inherits Form `size` when omitted. |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | Visual variant. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `readonly` | `boolean` | `false` | Read-only. |\n| `clearable` | `boolean` | `false` | Show a clear button. |\n| `maxlength` | `number` | — | Native maxlength. |\n| `showCount` | `boolean` | `false` | Show character count. |\n| `errorMessage` | `string` | — | Error copy; implies invalid when set. |\n| `placeholder` | `string` | — | Placeholder. |\n| `name` | `string` | — | Native name. |\n| `autocomplete` | `string` | — | Native autocomplete. |\n| `autofocus` | `boolean` | `false` | Focus on mount. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through per DOM part (`root`, `input`, `label`, …). |\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string` | Emitted when the value changes. |\n| `clear` | — | Emitted when the value is cleared. |\n\n## Methods\n\n| Method | Description |\n| --- | --- |\n| `focus()` | Focus the underlying textarea. |\n| `blur()` | Blur the underlying textarea. |\n| `select()` | Select all text in the textarea. |\n\n## Slots\n\nNo slots.\n"
|
|
29213
29190
|
}
|
|
29214
29191
|
}
|
|
29215
29192
|
},
|