Skip to content

feat(MentionSender, Sender): add openHeader prop for controlling head… #340

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
GBcui wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(MentionSender, Sender): add openHeader prop for controlling head… #340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab4a5e4
feat(MentionSender, Sender): add openHeader prop for controlling head…
GBcui Sep 10, 2025
4e14370
Merge branch 'element-plus-x:main' into main
GBcui Sep 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,3 +47,4 @@ yarn-error.log*
.oxlintrc.json.bak
*/**/auto-imports.d.ts
*/**/components.d.ts
.cunzhi*
53 changes: 23 additions & 30 deletions apps/docs/en/components/mentionSender/demos/header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,39 +5,36 @@ title: Header Slot

Use the `#header` slot to customize the input header content.

::: info
Control header container expand/collapse through component instance
::: warning Deprecation Warning
The following methods will be removed in the next major version. It is recommended to use `v-model:openHeader` for two-way binding control:

- `senderRef.value.openHeader()` Open header container
- `senderRef.value.closeHeader()` Close header container
- `senderRef.value.openHeader()` Open header container (deprecated)
- `senderRef.value.closeHeader()` Close header container (deprecated)
:::

::: tip Recommended Usage
Use `v-model:openHeader` for two-way binding to control header display state:

```vue
<MentionSender v-model:openHeader="openHeader">
<template #header>Header content</template>
</MentionSender>
```
:::
</docs>

<script setup lang="ts">
import { CircleClose } from '@element-plus/icons-vue';

const senderRef = ref();
const senderValue = ref('');
const showHeaderFlog = ref(false);

onMounted(() => {
showHeaderFlog.value = true;
senderRef.value.openHeader();
});
const openHeader = ref(true); // Use v-model:openHeader to control header display state

