examples/sites/demos/pc/app/dropdown/visible.spec.ts (3)

3-5: Consider adding more descriptive test title and error handling.

The test title in Chinese may not be accessible to all developers. Also, the error handling could be more specific about the expected errors.

-test('手动控制显隐', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
+test('should control dropdown visibility manually', async ({ page }) => {
+  page.on('pageerror', (exception) => {
+    console.error('Page error:', exception);
+    expect(exception).toBeNull();
+  })

---

7-8: Consider adding timeout for element location.

The locator might fail if the page loads slowly. Consider adding a timeout or wait condition.

-  const wrap = page.locator('#visible')
-  const dropDownMenu = page.locator('body > .tiny-dropdown-menu').locator('visible=true')
+  const wrap = await page.locator('#visible').waitFor({ state: 'attached', timeout: 5000 })
+  const dropDownMenu = await page.locator('body > .tiny-dropdown-menu')
+    .locator('visible=true')
+    .waitFor({ state: 'attached', timeout: 5000 })

---

16-20: Add assertions for menu item interaction.

The test clicks outside and on a menu item but doesn't verify the expected behavior beyond visibility.

Consider adding assertions for:

1. Selected item state
2. Any emitted events
3. Callback execution

examples/sites/demos/pc/app/dropdown/visible.vue (2)

31-48: Consider enhancing options data structure.

The options array could be more maintainable and type-safe.

+interface DropdownOption {
+  label: string;
+  disabled?: boolean;
+  value?: string | number;
+}

 data() {
   return {
     visible: true,
-    options: [
+    options: <DropdownOption[]>[
       {
-        label: '黄金糕'
+        label: '黄金糕',
+        value: 'golden_cake'
       },
       // ... other options
     ]
   }
 }

---

52-54: Add debounce to click handler.

The visibility toggle might need debouncing to prevent rapid state changes.

+import { debounce } from 'lodash-es'

 methods: {
-  handleClick() {
+  handleClick: debounce(function() {
     this.visible = !this.visible
-  }
+  }, 300)
 }

packages/renderless/types/dropdown.type.ts (1)

23-23: Enhance type definitions with documentation.

The new type definitions would benefit from JSDoc comments explaining their purpose and usage.

+/** Array of menu items that can be empty, undefined, or null */
 menuItems: NodeListOf<HTMLElement> | undefined | null | []

+/** Defines how the dropdown is triggered - either by click or hover */
 trigger: 'click' | 'hover'
+/** Indicates if the visible prop is explicitly set as a boolean */
 visibleIsBoolean: boolean

Also applies to: 31-32

examples/sites/demos/pc/app/dropdown/visible-composition-api.vue (4)

24-24: Consider initializing visible state as false.

The initial state is set to true, which means the dropdown will be visible when the component mounts. This might not be the expected default behavior for most use cases.

-const visible = ref(true)
+const visible = ref(false)

---

8-9: Use unique identifiers as keys instead of array indices.

Using array indices as keys can lead to unexpected behavior when the array is modified (items added/removed/reordered).

Consider adding unique IDs to your options:

 const options = [
   {
+    id: 1,
     label: '黄金糕'
   },
   // ... other options with unique IDs
 ]

Then use these IDs as keys:

-v-for="(item, index) in options"
-:key="index"
+v-for="item in options"
+:key="item.id"

---

48-50: Consider using min-height instead of fixed height.

A fixed height might cause content overflow or unnecessary empty space. Using min-height would allow the container to grow based on content while maintaining a minimum size.

 .box {
-  height: 150px;
+  min-height: 150px;
 }

---

3-4: Simplify click handler by leveraging v-model directly.

The current implementation uses a separate click handler to toggle visibility. Since you're using v-model, you can bind the click event directly to toggle the value.

-<div @click="handleClick">点击{{ visible ? '隐藏' : '显示' }}</div>
+<div @click="visible = !visible">点击{{ visible ? '隐藏' : '显示' }}</div>

-const handleClick = () => {
-  visible.value = !visible.value
-}

Also applies to: 42-44

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro