docs(conversations): add editable demo #91
Conversation
WalkthroughThe pull request introduces a new editable conversation feature. It adds a "可编辑" section in the conversations component documentation, which includes a demo reference ( Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant V as AXConversationsEditable
participant E as EditableItem
U->>V: Clicks edit button on a conversation item
V->>E: Activates editing mode
E->>U: Displays input field for editing
U->>E: Updates the conversation name (on blur/Enter)
E-->>V: Sends updated name and exits editing mode
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
docs/examples/conversations/editable.vueOops! Something went wrong! :( ESLint: 8.57.1 Error: Failed to load parser 'vue-eslint-parser' declared in '.eslintrc.js': Cannot find module 'vue-eslint-parser'
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for antd-design-x-vue ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
docs/examples/conversations/editable.vue (4)
10-34: Enhance accessibility and user experience of the EditableItem componentThe EditableItem component implements a good editing pattern, but could benefit from several UX and accessibility improvements:
- The edit button lacks an accessible label
- The input field doesn't automatically receive focus when edit mode is activated
- There's no visual indication that an item is being edited beyond the input field itself
Consider applying these improvements:
const EditableItem = (props: { index: number }) => { const editing = ref(false); const label = ref(`Conversation Item ${props.index + 1}`) + const inputRef = ref<HTMLInputElement | null>(null); + + const enableEditing = () => { + editing.value = true; + // Allow DOM to update before focusing + setTimeout(() => inputRef.value?.focus(), 0); + }; return ( <Flex justify="space-between" align="center" style={{ width: '100%' }}> { editing.value ? <Input v-model:value={label.value} + ref={inputRef} onBlur={() => editing.value = false} onPressEnter={() => editing.value = false} + placeholder="Enter conversation name" /> : <> <span>{label.value}</span> <Button type="text" icon={<EditOutlined />} - onClick={() => editing.value = true} + onClick={enableEditing} + aria-label="Edit conversation name" + title="Edit conversation name" /> </> } </Flex> ) }
36-40: Add visual indicator for disabled itemsCurrently, there's no visual cue to indicate that the 4th item is disabled.
Consider adding a visual indicator to show the disabled state:
const items: ConversationsProps['items'] = Array.from({ length: 4 }).map((_, index) => { const isDisabled = index === 3; return { key: `item${index + 1}`, - label: <EditableItem index={index} />, + label: isDisabled + ? <Flex justify="space-between" align="center" style={{ width: '100%', opacity: '0.5' }}> + <span>{`Conversation Item ${index + 1}`}</span> + <Button type="text" icon={<EditOutlined />} disabled /> + </Flex> + : <EditableItem index={index} />, disabled: isDisabled, } });
45-49: Consider providing a shadow or border for better visual separationThe container styling could benefit from a border or shadow to provide better visual separation from the background.
const style = computed(() => ({ width: '256px', background: token.value.colorBgContainer, borderRadius: token.value.borderRadius, + boxShadow: token.value.boxShadowTertiary, + border: `1px solid ${token.value.colorBorderSecondary}`, }));
51-55: Implement error handling for user inputThe current implementation doesn't provide feedback for empty or invalid conversation names.
Consider implementing validation to prevent empty conversation names or provide proper error handling:
<script setup lang="tsx"> import { EditOutlined } from '@ant-design/icons-vue'; - import { Button, Flex, Input, theme } from 'ant-design-vue'; + import { Button, Flex, Input, theme, message } from 'ant-design-vue'; import { Conversations } from 'ant-design-x-vue'; import type { ConversationsProps } from 'ant-design-x-vue'; import { computed, ref } from 'vue'; // ... existing code ... const EditableItem = (props: { index: number }) => { const editing = ref(false); const label = ref(`Conversation Item ${props.index + 1}`) const previousLabel = ref(label.value); const saveLabel = () => { if (!label.value.trim()) { message.error('Conversation name cannot be empty'); label.value = previousLabel.value; } editing.value = false; }; const startEditing = () => { previousLabel.value = label.value; editing.value = true; }; return ( <Flex justify="space-between" align="center" style={{ width: '100%' }}> { editing.value ? <Input v-model:value={label.value} onBlur={saveLabel} onPressEnter={saveLabel} /> : <> <span>{label.value}</span> <Button type="text" icon={<EditOutlined />} onClick={startEditing} /> </> } </Flex> ) } // ... rest of the code ...
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
docs/component/conversations.md(1 hunks)docs/examples/conversations/editable.vue(1 hunks)
🔇 Additional comments (1)
docs/component/conversations.md (1)
29-36: Documentation addition looks good!The new "可编辑" (Editable) section follows the established pattern of the documentation, providing a clear reference to the new editable conversations demo.
wzc520pyfm
force-pushed
the
docs/conversation-add-editable-demo
branch
from
4d0b275 to
804d1d5
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
docs/examples/conversations/editable.vue (4)
10-13: Add semicolon for consistency.Missing semicolon at the end of line 12.
- const label = ref(`Conversation Item ${props.index + 1}`) + const label = ref(`Conversation Item ${props.index + 1}`);
14-34: Consider accessibility improvements for the edit functionality.The edit button lacks accessibility attributes, which makes it difficult for screen reader users to understand its purpose.
<Button type="text" icon={<EditOutlined />} onClick={() => editing.value = true} + aria-label="Edit conversation name" />Also, consider providing some visual feedback when the input is focused for better UX.
51-56: Consider adding validation before exiting edit mode.Currently, the editing state changes immediately on blur or Enter key press without validating input. Consider adding validation to prevent empty values or applying other business rules.
const EditableItem = (props: { index: number }) => { const editing = ref(false); const label = ref(`Conversation Item ${props.index + 1}`); + const validateAndSave = () => { + if (label.value.trim()) { + editing.value = false; + } + }; return ( <Flex justify="space-between" align="center" style={{ width: '100%' }}> { editing.value ? <Input v-model:value={label.value} - onBlur={() => editing.value = false} - onPressEnter={() => editing.value = false} + onBlur={validateAndSave} + onPressEnter={validateAndSave} /> : /* rest of the component */ } </Flex> ) }
1-56: Consider extracting EditableItem to its own component for better reusability.The
EditableItemcomponent is well-structured but would benefit from being extracted if it's intended to be reused elsewhere.Also, if this component is part of a real application rather than just a demo, consider implementing:
- Error handling for edit operations
- State persistence between renders
- Event emitters to notify parent components of label changes
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
docs/component/conversations.md(1 hunks)docs/examples/conversations/editable.vue(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- docs/component/conversations.md
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules - antd-design-x-vue
- GitHub Check: Header rules - antd-design-x-vue
- GitHub Check: Pages changed - antd-design-x-vue
🔇 Additional comments (4)
docs/examples/conversations/editable.vue (4)
1-7: Good choice of imports and setup structure.The script is properly configured with TypeScript and TSX support. You've imported all necessary components from Ant Design Vue and your custom library.
8-8: Good use of defineOptions for component naming.Explicitly naming the component helps with debugging and DevTools identification.
36-40: Good approach for item generation with appropriate disabled state handling.Creating items with Array.from and map is clean and efficient. The disabled state for the last item demonstrates proper constraint handling.
42-49: Great use of theme tokens for consistent styling.Using the theme token system ensures the component adapts to theme changes automatically.
About #84 .
Summary by CodeRabbit