function openCloseHeader() {
if (!showHeaderFlog.value) {
senderRef.value.openHeader();
}
else {
senderRef.value.closeHeader();
}
showHeaderFlog.value = !showHeaderFlog.value;
function toggleHeader() {
openHeader.value = !openHeader.value;
}

function closeHeader() {
showHeaderFlog.value = false;
senderRef.value.closeHeader();
openHeader.value = false;
}
</script>

Expand All @@ -51,26 +48,22 @@ function closeHeader() {
justify-content: space-between;
"
>
<el-button style="width: fit-content" @click="openCloseHeader">
{{ showHeaderFlog ? 'Close Header' : 'Open Header' }}
<el-button style="width: fit-content" @click="toggleHeader">
{{ openHeader ? 'Close Header' : 'Open Header' }}
</el-button>
<MentionSender ref="senderRef" v-model="senderValue">
<MentionSender v-model="senderValue" v-model:open-header="openHeader">
<template #header>
<div class="header-self-wrap">
<div class="header-self-title">
<div class="header-left">
💯 Welcome to Element Plus X
</div>
<div class="header-left">💯 Welcome to Element Plus X</div>
<div class="header-right">
<el-button @click.stop="closeHeader">
<el-icon><CircleClose /></el-icon>
<span>Close Header</span>
</el-button>
</div>
</div>
<div class="header-self-content">
🦜 Custom Header Content
</div>
<div class="header-self-content">🦜 Custom Header Content</div>
</div>
</template>
</MentionSender>
Expand Down
1 change: 1 addition & 0 deletions apps/docs/en/components/mentionSender/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@ This warm tip was last updated: `2025-04-16`
| ------------------------- | -------------------- | -------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `v-model` | String | No | '' | Bound value of the input box, use `v-model` for two-way binding. |
| `placeholder` | String | No | '' | Placeholder text for the input box. |
| `openHeader` | Boolean | No | false | Whether to open the custom header of the input box, using `v-model:openHeader` for two-way binding |
| `auto-size` | Object | No | \{ minRows:1, maxRows:6 \} | Set the minimum and maximum number of visible rows for the input box. |
| `read-only` | Boolean | No | false | Whether the input box is read-only. |
| `disabled` | Boolean | No | false | Whether the input box is disabled. |
Expand Down
53 changes: 23 additions & 30 deletions apps/docs/en/components/sender/demos/header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,39 +5,36 @@ title: Header Slot

Use the `#header` slot to customize the input header content.

::: info
Control header container expand/collapse through component instance
::: warning Deprecation Warning
The following methods will be removed in the next major version. It is recommended to use `v-model:openHeader` for two-way binding control:

- `senderRef.value.openHeader()` Open header container
- `senderRef.value.closeHeader()` Close header container
- `senderRef.value.openHeader()` Open header container (deprecated)
- `senderRef.value.closeHeader()` Close header container (deprecated)
:::

::: tip Recommended Usage
Use `v-model:openHeader` for two-way binding to control header display state:

```vue
<Sender v-model:openHeader="openHeader">
<template #header>Header content</template>
</Sender>
```
Comment on lines +15 to +22
Copy link

@coderabbitai coderabbitai bot Sep 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix sample: use kebab-case argument in DOM templates.

In SFC/DOM templates, the v-model argument must be kebab-cased. Update the snippet.

-```vue
-<Sender v-model:openHeader="openHeader">
+```vue
+<Sender v-model:open-header="openHeader">
   <template #header>Header content</template>
 </Sender>

<details>
<summary>🤖 Prompt for AI Agents</summary>

In apps/docs/en/components/sender/demos/header.vue around lines 15 to 22, the
example uses a camelCase v-model argument (v-model:openHeader) which is invalid
in SFC/DOM templates; update the snippet to use kebab-case for the v-model
argument (v-model:open-header="openHeader") in the template example so it
follows Vue's DOM/SFC template requirements.


</details>

<!-- fingerprinting:phantom:medusa:chinchilla -->

<!-- This is an auto-generated comment by CodeRabbit -->

:::
</docs>

<script setup lang="ts">
import { CircleClose } from '@element-plus/icons-vue';

const senderRef = ref();
const senderValue = ref('');
const showHeaderFlog = ref(false);

onMounted(() => {
showHeaderFlog.value = true;
senderRef.value.openHeader();
});
const openHeader = ref(true); // Use v-model:openHeader to control header display state

function openCloseHeader() {
if (!showHeaderFlog.value) {
senderRef.value.openHeader();
}
else {
senderRef.value.closeHeader();
}
showHeaderFlog.value = !showHeaderFlog.value;
function toggleHeader() {
openHeader.value = !openHeader.value;
}

function closeHeader() {
showHeaderFlog.value = false;
senderRef.value.closeHeader();
openHeader.value = false;
}
</script>

Expand All @@ -51,26 +48,22 @@ function closeHeader() {
justify-content: space-between;
"
>
<el-button style="width: fit-content" @click="openCloseHeader">
{{ showHeaderFlog ? 'Close Header' : 'Open Header' }}
<el-button style="width: fit-content" @click="toggleHeader">
{{ openHeader ? 'Close Header' : 'Open Header' }}
</el-button>
<Sender ref="senderRef" v-model="senderValue">
<Sender v-model="senderValue" v-model:open-header="openHeader">
<template #header>
<div class="header-self-wrap">
<div class="header-self-title">
<div class="header-left">
💯 Welcome to Element Plus X
</div>
<div class="header-left">💯 Welcome to Element Plus X</div>
<div class="header-right">
<el-button @click.stop="closeHeader">
<el-icon><CircleClose /></el-icon>
<span>Close Header</span>
</el-button>
</div>
</div>
<div class="header-self-content">
🦜 Custom Header Content
</div>
<div class="header-self-content">🦜 Custom Header Content</div>
</div>
</template>
</Sender>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/en/components/sender/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
title: Sender
---


::: warning
`Added in version 1.1.6`

Expand Down Expand Up @@ -101,6 +100,7 @@ Built-in browser speech recognition API. You can use the [`useRecord`](https://e
| ------------------------- | -------------------- | -------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `v-model` | String | No | '' | Bound value of the input box, use `v-model` for two-way binding. |
| `placeholder` | String | No | '' | Placeholder text for the input box. |
| `openHeader` | Boolean | No | false | Whether to open the custom header of the input box, using `v-model:openHeader` for two-way binding |
| `auto-size` | Object | No | \{ minRows:1, maxRows:6 \} | Set the minimum and maximum number of visible rows for the input box. |
| `read-only` | Boolean | No | false | Whether the input box is read-only. |
| `disabled` | Boolean | No | false | Whether the input box is disabled. |
Expand Down
53 changes: 23 additions & 30 deletions apps/docs/zh/components/mentionSender/demos/header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,39 +5,36 @@ title: 头部插槽

通过 `#header` 插槽用于自定义输入框的头部内容。

::: info
通过组件实例控制 头部容器 展开收起
::: warning 废弃警告
以下方法将在下个大版本中移除，推荐使用 `v-model:openHeader` 进行双向绑定控制：

- `senderRef.value.openHeader()` 打开头部容器
- `senderRef.value.closeHeader()` 关闭头部容器
- `senderRef.value.openHeader()` 打开头部容器 (已废弃)
- `senderRef.value.closeHeader()` 关闭头部容器 (已废弃)
:::

::: tip 推荐用法
使用 `v-model:openHeader` 进行双向绑定控制头部显示状态：

```vue
<Sender v-model:openHeader="openHeader">
<template #header>头部内容</template>
</Sender>
```
Comment on lines +19 to +22
Copy link

@coderabbitai coderabbitai bot Sep 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix component tag and use kebab-case v-model arg in the snippet

This demo is for MentionSender but the snippet shows Sender and camelCase argument. Align with actual usage below.

Apply:

-<Sender v-model:openHeader="openHeader">
-  <template #header>头部内容</template>
-</Sender>
+<MentionSender v-model:open-header="openHeader">
+  <template #header>头部内容</template>
+</MentionSender>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Sender v-model:openHeader="openHeader">
<template #header>头部内容</template>
</Sender>
```
<MentionSender v-model:open-header="openHeader">
<template #header>头部内容</template>
</MentionSender>
🤖 Prompt for AI Agents 
In apps/docs/zh/components/mentionSender/demos/header.vue around lines 19 to 22,
the demo snippet incorrectly uses <Sender> and a camelCase v-model argument;
update the component tag to MentionSender and change the v-model argument to
kebab-case (v-model:open-header) so it matches the actual component API and the
usage shown elsewhere; ensure the slot template remains the same (template
#header) and that the binding syntax is consistent with other examples.

:::
</docs>

<script setup lang="ts">
import { CircleClose } from '@element-plus/icons-vue';

const senderRef = ref();
const senderValue = ref('');
const showHeaderFlog = ref(false);

onMounted(() => {
showHeaderFlog.value = true;
senderRef.value.openHeader();
});
const openHeader = ref(true); // 使用 v-model:openHeader 控制头部显示状态

function openCloseHeader() {
if (!showHeaderFlog.value) {
senderRef.value.openHeader();
}
else {
senderRef.value.closeHeader();
}
showHeaderFlog.value = !showHeaderFlog.value;
function toggleHeader() {
openHeader.value = !openHeader.value;
}

function closeHeader() {
showHeaderFlog.value = false;
senderRef.value.closeHeader();
openHeader.value = false;
}
</script>

Expand All @@ -51,26 +48,22 @@ function closeHeader() {
justify-content: space-between;
"
>
<el-button style="width: fit-content" @click="openCloseHeader">
{{ showHeaderFlog ? '关闭头部' : '打开头部' }}
<el-button style="width: fit-content" @click="toggleHeader">
{{ openHeader ? '关闭头部' : '打开头部' }}
</el-button>
<MentionSender ref="senderRef" v-model="senderValue">
<MentionSender v-model="senderValue" v-model:open-header="openHeader">
<template #header>
<div class="header-self-wrap">
<div class="header-self-title">
<div class="header-left">
💯 欢迎使用 Element Plus X
</div>
<div class="header-left">💯 欢迎使用 Element Plus X</div>
<div class="header-right">
<el-button @click.stop="closeHeader">
<el-icon><CircleClose /></el-icon>
<span>关闭头部</span>
</el-button>
</div>
</div>
<div class="header-self-content">
🦜 自定义头部内容
</div>
<div class="header-self-content">🦜 自定义头部内容</div>
</div>
</template>
</MentionSender>
Expand Down
1 change: 1 addition & 0 deletions apps/docs/zh/components/mentionSender/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@ title: 'MentionSender'
| ------------------------- | -------------------- | -------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `v-model` | String | 否 | '' | 输入框的绑定值，使用 `v-model` 进行双向绑定。 |
| `placeholder` | String | 否 | '' | 输入框的提示语文本。 |
| `openHeader` | Boolean | 否 | false | 输入框自定义头部是否打开，使用 `v-model:openHeader` 进行双向绑定 |
| `auto-size` | Object | 否 | \{ minRows:1, maxRows:6 \} | 设置输入框的最小展示行数和最大展示行数。 |
| `read-only` | Boolean | 否 | false | 输入框是否为只读状态。 |
| `disabled` | Boolean | 否 | false | 输入框是否为禁用状态。 |
Expand Down
53 changes: 23 additions & 30 deletions apps/docs/zh/components/sender/demos/header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,39 +5,36 @@ title: 头部插槽

通过 `#header` 插槽用于自定义输入框的头部内容。

::: info
通过组件实例控制 头部容器 展开收起
::: warning 废弃警告
以下方法将在下个大版本中移除，推荐使用 `v-model:openHeader` 进行双向绑定控制：

- `senderRef.value.openHeader()` 打开头部容器
- `senderRef.value.closeHeader()` 关闭头部容器
- `senderRef.value.openHeader()` 打开头部容器 (已废弃)
- `senderRef.value.closeHeader()` 关闭头部容器 (已废弃)
:::

::: tip 推荐用法
使用 `v-model:openHeader` 进行双向绑定控制头部显示状态：

```vue
<Sender v-model:openHeader="openHeader">
<template #header>头部内容</template>
</Sender>
```
:::
</docs>

<script setup lang="ts">
import { CircleClose } from '@element-plus/icons-vue';

const senderRef = ref();
const senderValue = ref('');
const showHeaderFlog = ref(false);

onMounted(() => {
showHeaderFlog.value = true;
senderRef.value.openHeader();
});
const openHeader = ref(true); // 使用 v-model:openHeader 控制头部显示状态

function openCloseHeader() {
if (!showHeaderFlog.value) {
senderRef.value.openHeader();
}
else {
senderRef.value.closeHeader();
}
showHeaderFlog.value = !showHeaderFlog.value;
function toggleHeader() {
openHeader.value = !openHeader.value;
}

function closeHeader() {
showHeaderFlog.value = false;
senderRef.value.closeHeader();
openHeader.value = false;
}
</script>

Expand All @@ -51,26 +48,22 @@ function closeHeader() {
justify-content: space-between;
"
>
<el-button style="width: fit-content" @click="openCloseHeader">
{{ showHeaderFlog ? '关闭头部' : '打开头部' }}
<el-button style="width: fit-content" @click="toggleHeader">
{{ openHeader ? '关闭头部' : '打开头部' }}
</el-button>
<Sender ref="senderRef" v-model="senderValue">
<Sender v-model="senderValue" v-model:open-header="openHeader">
<template #header>
<div class="header-self-wrap">
<div class="header-self-title">
<div class="header-left">
💯 欢迎使用 Element Plus X
</div>
<div class="header-left">💯 欢迎使用 Element Plus X</div>
<div class="header-right">
<el-button @click.stop="closeHeader">
<el-icon><CircleClose /></el-icon>
<span>关闭头部</span>
</el-button>
</div>
</div>
<div class="header-self-content">
🦜 自定义头部内容
</div>
<div class="header-self-content">🦜 自定义头部内容</div>
</div>
</template>
</Sender>
Expand Down
Loading