feat: sender component complements upload logic#118
Conversation
WalkthroughA file upload popup feature is introduced to the sender component, including UI, tooltip customization, and new events for local and online file uploads. Supporting documentation, type declarations, and styles are updated. A new demo component showcases file upload, and the documentation is expanded to describe the new functionality and events. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SenderComponent
participant ActionButtons
participant FileDialog
User->>ActionButtons: Click Upload Button
ActionButtons->>SenderComponent: Emit show-upload-popup(true)
SenderComponent->>SenderComponent: Show Upload Popup
User->>SenderComponent: Click "Local Upload"
SenderComponent->>FileDialog: Open file dialog
FileDialog-->>SenderComponent: Return selected files
SenderComponent->>SenderComponent: Close Upload Popup
SenderComponent->>SenderComponent: Emit files-selected(files)
User->>SenderComponent: Click "Online File"
SenderComponent->>SenderComponent: Close Upload Popup
SenderComponent->>SenderComponent: Emit upload-online()
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/demos/sender/FileUpload.vueOops! Something went wrong! :( ESLint: 9.29.0 Error: The 'jiti' library is required for loading TypeScript configuration files. Make sure to install it. packages/components/src/sender/index.type.tsOops! Something went wrong! :( ESLint: 9.29.0 Error: The 'jiti' library is required for loading TypeScript configuration files. Make sure to install it. packages/components/src/sender/index.vueOops! Something went wrong! :( ESLint: 9.29.0 Error: The 'jiti' library is required for loading TypeScript configuration files. Make sure to install it. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (4)
✨ Finishing Touches
🧪 Generate Unit Tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
SonyLeo
force-pushed
the
feat/sender-file-upload
branch
from
e130888 to
3470015
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (10)
packages/components/src/sender/index.less (1)
824-833: Nit: make overlay non-interactive if it’s only a backdropIf you intentionally block scrolling but not clicks, add:
.pointer-events-none();Otherwise ignore.
packages/components/src/sender/components/ActionButtons.vue (1)
84-86:uploadButtonRefis declared but never usedThe local ref isn’t referenced elsewhere and will trigger an unused-var lint error.
-// 文件上传按钮引用 -const uploadButtonRef = ref<HTMLElement | null>(null)docs/demos/sender/FileUpload.vue (2)
194-205: Dead CSS selector
.event-type.localis never applied – the code uses'files'and'online'only. Remove or rename:-.event-type.local { - color: #1890ff; -}(or push a
'local'log entry if planned).
48-66: Minor: slice once instead of twiceYou already converted the
FileListto an array – reuse it.- selectedFiles.value = Array.from(files) + selectedFiles.value = [...files]Purely cosmetic.
packages/components/src/sender/index.vue (4)
52-57: Exposeaccept&multipleas configurable props
accept: '*'andmultiple: trueare hard-coded. Different integrations (images-only, single PDF, etc.) will need flexibility.-const { files, open: openFileDialog } = useFileDialog({ - multiple: true, - accept: '*', +const { files, open: openFileDialog } = useFileDialog({ + multiple: props.uploadMultiple ?? true, + accept: props.uploadAccept ?? '*', reset: true, })Add the corresponding optional props (
uploadAccept,uploadMultiple) with sensible defaults.
65-86: Provide keyboard & accessibility support for the popupThe upload popup can only be closed with a mouse click. Consider:
- Listening for the
Escapekey to close.- Adding
role="dialog"andaria-modal="true"so screen-readers recognise it.- Setting
tabindex="-1"and moving focus into the popup on open, then restoring focus on close.This improves a11y and aligns with WCAG.
48-50: Minor: co-locate reactive state with related handlers
showUploadPopupis defined far from its handlers, breaking locality.
Moving the declaration directly above the popup helpers (handleShowUploadPopup,handleUploadPopupLocalUpload, etc.) improves readability.
12-13: Tree-shaking friendly icon importsIf your bundler doesn’t tree-shake ESM properly, consider importing only the used icons:
-import { IconAssociate, IconUploadCloud, IconUploadLocal } from '@opentiny/tiny-robot-svgs' +import IconAssociate from '@opentiny/tiny-robot-svgs/es/IconAssociate' +import IconUploadCloud from '@opentiny/tiny-robot-svgs/es/IconUploadCloud' +import IconUploadLocal from '@opentiny/tiny-robot-svgs/es/IconUploadLocal'This can shave a few KB off the bundle.
docs/src/components/sender.md (2)
120-125: Unify terminology for file upload feature.The section header is “文件上传” but the description starts with “附件上传功能”. For consistency, consider using “文件上传功能” in the description to match the header and other occurrences.
127-131: Use inline code formatting for default tooltip value.In the sentence “默认为"上传文件"”， wrap the default value in backticks—e.g.
上传文件—to align with other prop descriptions and improve readability.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
packages/components/src/assets/svgs/folder-empty.svgis excluded by!**/*.svgpackages/svgs/src/assets/upload-cloud.svgis excluded by!**/*.svgpackages/svgs/src/assets/upload-local.svgis excluded by!**/*.svg
📒 Files selected for processing (6)
docs/demos/sender/FileUpload.vue(1 hunks)docs/src/components/sender.md(3 hunks)packages/components/src/sender/components/ActionButtons.vue(5 hunks)packages/components/src/sender/index.less(3 hunks)packages/components/src/sender/index.type.ts(3 hunks)packages/components/src/sender/index.vue(8 hunks)
🔇 Additional comments (10)
packages/components/src/sender/index.type.ts (3)
31-33: Prop addition looks consistent
uploadTooltipfollows the existing camel-case naming and is optional, mirroring the rest ofSenderProps. No issues spotted.
62-64: Keep type definitions in sync with defaults
ActionButtonsProps.uploadTooltipis optional here but a non-undefined default is provided inActionButtons.vue. ✅
83-85: Event contracts LGTMBoth new events are declared with correct payload signatures and match the implementation.
packages/components/src/sender/index.less (2)
110-116: Good call making.tiny-sender__input-rowrelatively positionedNeeded for the absolutely-positioned upload popup. ✔️
373-420: ```shell
#!/bin/bashSearch for the definition of --tr-z-index-dropdown to verify its default value
rg --context 3 "--tr-z-index-dropdown" -n
</details> <details> <summary>packages/components/src/sender/components/ActionButtons.vue (2)</summary> `54-59`: **Default value aligns with type definition** The default of `'上传文件'` matches the optional prop – all good. --- `146-152`: **Consider emitting `false` to hide popup** Only the “show” side of the state is emitted. If the parent closes the popup internally it’s fine, otherwise you may want a counterpart: ```ts emit('show-upload-popup', false)from inside the parent or on backdrop click, to keep the API symmetrical.
packages/components/src/sender/index.vue (1)
577-590: Prop drilling looks good – ensure ActionButtons actually emitsshow-upload-popupThe new prop/emit wiring is clean, but double-check
ActionButtons.vueemitsshow-upload-popupwith a boolean payload that matcheshandleShowUploadPopup.Also applies to: 629-642
docs/src/components/sender.md (2)
245-245: Props table addition looks good.The new
uploadTooltipprop is clearly documented with its type and default value in the props table.
279-280: Verify thefiles-selectedevent signature.Confirm whether the component can emit
nullwhen no file is selected; if not, consider narrowing the callback type toFileListonly.
1 participant
sender 组件附件按钮增加上传逻辑并更新案例代码
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Documentation
Style