feat: add size #18
feat: add size #18
Conversation
WalkthroughAdds a size prop to TinySearchBox with a new "small" variant, propagating to nested components and styles via classes and CSS variables. Updates types, Less variables, and styles. Adds docs: sidebar entry, example page, and a Vue demo showcasing default vs small sizes. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant A as App Page
participant SB as TinySearchBox
participant Sub as TinyTag/TinyForm/TinyDropdown
participant CSS as CSS Vars & Classes
U->>A: Open Size example
A->>SB: Render with v-model, items (size="")
SB->>CSS: Apply default classes/vars
SB->>Sub: Render children (no size)
Note over SB,Sub: Default size flow
U->>A: View second instance (size="small")
A->>SB: Render with size="small"
SB->>CSS: Add class tvp-search-box--small
SB->>Sub: Pass size="small"
CSS-->>SB: Small variant styles (min-height, padding, tag font)
Note over SB,CSS: Small-specific variables and offsets
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
✨ 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. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![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 (12)
packages/docs/examples/size.md (1)
1-5: Clarify allowed values, default, and show a quick usage snippetMake the accepted values and default explicit to reduce ambiguity, and add a tiny example for discoverability.
## 尺寸 -通过 size 属性可以设置尺寸。 +通过 size 属性可以设置尺寸，支持：''（默认）和 'small'。 + +示例： +```vue +<TinySearchBox /> +<TinySearchBox size="small" /> +``` <preview path="../search-box/size.vue"></preview>Also consider adding size 到 “API > props” 页面以保持文档一致性。
packages/search-box/src/index.type.ts (1)
194-195: Document the default and centralize allowed valuesType is fine, but an empty-string literal is easy to mistype. Document the default, and optionally expose a canonical list to reuse in docs/validators.
-// SearchBox 尺寸 -export type ISearchBoxSize = '' | 'small' +/** SearchBox 尺寸（默认：''；可选：'' | 'small'） */ +export type ISearchBoxSize = '' | 'small' + +// 可选：导出枚举式列表，便于复用（校验、文档展示等） +export const SEARCH_BOX_SIZES = ['' as const, 'small' as const] +export type ISearchBoxSizeEnum = typeof SEARCH_BOX_SIZES[number]If you prefer explicitness, consider 'default' | 'small' in a future minor; for now this keeps backwards compatibility.
packages/search-box/src/vars.less (1)
30-30: Add comments for new small-size variablesMinor readability: add comments matching the surrounding style so themers know what each small-* var controls.
- --tvp-SearchBox-small-min-height: var(--tv-size-height-sm, 28px); + // 小号输入框最小高度 + --tvp-SearchBox-small-min-height: var(--tv-size-height-sm, 28px); @@ - --tvp-SearchBox-small-padding-left: var(--tv-size-height-sm, 28px); + // 小号输入框左内边距（为前缀图标留位） + --tvp-SearchBox-small-padding-left: var(--tv-size-height-sm, 28px); @@ - --tvp-SearchBox-small-tag-font-size: var(--tv-font-size-sm, 12px); + // 小号标签字号 + --tvp-SearchBox-small-tag-font-size: var(--tv-font-size-sm, 12px);Also applies to: 33-33, 54-54
packages/search-box/src/index.less (1)
420-437: Small variant styles look consistent; remove stray blank line and consider avoiding magic numbersThe overrides read well and map to the new vars. Two tiny nits:
- Remove the extra blank line (Line 429).
- Optional: extract the 10px/12px prefix left offsets to a var to avoid magic numbers across sizes.
&--small { min-height: var(--tvp-SearchBox-small-min-height); padding-left: var(--tvp-SearchBox-small-padding-left); & > .@{search-box-prefix-cls}__prefix { top: calc((var(--tvp-SearchBox-small-min-height) - var(--tvp-SearchBox-left-icon-font-size)) / 2 - 1px); left: 10px; } - .@{search-box-prefix-cls}__prop { font-size: var(--tvp-SearchBox-small-tag-font-size); span { padding-left: 8px; } } }packages/docs/search-box/size.vue (2)
5-5: Type the ref to avoidRef<never[]>inference.TS infers
ref([])asRef<never[]>, which can cause assignment/type issues.Apply this diff:
-const tags = ref([]) +const tags = ref<any[]>([])
8-14: Consider separating models for clearer demo.Using the same
v-modelfor both boxes makes them mirror each other; independent refs better showcase size-only differences.packages/search-box/src/index.vue (6)
94-98: Validate incomingsizeat runtime.Adds a guard to prevent unsupported values from slipping in.
Apply this diff:
// 尺寸 size: { type: String as PropType<ISearchBoxSize>, - default: '' + default: '', + validator: (v: ISearchBoxSize) => v === '' || v === 'small' }
320-323: Prefer object syntax for class binding to avoid empty strings.Cleaner and avoids rendering a blank class token.
Apply this diff:
- <div - :class="['tvp-search-box', size === 'small' ? 'tvp-search-box--small' : '']" + <div + :class="['tvp-search-box', { 'tvp-search-box--small': size === 'small' }]" @click.stop="showPopover(state, false)" >
329-329: Don’t pass empty string to childsizeprops.Use
undefinedwhen default to avoid invalid/unknown-size warnings downstream.Apply this diff:
- :size="size === 'small' ? 'small' : ''" + :size="size || undefined"
344-344: Same here: let the prop be omitted when default.Apply this diff:
- :size="size === 'small' ? 'small' : ''" + :size="size || undefined"
362-362: Same here for dropdown size propagation.Apply this diff:
- :size="size === 'small' ? 'small' : ''" + :size="size || undefined"
319-641: Optional: centralize size logic to reduce repetition.Create a computed
childSizeonce and reuse.Apply this diff (snippet):
// script +const childSize = computed(() => (props.size ? 'small' : undefined)) // template (examples) -:size="size || undefined" +:size="childSize"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (7)
packages/docs/.vitepress/config.mts(1 hunks)packages/docs/examples/size.md(1 hunks)packages/docs/search-box/size.vue(1 hunks)packages/search-box/src/index.less(1 hunks)packages/search-box/src/index.type.ts(1 hunks)packages/search-box/src/index.vue(5 hunks)packages/search-box/src/vars.less(2 hunks)
🔇 Additional comments (4)
packages/docs/.vitepress/config.mts (1)
60-60: Docs nav entry looks goodSidebar item “尺寸” correctly links to /examples/size and matches the new page.
packages/search-box/src/index.less (1)
420-427: Confirmed small variant class on root —index.vuebindstvp-search-box--smallon the root element whensize === 'small', so the CSS plumbing is correct.packages/search-box/src/index.vue (2)
29-33: LGTM on type import wiring.Imports the new
ISearchBoxSizecleanly; aligns with the added prop.
320-641: Verify small size propagation to child inputs/selects.
Ensure that passingsize="small"to<tiny-form>correctly sets the height on inner<tiny-input>and<tiny-select>; if it doesn’t, add:size="childSize"to those components.
| <template> | ||
| <ClientOnly> | ||
| <tiny-search-box v-model="tags" :items="dataSource" /> | ||
| size="small" |
There was a problem hiding this comment.
Remove stray text node: it renders literally on the page.
The standalone size="small" between components becomes visible text in docs.
Apply this diff:
<ClientOnly>
<tiny-search-box v-model="tags" :items="dataSource" />
- size="small"
<tiny-search-box v-model="tags" :items="dataSource" size="small" />
</ClientOnly>📝 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.
| size="small" | |
| <ClientOnly> | |
| <tiny-search-box v-model="tags" :items="dataSource" /> | |
| <tiny-search-box v-model="tags" :items="dataSource" size="small" /> | |
| </ClientOnly> |
🤖 Prompt for AI Agents
In packages/docs/search-box/size.vue around line 11 there is a stray text node
`size="small"` that renders literally on the page; remove this standalone text
node and either delete it entirely or move it into the appropriate component as
an attribute/prop (i.e., attach size="small" to the intended component tag) so
it is not rendered as plain text.
|
@liangguanhui0117 感谢你的贡献，可以加上 small medium large 三个尺寸，参考 Input 等组件的效果设定具体宽高和间距 |
@liangguanhui0117 Thank you for your contribution, you can add three sizes of small medium large, refer to the effect of Input and other components to set the specific width, height and spacing |
#16
Summary by CodeRabbit
New Features
Documentation