fix(Sender): 增加 Sender 组件增加属性 minlength、maxlength #349
Conversation
WalkthroughAdds two public props, Changes
Sequence Diagram(s):Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches
🧪 Generate unit tests
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. 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. Comment |
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/core/src/components/Sender/index.vue (1)
430-453: Missing implementation: Props are declared but not used in the template.The
minlengthandmaxlengthprops are declared but not passed to theel-inputcomponent. These attributes should be bound to the textarea element to actually enforce the length restrictions.Apply this diff to bind the length attributes to the input:
<el-input ref="inputRef" v-model="internalValue" class="el-sender-input" :input-style=" props.inputStyle || { resize: 'none', 'max-height': '176px', 'max-width': inputWidth } " :rows="1" :autosize="autoSize" type="textarea" :validate-event="false" :placeholder="placeholder" + :minlength="minlength" + :maxlength="maxlength" :read-only="readOnly || disabled" :disabled="disabled" @keydown="handleKeyDown" @compositionstart="handleCompositionStart" @compositionend="handleCompositionEnd" @paste="handleInternalPaste" />
🧹 Nitpick comments (2)
packages/core/src/components/Sender/index.vue (2)
61-61: Address ESLint formatting issues for consistency.The code has multiple ESLint violations related to newlines after if statements and brace style. While these are minor formatting issues, they should be addressed to maintain code consistency.
Consider running
eslint --fixto automatically resolve these formatting issues, or apply the suggested formatting manually:- if (props.readOnly || props.disabled) return; + if (props.readOnly || props.disabled) + return;Apply similar formatting fixes to all flagged locations.
Also applies to: 91-91, 103-103, 172-172, 174-174, 179-179, 180-180, 190-190, 254-254, 259-259, 266-266
122-125: Consider consistent brace style formatting.Multiple locations have closing braces on the same line as subsequent blocks, which violates the project's ESLint brace-style rules.
For consistency with the project's ESLint configuration, consider reformatting these else blocks:
- } else { + } + else {Apply similar formatting to all flagged brace style violations.
Also applies to: 136-139, 151-154, 221-224, 297-300, 318-323
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/core/src/components/Sender/index.vue(13 hunks)packages/core/src/components/Sender/types.d.ts(1 hunks)packages/core/src/stories/Sender/Sender.stories.ts(1 hunks)
🧰 Additional context used
🪛 ESLint
packages/core/src/components/Sender/index.vue
[error] 61-61: Expect newline after if
(antfu/if-newline)
[error] 91-91: Expect newline after if
(antfu/if-newline)
[error] 103-103: Expect newline after if
(antfu/if-newline)
[error] 122-122: Closing curly brace appears on the same line as the subsequent block.
(style/brace-style)
[error] 136-136: Closing curly brace appears on the same line as the subsequent block.
(style/brace-style)
[error] 151-151: Closing curly brace appears on the same line as the subsequent block.
(style/brace-style)
[error] 172-172: Expect newline after if
(antfu/if-newline)
[error] 174-174: Expect newline after if
(antfu/if-newline)
[error] 179-179: Expect newline after if
(antfu/if-newline)
[error] 180-180: Expect newline after if
(antfu/if-newline)
[error] 190-190: Expect newline after if
(antfu/if-newline)
[error] 221-221: Closing curly brace appears on the same line as the subsequent block.
(style/brace-style)
[error] 254-254: Expect newline after if
(antfu/if-newline)
[error] 259-259: Expect newline after if
(antfu/if-newline)
[error] 266-266: Expect newline after if
(antfu/if-newline)
[error] 297-297: Closing curly brace appears on the same line as the subsequent block.
(style/brace-style)
[error] 318-318: Closing curly brace appears on the same line as the subsequent block.
(style/brace-style)
[error] 320-320: Closing curly brace appears on the same line as the subsequent block.
(style/brace-style)
🔇 Additional comments (3)
packages/core/src/components/Sender/types.d.ts (1)
8-11: LGTM! Clean addition of native input length attributes.The new
minlengthandmaxlengthprops are correctly typed as optionalstring | numbervalues, matching the native HTML input attributes. The Chinese comments provide clear context for their purpose.packages/core/src/stories/Sender/Sender.stories.ts (1)
27-34: LGTM! Consistent Storybook integration.The new argTypes for
minlengthandmaxlengthare properly configured with text controls and clear Chinese descriptions, making them easily testable in Storybook.packages/core/src/components/Sender/index.vue (1)
17-18: LGTM! Props correctly declared with appropriate defaults.The new
minlengthandmaxlengthprops are properly added withundefineddefaults, maintaining backward compatibility.
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/core/src/components/Sender/index.vue (1)
445-451: Bug: wrong prop name; use:readonly, not:read-only.This prevents the readonly state from being applied to el-input.
:placeholder="placeholder" - :read-only="readOnly || disabled" + :readonly="readOnly || disabled" :disabled="disabled"
🧹 Nitpick comments (5)
packages/core/src/stories/Sender/Sender.stories.ts (2)
27-36: Add control constraints (min/step) and reconsider default max in Storybook.
- Prevent invalid inputs by constraining the number controls.
- Consider not enforcing a 10-char limit by default in the story to avoid implying a component default.
minlength: { - defaultValue: 0, - control: 'number', + defaultValue: 0, + control: { type: 'number', min: 0, step: 1 }, description: '设置输入框的最小输入长度。' }, maxlength: { - defaultValue: 10, - control: 'number', + // Consider undefined here, so the story doesn't imply a default limit: + // defaultValue: undefined, + defaultValue: 10, + control: { type: 'number', min: 0, step: 1 }, description: '设置输入框的最大输入长度。' },
152-153: Story defaults: avoid opinionated length limits unless intentional.If the 10-char cap is only for demo, set to undefined in args and let users toggle via controls.
- minlength: 0, - maxlength: 10, + minlength: 0, + // If only for demo, consider leaving unset to reflect component defaults: + // maxlength: undefined, + maxlength: 10,packages/core/src/components/Sender/index.vue (3)
61-61: Fix lint errors (antfu/if-newline, brace-style) and dedupe branches.
- Expand single-line if-returns to multi-line.
- Split
} else {onto new lines per brace-style.- Remove duplicated
popoverVisible.value = true/falsein the trigger watcher.- if (props.readOnly || props.disabled) return; + if (props.readOnly || props.disabled) { + return; + } ... - if (isComposing.value) return; + if (isComposing.value) { + return; + } ... - if (hasOnTriggerListener.value) { - emits('trigger', { ... , isOpen: true }); - popoverVisible.value = true; - } else { - popoverVisible.value = true; - } + if (hasOnTriggerListener.value) { + emits('trigger', { ... , isOpen: true }); + } + popoverVisible.value = true; ... - if (hasOnTriggerListener.value) { - emits('trigger', { ... , isOpen: false }); - popoverVisible.value = false; - } else { - popoverVisible.value = false; - } + if (hasOnTriggerListener.value) { + emits('trigger', { ... , isOpen: false }); + } + popoverVisible.value = false; ... - if (hasOnTriggerListener.value) { - emits('trigger', { ... , isOpen: true }); - popoverVisible.value = true; - } else { - popoverVisible.value = true; - } + if (hasOnTriggerListener.value) { + emits('trigger', { ... , isOpen: true }); + } + popoverVisible.value = true; ... - if (props.readOnly) return false; + if (props.readOnly) { + return false; + } ... - if (props.readOnly) return; // 直接返回，不执行后续逻辑 + if (props.readOnly) { + return; // 直接返回，不执行后续逻辑 + }Also applies to: 91-91, 103-103, 122-123, 136-138, 151-153, 172-176, 179-181, 190-195, 221-223, 254-256, 259-262, 266-273, 297-299, 318-323, 320-323
265-300: Use modern key detection;keyCodeis deprecated.Prefer
e.key === 'Enter'for key checks.- if (e.keyCode === 13) { + if (e.key === 'Enter') { e.preventDefault(); if (props.submitType === 'enter') { _isComKeyDown ? _resetSelectionRange() : submit(); } else { _isComKeyDown ? submit() : _resetSelectionRange(); } }
170-181: Nit: renamevisiableHeader->visibleHeader.Minor readability improvement.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/core/src/components/Sender/index.vue(14 hunks)packages/core/src/stories/Sender/Sender.stories.ts(2 hunks)
🧰 Additional context used
🪛 ESLint
packages/core/src/components/Sender/index.vue
[error] 61-61: Expect newline after if
(antfu/if-newline)
[error] 91-91: Expect newline after if
(antfu/if-newline)
[error] 103-103: Expect newline after if
(antfu/if-newline)
[error] 122-122: Closing curly brace appears on the same line as the subsequent block.
(style/brace-style)
[error] 136-136: Closing curly brace appears on the same line as the subsequent block.
(style/brace-style)
[error] 151-151: Closing curly brace appears on the same line as the subsequent block.
(style/brace-style)
[error] 172-172: Expect newline after if
(antfu/if-newline)
[error] 174-174: Expect newline after if
(antfu/if-newline)
[error] 179-179: Expect newline after if
(antfu/if-newline)
[error] 180-180: Expect newline after if
(antfu/if-newline)
[error] 190-190: Expect newline after if
(antfu/if-newline)
[error] 221-221: Closing curly brace appears on the same line as the subsequent block.
(style/brace-style)
[error] 254-254: Expect newline after if
(antfu/if-newline)
[error] 259-259: Expect newline after if
(antfu/if-newline)
[error] 266-266: Expect newline after if
(antfu/if-newline)
[error] 297-297: Closing curly brace appears on the same line as the subsequent block.
(style/brace-style)
[error] 318-318: Closing curly brace appears on the same line as the subsequent block.
(style/brace-style)
[error] 320-320: Closing curly brace appears on the same line as the subsequent block.
(style/brace-style)
🔇 Additional comments (3)
packages/core/src/components/Sender/index.vue (3)
17-18: LGTM: new props wired with sensible defaults.
minlength/maxlengthdefault toundefined, matching Element Plus API types.
445-447: LGTM: passthrough ofminlength/maxlengthto el-input.These props are officially supported by Element Plus Input for text/textarea and enforce native limits.
References: Element Plus Input docs list both props. (element-plus.org)
445-447: Confirm Element Plus compatibility (minlength/maxlength on textarea)File: packages/core/src/components/Sender/index.vue Lines: 445-447
:minlength="minlength" :maxlength="maxlength" :validate-event="false"Script returned no output — unable to verify vendored node_modules/element-plus. Confirm Element Plus version in package.json or lockfile and that the Input/Textarea component for that version supports minlength/maxlength. Run the verification script locally and attach its output if uncertain.
1 participant
closed #263
Summary by CodeRabbit
New Features
Documentation
Refactor
Style