feat: 增加 input 组件 #13
Conversation
WalkthroughAdds a Vue 3 Input component (props, JSX implementation, SCSS), tests, documentation, a plugin entrypoint (named and default exports with install), theme token updates, and four docs margin utility classes. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant C as CInput
participant S as State
participant E as Events
U->>C: type characters
C->>S: set inputValue
C->>E: emit input / update:modelValue
Note right of C `#D3F9D8`: 'change' may emit on blur/confirm
U->>C: blur / confirm
C->>E: emit change
U->>C: click clear (if clearable)
C->>S: inputValue = ''
C->>E: emit clear / update:modelValue
U->>C: click password toggle (if showPassword)
C->>S: toggle isPasswordVisible
C->>C: re-render input type (text/password)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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: 6
🧹 Nitpick comments (3)
packages/ccui/ui/input/index.ts (1)
1-17: Input entrypoint and plugin wiring look correctNamed export
Inputplus a default meta object withinstallboth register the same component and align with how the tests importInputfrom this entrypoint. Optional: you could delegate the default export’sinstalltoInput.installto avoid duplicating the registration call.packages/ccui/ui/input/test/input.test.ts (1)
14-205: Good coverage; consider adding v-model and prefix/suffix layout testsThe suite does a nice job covering core behaviors (types, size classes, disabled/readonly, clearable, prepend/append, events, password toggle). Two gaps worth adding:
- A test that uses
v-model:value(or the chosen v-model API) to catch regressions in the two‑way binding contract.- A layout‑level test for prefix/suffix/clearable that asserts the correct modifier classes exist on the block and that the inner input gets the expected padding; this would have surfaced the current BEM alignment issue with
input.scss.Otherwise the structure and use of
useNamespacein the tests look good.packages/ccui/ui/input/src/input.tsx (1)
73-81: Unused focus state
isFocusedis set inhandleFocus/handleBlurbut never read anywhere, so it currently has no effect.Either wire it into a focus class (e.g.
ns.is('focused')) or remove it to keep the component lean:- const isFocused = ref(false) @@ - const handleFocus = (e: FocusEvent) => { - isFocused.value = true - emit('focus', e) - } + const handleFocus = (e: FocusEvent) => { + emit('focus', e) + } @@ - const handleBlur = (e: FocusEvent) => { - isFocused.value = false - emit('blur', e) - } + const handleBlur = (e: FocusEvent) => { + emit('blur', e) + }Or, if you plan to add focus styles later, consider adding the corresponding class now so it’s testable.
Also applies to: 88-90
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
packages/ccui/ui/input/index.ts(1 hunks)packages/ccui/ui/input/src/input-types.ts(1 hunks)packages/ccui/ui/input/src/input.scss(1 hunks)packages/ccui/ui/input/src/input.tsx(1 hunks)packages/ccui/ui/input/test/input.test.ts(1 hunks)packages/docs/.vitepress/theme/styles/index.css(1 hunks)packages/docs/components/input/index.md(1 hunks)packages/theme/themes/light.ts(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
packages/ccui/ui/input/src/input.tsx (2)
packages/ccui/ui/input/src/input-types.ts (2)
inputProps(6-47)InputProps(49-49)packages/ccui/ui/shared/hooks/use-namespace.ts (1)
useNamespace(31-47)
packages/ccui/ui/input/test/input.test.ts (2)
packages/ccui/ui/shared/hooks/use-namespace.ts (1)
useNamespace(31-47)packages/ccui/ui/input/src/input-types.ts (1)
InputSize(4-4)
🪛 LanguageTool
packages/docs/components/input/index.md
[grammar] ~227-~227: Ensure spelling is correct
Context: ...emplate> <style> </style> ``` ::: ## Input参数 | 参数 | 类型 | ...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🔇 Additional comments (3)
packages/theme/themes/light.ts (1)
109-109: Token changes align with new Input sizingIncreasing
'border-radius'to4pxand adding'size-sm' | 'size-md' | 'size-lg'tokens is consistent with the new Input SCSS usage and gives a cleaner, more modern look. Just be aware this is a global visual change for any component consuming these tokens.Also applies to: 136-139
packages/docs/.vitepress/theme/styles/index.css (1)
10-24: Spacing utilities are simple and consistentThe
.mt-10/.mb-10/.ml-10/.mr-10helpers are straightforward and already used in the Input docs examples. Looks good.packages/ccui/ui/input/src/input-types.ts (1)
3-49: Input prop typing is clear and matches usage
InputType,InputSize, andinputPropsline up with both the tests and the docs (once event naming is fixed). Defaults (type: 'text',size: 'default', string props defaulting to'') are reasonable for a base input.
| &--large { | ||
| height: $ccui-size-lg; | ||
| font-size: $ccui-font-size-lg; | ||
|
|
||
| &.#{$cls-prefix}-input--prefix { | ||
| .#{$cls-prefix}-input__inner { | ||
| padding-left: 24px; | ||
| } | ||
| } | ||
|
|
||
| &.#{$cls-prefix}-input--suffix, | ||
| &.#{$cls-prefix}-input--clearable { | ||
| .#{$cls-prefix}-input__inner { | ||
| padding-right: 24px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &--default { | ||
| height: $ccui-size-md; | ||
| font-size: $ccui-font-size-md; | ||
|
|
||
| &.#{$cls-prefix}-input--prefix { | ||
| .#{$cls-prefix}-input__inner { | ||
| padding-left: 24px; | ||
| } | ||
| } | ||
|
|
||
| &.#{$cls-prefix}-input--suffix, | ||
| &.#{$cls-prefix}-input--clearable { | ||
| .#{$cls-prefix}-input__inner { | ||
| padding-right: 24px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &--small { | ||
| height: $ccui-size-sm; | ||
| font-size: $ccui-font-size-sm; | ||
|
|
||
| &.#{$cls-prefix}-input--prefix { | ||
| .#{$cls-prefix}-input__inner { | ||
| padding-left: 20px; | ||
| } | ||
| } | ||
|
|
||
| &.#{$cls-prefix}-input--suffix, | ||
| &.#{$cls-prefix}-input--clearable { | ||
| .#{$cls-prefix}-input__inner { | ||
| padding-right: 20px; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Size‑based padding rules expect block modifiers, not element modifiers
The selectors like:
&--large {
...
&.#{$cls-prefix}-input--prefix { ... }
&.#{$cls-prefix}-input--suffix,
&.#{$cls-prefix}-input--clearable { ... }
}compile to .ccui-input--large.ccui-input--prefix .ccui-input__inner { ... } etc., i.e. they assume --prefix/--suffix/--clearable are applied on the block element.
Currently, in input.tsx these modifiers are added to the input element via inputClass, not to the block container, so these padding rules won’t ever match. After you fix the TSX to put these modifiers on the block (see comment in input.tsx), these SCSS rules will start working as intended.
API（modelValue/update:modelValue），并相应地更新了测试和文档，使其完全一致
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/ccui/ui/input/test/input.test.ts (1)
93-204: Consider adding a few edge‑case tests for events and suffix behaviorThe event and interaction tests (input/change/focus/blur, clear, password toggle) are comprehensive. As a next step, you might consider:
- Verifying
update:modelValueviawrapper.emitted()or v-model binding.- Asserting that clear/password icons are not rendered (or are non‑interactive) when
disabled/readonlyis true butclearable/showPasswordis enabled.
These would lock in the newer disabled/readonly semantics and v-model contract.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
packages/ccui/ui/input/src/input-types.ts(1 hunks)packages/ccui/ui/input/src/input.tsx(1 hunks)packages/ccui/ui/input/test/input.test.ts(1 hunks)packages/docs/components/input/index.md(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/ccui/ui/input/src/input-types.ts
🧰 Additional context used
🧬 Code graph analysis (2)
packages/ccui/ui/input/test/input.test.ts (2)
packages/ccui/ui/shared/hooks/use-namespace.ts (1)
useNamespace(31-47)packages/ccui/ui/input/src/input-types.ts (1)
InputSize(4-4)
packages/ccui/ui/input/src/input.tsx (2)
packages/ccui/ui/input/src/input-types.ts (2)
inputProps(6-47)InputProps(49-49)packages/ccui/ui/shared/hooks/use-namespace.ts (1)
useNamespace(31-47)
🪛 LanguageTool
packages/docs/components/input/index.md
[grammar] ~227-~227: Ensure spelling is correct
Context: ...emplate> <style> </style> ``` ::: ## Input参数 | 参数 | 类型 | ...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🔇 Additional comments (4)
packages/ccui/ui/input/test/input.test.ts (1)
1-91: Core rendering and prop behavior tests look solidThe basic presence, type switching, size, placeholder, disabled/readonly, clearable, and prepend/append tests closely track the component API and BEM helpers; I don’t see functional issues here.
packages/ccui/ui/input/src/input.tsx (2)
7-43: Props, v-model wiring, and BEM class structure are consistentUsing
inputProps+InputProps,update:modelValue+inputemissions, and thegetBaseClass/getWrapperClass/inputClasscomputations lines up well with the documented API and SCSS BEM structure. Block‑level modifiers for size/disabled/readonly/clearable/prefix/suffix are now correctly applied on the outer container while the inner input sticks to element + state classes, which should keep both styles and tests happy.Also applies to: 45-58
87-101: Clear / password toggle / suffix rendering logic behaves correctly
clearInputandtogglePasswordVisiblecooperate withcurrentTypeandshowPasswordVisibleas expected, andrenderSuffixIconscorrectly:
- Disables clear/password toggle when
disabledorreadonlyis true.- Still renders the suffix slot when provided.
Combined withgetInputAttrsand the final render tree, this gives the right DOM and behavior for clearable/password inputs without leaking interactivity into disabled/readonly states.Also applies to: 124-147, 149-167, 177-202
packages/docs/components/input/index.md (1)
15-37: Docs now match the actual Input API (v-model, props, events, slots)The demos’
v-modelusage, the props table (modelValue,show-password,clearable, sizes), the event table (update:modelValue, input/change/focus/blur/clear), and the slots list (prepend/append/prefix/suffix) are all aligned with the current component implementation and tests. This should make the docs reliably executable for consumers.Also applies to: 29-33, 63-69, 139-191, 227-266
添加Input组件
描述
此PR添加了Input组件的初版实现，为UI库提供了基础的输入框功能。
变更内容
文件变更
packages/ccui/ui/input/index.ts- Input组件入口文件packages/ccui/ui/input/src/input-types.ts- Input组件类型定义packages/ccui/ui/input/src/input.scss- Input组件样式packages/ccui/ui/input/src/input.tsx- Input组件主要实现packages/ccui/ui/input/test/input.test.ts- Input组件单元测试packages/docs/components/input/index.md- Input组件文档测试
Summary by CodeRabbit
New Features
Documentation
Style
Tests