Conversation
WalkthroughThis update introduces a comprehensive VitePress-based documentation site for the TinySearchBox Vue3 component. It adds new documentation files, example demos, site configuration, and styling. The update also standardizes component usage in all Vue example files, removes outdated documentation, and refines code formatting and dependencies in related packages. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant VitePress Docs Site
participant TinySearchBox Component
participant DemoPreview
User->>VitePress Docs Site: Navigates to documentation
VitePress Docs Site->>TinySearchBox Component: Loads example usage (via <tiny-search-box>)
VitePress Docs Site->>DemoPreview: Loads demo preview component
User->>TinySearchBox Component: Interacts with search box (e.g., input, select)
TinySearchBox Component-->>User: Emits events (change, search, exceed, etc.)
VitePress Docs Site-->>User: Displays API, usage, and example documentation
Poem
✨ Finishing Touches
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.
Actionable comments posted: 6
🧹 Nitpick comments (23)
packages/docs/search-box/editable.vue (1)
3-3: Unnecessary blank lineThere's an empty line left after removing the import statement. Consider removing this blank line for better code consistency.
1 <script setup lang="ts"> 2 import { reactive, ref } from 'vue' -3 4 import { data } from './editable-data'packages/docs/search-box/empty-placeholder.vue (1)
3-3: Unnecessary blank lineThere's an empty line left after removing the import statement. Consider removing this blank line for better code consistency.
1 <script setup lang="ts"> 2 import { ref } from 'vue' -3 4 import { data } from './editable-data'packages/docs/examples/editable.md (1)
3-3: Add closing parenthesis and punctuation to note.On line 3 the parenthetical note is missing a closing bracket and terminal punctuation, which may confuse readers.
Apply this diff:- 标签支持可编辑功能，通过 editable 打开编辑功能，（注：map 类型不支持编辑 + 标签支持可编辑功能，通过 `editable` 打开编辑功能（注：map 类型不支持编辑）。packages/docs/examples/potential-match.md (1)
3-3: Format configuration option as code and add punctuation.Line 3 should wrap the property name in backticks and end with a period for clarity.
Apply this diff:- 通过 potential-options 配置潜在匹配项 + 通过 `potential-options` 配置潜在匹配项。packages/docs/examples/item-placeholder.md (1)
3-3: Format item properties and terminate sentence properly.Wrap property names in backticks and add a period at the end for consistency and readability.
Apply this diff:- 通过 item.placeholder 设置占位文本，item.editAttrDisabled 设置编辑状态下此属性类型不可切换 + 通过 `item.placeholder` 设置占位文本，并通过 `item.editAttrDisabled` 禁用编辑状态下的属性类型切换。packages/docs/examples/max-length.md (1)
3-3: Enhance clarity: format code and adjust sentence structure.Wrap
maxlengthandexceedin backticks, simplify wording, and add punctuation.
Apply this diff:- 通过 maxlength 原生属性限制输入不超过 8 个字符长度，配合 exceed 监听输入超出限定长度的事件 + 通过原生 `maxlength` 属性限制输入不超过 8 个字符，并通过 `exceed` 事件监听超限情况。packages/docs/examples/basic-usage.md (1)
3-5: Remove empty attributes and format code for consistency.The preview directive should omit unnecessary empty attributes, and the
itemsproperty should be wrapped in backticks.
Apply this diff:- 通过 items 配置搜索数据项 - <preview path="../search-box/basic-usage.vue" title="" description=""></preview> + 通过 `items` 配置搜索数据项。 + <preview path="../search-box/basic-usage.vue"></preview>packages/docs/examples/group-key.md (1)
1-5: Consider expanding the documentation with examples.While the documentation briefly explains the purpose of
item.groupKey, it would be more helpful to include:
- Code examples showing how to set the
groupKeyproperty- Visual representation of the grouping effect
- Any limitations or advanced usage scenarios
This would make the API documentation more comprehensive for developers.
packages/docs/examples/split-input-value.md (1)
1-5: Enhance with more comprehensive examples.The documentation provides basic information about the
split-input-valuefeature, but could be improved by adding:
- A code snippet showing the property in use
- Examples of input before and after splitting
- Use cases where this feature is particularly valuable
These additions would make the documentation more complete and useful for developers integrating the component.
packages/docs/examples/default-field.md (1)
1-5: Documentation is clear but could be more detailed.The explanation of the
default-fieldconfiguration is concise but relatively minimal. While it explains the basic purpose (configuring search by available regions), it could benefit from:
- A brief explanation of what a default search field is
- How it affects the user experience
- Any specific values or formats expected for this property
The current documentation is functional but could be enhanced for better clarity.
Consider expanding the explanation with more details about how
default-fieldworks and its impact on search behavior.packages/docs/search-box/max-length.vue (1)
1-26: Consider adding comments to explain key concepts.While the example is clear and focused, it would benefit from comments explaining:
- The purpose of the
maxlengthprop- What the
exceedevent does and when it fires- How the console log in
handleExceedwould be replaced with real error handling in production codeThis would enhance the educational value of the example.
<script setup lang="ts"> import { ref } from 'vue' const tags = ref([]) const maxlength = ref(8) + // Define data source with a field that demonstrates maxlength constraint const dataSource = [ { label: '名称', field: 'testName', replace: true, options: [ { label: `不能超过${maxlength.value}个字符` } ] } ] + // Handler for the exceed event that fires when input exceeds maxlength const handleExceed = (number) => { console.log(`不能超过${number}个字符`) + // In a real application, you might want to show a user-friendly error message } </script> <template> <tiny-search-box v-model="tags" :items="dataSource" :maxlength="maxlength" @exceed="handleExceed" /> </template>packages/docs/examples/auto-match.md (1)
1-5: Fix attribute syntax in documentationThe documentation contains a minor syntax issue. In Vue templates, boolean attributes should have quotes around their values.
-内置自动匹配功能，通过 :show-no-data-tip=false 隐藏面板的无数据提示，通过 search 监听搜索事件，change 监听搜索值变化事件 +内置自动匹配功能，通过 :show-no-data-tip="false" 隐藏面板的无数据提示，通过 search 监听搜索事件，change 监听搜索值变化事件Otherwise, the documentation is well-structured and provides a clear explanation of the auto-match feature with a working example.
packages/docs/apis/events.md (1)
1-9: LGTM! Well-structured event documentationThe event documentation is comprehensive and well-organized. It clearly describes each event, its type signature, and when it's triggered. The links to type definitions provide good reference for developers.
Consider adding English translations alongside the Chinese descriptions if the component will be used by an international audience. This would make the documentation more accessible to non-Chinese speaking developers.
packages/docs/usage.md (1)
25-31: Specify fenced code block language and fix inconsistent backticks.The code fences around the import snippet use four backticks and lack a language identifier, which triggers markdownlint errors. Replace the four-backtick fences with triple backticks and specify the language (or remove the empty fence if it was unintended).
Apply this diff:
- ```` + ```javascript import TinySearchBox from '@opentiny/vue-search-box'; - ```` + ```🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
25-25: Fenced code blocks should have a language specified
null(MD040, fenced-code-language)
packages/docs/index.md (1)
19-19: Fix typo: “lable” → “label”.In the feature description on line 19, correct the spelling:
- 仅需要一个输入框便可替代传统lable+input形式 + 仅需要一个输入框便可替代传统 label + input 形式packages/docs/search-box/webdoc/search-box.js (1)
11-233: Improvedescformatting and consistency.Across all demos, the
descstrings include extra leading/trailing spaces and inconsistent spacing around code terms (e.g.,items,panel-max-height). To enhance readability and maintainability:
- Trim whitespace at the start/end of each description.
- Wrap code identifiers in backticks (
`items`).- Remove duplicate spaces around punctuation.
packages/docs/apis/props.md (1)
5-5: Fix punctuation indefault-fielddescription.There's a misplaced full stop before “则”. Change it to a comma for proper flow:
- | default-field | string | -- | 自定义按下 enter 键时，默认搜索的范围；此属性为空时。则默认在关键字范围下搜索 xxx，即生成的搜索标签为“关键字：xxx” | + | default-field | string | -- | 自定义按下 enter 键时，默认搜索的范围；此属性为空时，则默认在关键字范围下搜索 xxx，即生成的搜索标签为“关键字：xxx” |packages/docs/.vitepress/config.mts (3)
6-6: Fix typo in the reference comment.
The URL comment contains an unintended space (site-co nfig). It should readsite-config.
14-16: Remove redundantnoExternalentry.
The literal'@opentiny/vue-search-box'is covered by the regex/@opentiny\//, so you can simplify this list to avoid duplication:ssr: { - noExternal: [/@opentiny\//, '@opentiny/vue-search-box'] + noExternal: [/@opentiny\//] }
34-70: Sidebar is comprehensive but manually maintained.
As the list of examples grows, you might reduce maintenance by generating the sidebar entries automatically (e.g., with a plugin likevitepress-plugin-auto-sidebar) instead of hard-coding every item.packages/docs/apis/types.md (3)
20-20: MakeeditAttrDisabledoptional for consistency.
All other properties inISearchBoxItemare optional; consider changing to:- editAttrDisabled: boolean; + editAttrDisabled?: boolean;
21-23: Usestring[]for array types.
For readability and idiomatic TypeScript, preferstring[]overArray<string>:- searchKeys?: Array<string>; - operators?: Array<string>; + searchKeys?: string[]; + operators?: string[];
5-5: Use TypeScript code blocks for type definitions.
Replace the language identifiers withtsortypescriptfor proper syntax highlighting when documenting interfaces:- ```js + ```tsAlso applies to: 44-44, 61-61
🛑 Comments failed to post (6)
packages/docs/examples/custom-panel.md (1)
5-5: 💡 Verification agent
🧩 Analysis chain
Verify the preview component path is correct.
The preview component references
../search-box/basic-usage.vue. Please ensure this path is correct and that the referenced component actually demonstrates the custom panel feature described in this documentation.
🏁 Script executed:
#!/bin/bash # Check if the referenced Vue file exists and contains custom panel implementation ls -la packages/docs/search-box/basic-usage.vue grep -A 20 "custom" packages/docs/search-box/basic-usage.vueLength of output: 199
🏁 Script executed:
#!/bin/bash # Display the contents of the referenced Vue example to verify it demonstrates the custom panel feature cat packages/docs/search-box/basic-usage.vueLength of output: 253
Update preview to the custom‐panel example
The current preview at../search-box/basic-usage.vueonly shows the default<tiny-search-box>usage and doesn’t include any custom panel logic. Please point this to the example that demonstrates adding a custom panel (or add that example if it’s missing).– packages/docs/examples/custom-panel.md (line 5)
- <preview path="../search-box/basic-usage.vue" ></preview> + <preview path="../custom-panel/basic-usage.vue" ></preview>📝 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.<preview path="../custom-panel/basic-usage.vue" ></preview>🤖 Prompt for AI Agents (early access)
In packages/docs/examples/custom-panel.md at line 5, the preview component path points to ../search-box/basic-usage.vue, which only shows default usage without custom panel logic. Update the preview path to reference the example file that demonstrates the custom panel feature, or create and link to a new example that includes the custom panel implementation.packages/docs/.vitepress/theme/index.ts (1)
1-1:
⚠️ Potential issueFix incorrect import path
The import is referencing a file from a
.historydirectory with a timestamp, which appears to be an editor/VCS history file rather than the actual module.-import { use } from './../../../../.history/packages/search-box/src/index_20250428162116' +import { use } from '@opentiny/vue-search-box' // or the correct module pathThis could cause issues in production as it's importing from a specific timestamped backup rather than the actual module.
🤖 Prompt for AI Agents (early access)
In packages/docs/.vitepress/theme/index.ts at line 1, the import path incorrectly points to a .history directory with a timestamped backup file. Replace this import path with the correct path to the actual source module in the search-box package, ensuring it does not reference any .history or backup directories to avoid production issues.packages/docs/search-box/webdoc/search-box.js (1)
110-112:
⚠️ Potential issueMissing English description for
group-key.The
en-USfield for thegroup-keydemo is empty. Please provide an English translation so that the demo description appears correctly in both locales.🤖 Prompt for AI Agents (early access)
In packages/docs/search-box/webdoc/search-box.js around lines 110 to 112, the 'en-US' field for the 'group-key' demo description is currently empty. Add a clear and concise English translation for the description to ensure the demo displays correctly in English locale, matching the intent of the Chinese description.packages/docs/.vitepress/config.mts (1)
5-5:
⚠️ Potential issueIncorrect usage of
loadEnvarguments.
loadEnvexpects the Vite mode (e.g.,"development"or"production") as its first parameter, not theVITE_BASE_URLvalue. Passingprocess.env.VITE_BASE_URLhere will prevent proper loading of environment variables.Use the runtime mode (e.g.,
process.env.NODE_ENV) forloadEnv, for example:- const env = loadEnv(process.env.VITE_BASE_URL!, fileURLToPath(new URL('../', import.meta.url))) + const env = loadEnv(process.env.NODE_ENV || 'production', fileURLToPath(new URL('../', import.meta.url)))📝 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.- const env = loadEnv(process.env.VITE_BASE_URL!, fileURLToPath(new URL('../', import.meta.url))) + const env = loadEnv(process.env.NODE_ENV || 'production', fileURLToPath(new URL('../', import.meta.url)))🤖 Prompt for AI Agents (early access)
In packages/docs/.vitepress/config.mts at line 5, the loadEnv function is incorrectly called with process.env.VITE_BASE_URL as the first argument, but it expects the Vite mode string like "development" or "production". Replace process.env.VITE_BASE_URL with the current runtime mode, such as process.env.NODE_ENV or another appropriate mode variable, to ensure environment variables load correctly.packages/docs/apis/types.md (2)
31-40:
⚠️ Potential issueDuplicate
ISearchBoxTagTypedefinitions.
You’ve declared the same union type twice (afterISearchBoxItemandISearchBoxTag), and the variants differ ('custom'is present in one but missing in the other). Consolidate into a single alias to avoid conflicts and ensure all variants are covered.Also applies to: 56-57
🤖 Prompt for AI Agents (early access)
In packages/docs/apis/types.md around lines 31 to 40 and also lines 56 to 57, there are duplicate definitions of the ISearchBoxTagType union type with differing variants. To fix this, remove the redundant duplicate definition and consolidate all variants, including 'custom', into a single ISearchBoxTagType alias. Ensure this unified type is used consistently wherever referenced to avoid conflicts.
10-10:
⚠️ Potential issueMissing definition for
ISearchBoxOption.
The propertyoptions?: ISearchBoxOption[]referencesISearchBoxOption, but that type isn’t defined or imported in this file. This will break the API documentation and type checking.Add a declaration for
ISearchBoxOptionhere or import it from the appropriate module.🤖 Prompt for AI Agents (early access)
In packages/docs/apis/types.md at line 10, the type ISearchBoxOption used in the options property is not defined or imported, causing type errors and broken documentation. Fix this by either adding a proper declaration for ISearchBoxOption in this file or importing it from the correct module where it is defined, ensuring the type is recognized and the documentation builds correctly.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
packages/docs/usage.md (2)
1-4: Consider adding VitePress frontmatter.This file lacks a YAML frontmatter block, which VitePress uses for page metadata (title, sidebar configuration, etc.). Adding something like the following at the top will improve navigation and SEO:
--- title: 使用指南 sidebarDepth: 2 ---
106-107: Localize the acknowledgment sentence.The line
Thanks goes to these wonderful peopleis in English, while the rest of the document is Chinese. For consistency, translate it, e.g.:感谢以下贡献者
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
packages/docs/TinySearchBox.pngis excluded by!**/*.pngpackages/docs/public/favicon.icois excluded by!**/*.icopackages/docs/public/logo.pngis excluded by!**/*.pngpackages/docs/public/logo.svgis excluded by!**/*.svg
📒 Files selected for processing (53)
package.json(1 hunks)packages/docs/.env.v3(1 hunks)packages/docs/.vitepress/config.mts(1 hunks)packages/docs/.vitepress/theme/index.less(1 hunks)packages/docs/.vitepress/theme/index.ts(1 hunks)packages/docs/apis/events.md(1 hunks)packages/docs/apis/props.md(1 hunks)packages/docs/apis/types.md(1 hunks)packages/docs/examples/auto-match.md(1 hunks)packages/docs/examples/basic-usage.md(1 hunks)packages/docs/examples/custom-panel.md(1 hunks)packages/docs/examples/default-field.md(1 hunks)packages/docs/examples/editable.md(1 hunks)packages/docs/examples/empty-placeholder.md(1 hunks)packages/docs/examples/events.md(1 hunks)packages/docs/examples/group-key.md(1 hunks)packages/docs/examples/help.md(1 hunks)packages/docs/examples/id-map-key.md(1 hunks)packages/docs/examples/item-placeholder.md(1 hunks)packages/docs/examples/max-length.md(1 hunks)packages/docs/examples/max-time-length.md(1 hunks)packages/docs/examples/merge-tag.md(1 hunks)packages/docs/examples/panel-max-height.md(1 hunks)packages/docs/examples/potential-match.md(1 hunks)packages/docs/examples/split-input-value.md(1 hunks)packages/docs/examples/v-model.md(1 hunks)packages/docs/index.md(1 hunks)packages/docs/package.json(1 hunks)packages/docs/search-box/auto-match.vue(2 hunks)packages/docs/search-box/basic-usage.vue(1 hunks)packages/docs/search-box/custom-panel.vue(3 hunks)packages/docs/search-box/default-field.spec.ts(1 hunks)packages/docs/search-box/default-field.vue(1 hunks)packages/docs/search-box/editable.vue(2 hunks)packages/docs/search-box/empty-placeholder.vue(1 hunks)packages/docs/search-box/events.vue(1 hunks)packages/docs/search-box/group-key.vue(1 hunks)packages/docs/search-box/help.vue(2 hunks)packages/docs/search-box/id-map-key.vue(1 hunks)packages/docs/search-box/item-placeholder.vue(1 hunks)packages/docs/search-box/max-length.vue(1 hunks)packages/docs/search-box/max-time-length.vue(1 hunks)packages/docs/search-box/merge-tag.vue(1 hunks)packages/docs/search-box/panel-max-height.vue(2 hunks)packages/docs/search-box/potential-match.vue(2 hunks)packages/docs/search-box/split-input-value.vue(2 hunks)packages/docs/search-box/v-model.vue(2 hunks)packages/docs/search-box/webdoc/search-box.cn.md(0 hunks)packages/docs/search-box/webdoc/search-box.en.md(0 hunks)packages/docs/search-box/webdoc/search-box.js(17 hunks)packages/docs/usage.md(1 hunks)packages/search-box/package.json(0 hunks)packages/search-box/vite.config.ts(3 hunks)
💤 Files with no reviewable changes (3)
- packages/search-box/package.json
- packages/docs/search-box/webdoc/search-box.cn.md
- packages/docs/search-box/webdoc/search-box.en.md
✅ Files skipped from review due to trivial changes (11)
- packages/docs/examples/max-time-length.md
- packages/docs/search-box/split-input-value.vue
- packages/docs/search-box/auto-match.vue
- packages/docs/search-box/merge-tag.vue
- packages/docs/search-box/v-model.vue
- packages/docs/search-box/group-key.vue
- packages/docs/examples/help.md
- packages/docs/search-box/editable.vue
- packages/docs/search-box/default-field.vue
- package.json
- packages/docs/search-box/max-time-length.vue
🚧 Files skipped from review as they are similar to previous changes (38)
- packages/docs/examples/panel-max-height.md
- packages/docs/search-box/default-field.spec.ts
- packages/docs/search-box/item-placeholder.vue
- packages/docs/examples/events.md
- packages/docs/search-box/empty-placeholder.vue
- packages/docs/search-box/id-map-key.vue
- packages/docs/.env.v3
- packages/docs/examples/v-model.md
- packages/search-box/vite.config.ts
- packages/docs/examples/editable.md
- packages/docs/examples/item-placeholder.md
- packages/docs/examples/merge-tag.md
- packages/docs/examples/max-length.md
- packages/docs/search-box/potential-match.vue
- packages/docs/search-box/events.vue
- packages/docs/examples/split-input-value.md
- packages/docs/search-box/panel-max-height.vue
- packages/docs/search-box/basic-usage.vue
- packages/docs/examples/potential-match.md
- packages/docs/.vitepress/theme/index.less
- packages/docs/examples/empty-placeholder.md
- packages/docs/examples/group-key.md
- packages/docs/examples/default-field.md
- packages/docs/examples/auto-match.md
- packages/docs/examples/id-map-key.md
- packages/docs/search-box/max-length.vue
- packages/docs/examples/custom-panel.md
- packages/docs/search-box/help.vue
- packages/docs/.vitepress/theme/index.ts
- packages/docs/search-box/custom-panel.vue
- packages/docs/index.md
- packages/docs/apis/events.md
- packages/docs/apis/props.md
- packages/docs/package.json
- packages/docs/search-box/webdoc/search-box.js
- packages/docs/.vitepress/config.mts
- packages/docs/apis/types.md
- packages/docs/examples/basic-usage.md
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
packages/docs/usage.md
25-25: Fenced code blocks should have a language specified
null
(MD040, fenced-code-language)
🔇 Additional comments (3)
packages/docs/usage.md (3)
21-23: Installation snippet is properly highlighted.Using ```shell for the
npm icommand is correct and will render with shell syntax highlighting in VitePress.
108-120: Contributor table markup is correct.The ALL-CONTRIBUTORS table is properly embedded with the required markers and HTML structure. It will render as expected.
15-16:Details
✅ Verification successful
Verify the image asset path.
The line
assumes the image is in the same directory or a public assets folder. Please confirm thatTinySearchBox.pngexists underpackages/docs(orpackages/docs/public) so it resolves correctly in the built site:
🏁 Script executed:
#!/bin/bash # Check for TinySearchBox.png in the docs folder fd TinySearchBox.png packages/docsLength of output: 68
Asset path verified
The image
TinySearchBox.pngis present atpackages/docs/TinySearchBox.png, so the relative link inpackages/docs/usage.mdis correct and no changes are needed.
| ```` | ||
|
|
||
| 导入 TinySearchBox 综合搜索： | ||
|
|
||
| ```javascript | ||
| import TinySearchBox from '@opentiny/vue-search-box'; | ||
| ```` |
There was a problem hiding this comment.
Fix the JavaScript import code fence.
The current nested backticks (\``inside a````block) will break rendering. Replace with a single triple-backticks block specifyingjavascript`, for example:
- ````
- 导入 TinySearchBox 综合搜索：
-
- ```javascript
- import TinySearchBox from '@opentiny/vue-search-box';
- ````
+ ```javascript
+ // 导入 TinySearchBox 综合搜索组件
+ import TinySearchBox from '@opentiny/vue-search-box';
+ ```This ensures proper syntax highlighting and correct rendering.
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
25-25: Fenced code blocks should have a language specified
null
(MD040, fenced-code-language)
🤖 Prompt for AI Agents (early access)
In packages/docs/usage.md around lines 25 to 31, the JavaScript import code block uses nested backticks which breaks rendering. Replace the current four-backtick fenced block with a standard triple-backtick fenced block specifying "javascript" and remove the extra backtick. Also, add a comment line above the import statement for clarity. This will fix the syntax highlighting and ensure proper markdown rendering.
| ```html | ||
| <script setup> | ||
| const tags = ref([]) | ||
| const items = ref([ |
There was a problem hiding this comment.
Include necessary imports in the <script setup> example.
The demo uses ref and <tiny-search-box> but never imports them. Update the snippet to:
<script setup>
import { ref } from 'vue'
import TinySearchBox from '@opentiny/vue-search-box'
const tags = ref([])
const items = ref([ /* ... */ ])
</script>This makes the example functional out of the box.
🤖 Prompt for AI Agents (early access)
In packages/docs/usage.md around lines 41 to 44, the <script setup> example uses ref and <tiny-search-box> without importing them. Fix this by adding the import statements for ref from 'vue' and TinySearchBox from '@opentiny/vue-search-box' at the top of the <script setup> block to make the example functional.
2 participants
api文档补全
Summary by CodeRabbit
New Features
Documentation
Style
Chores
Refactor
Revert