docs(context-menu): update

docs/content/3.components/context-menu.md

@@ -8,20 +8,221 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/ContextMenu.vue
-navigation:
-  badge:
-    label: Todo
 ---
 
 ## Usage
 
+Use anything you like in the default slot of the ContextMenu, and right-click on it to display the menu.
+
+### Items
+
+Use the `items` prop as an array of objects with the following properties:
+
+- `label?: string`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `avatar?: AvatarProps`{lang="ts-type"}
+- `kbds?: string[] | KbdProps[]`{lang="ts-type"}
+- `type?: "link" | "label" | "separator"`{lang="ts-type"}
+- `disabled?: boolean`{lang="ts-type"}
+- `class?: any`{lang="ts-type"}
+- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
+- `select?(e: Event): void`{lang="ts-type"}
+
+You can also pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.
+
+::component-code
+---
+prettier: true
+collapse: true
+ignore:
+  - items
+  - class
+external:
+  - items
+class: 'justify-center'
+props:
+  items:
+    - - label: Appearance
+        children:
+          - label: System
+            icon: i-heroicons-computer-desktop
+          - label: Light
+            icon: i-heroicons-sun
+          - label: Dark
+            icon: i-heroicons-moon
+    - - label: Show Sidebar
+        kbds:
+          - meta
+          - s
+      - label: Show Toolbar
+        kbds:
+          - shift
+          - meta
+          - d
+      - label: Collapse Pinned Tabs
+        disabled: true
+    - - label: Refresh the Page
+      - label: Clear Cookies and Refresh
+      - label: Clear Cache and Refresh
+      - type: separator
+      - label: Developer
+        children:
+          - - label: View Source
+              kbds:
+                - meta
+                - shift
+                - u
+            - label: Developer Tools
+              kbds:
+                - option
+                - meta
+                - i
+            - label: Inspect Elements
+              kbds:
+                - option
+                - meta
+                - c
+          - - label: JavaScript Console
+              kbds:
+                - option
+                - meta
+                - j
+  class: 'w-48'
+slots:
+  default: |
+
+    <div class="flex items-center justify-center rounded-md border border-dashed border-gray-300 dark:border-gray-700 text-sm aspect-video w-72">
+      Right click here
+    </div>
+---
+
+:div{class="flex items-center justify-center rounded-md border border-dashed border-gray-300 dark:border-gray-700 text-sm aspect-video w-72"}[Right click here]
+::
+
+::tip
+Each item can take a `children` array to create a nested menu which can be controlled using the `open`, `defaultOpen` and `content` properties.
+::
+
+### Size
+
+Use the `size` prop to change the size of the ContextMenu.
+
+::component-code
+---
+prettier: true
+ignore:
+  - items
+  - class
+external:
+  - items
+class: 'justify-center'
+props:
+  size: xl
+  items:
+    - label: System
+      icon: i-heroicons-computer-desktop
+    - label: Light
+      icon: i-heroicons-sun
+    - label: Dark
+      icon: i-heroicons-moon
+  class: 'w-48'
+slots:
+  default: |
+
+    <div class="flex items-center justify-center rounded-md border border-dashed border-gray-300 dark:border-gray-700 text-sm aspect-video w-72">
+      Right click here
+    </div>
+---
+
+:div{class="flex items-center justify-center rounded-md border border-dashed border-gray-300 dark:border-gray-700 text-sm aspect-video w-72"}[Right click here]
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the ContextMenu.
+
+::component-code
+---
+prettier: true
+ignore:
+  - items
+  - class
+external:
+  - items
+class: 'justify-center'
+props:
+  disabled: true
+  items:
+    - label: System
+      icon: i-heroicons-computer-desktop
+    - label: Light
+      icon: i-heroicons-sun
+    - label: Dark
+      icon: i-heroicons-moon
+  class: 'w-48'
+slots:
+  default: |
+
+    <div class="flex items-center justify-center rounded-md border border-dashed border-gray-300 dark:border-gray-700 text-sm aspect-video w-72">
+      Right click here
+    </div>
+---
+
+:div{class="flex items-center justify-center rounded-md border border-dashed border-gray-300 dark:border-gray-700 text-sm aspect-video w-72"}[Right click here]
+::
+
 ## Examples
 
+### With custom slot
+
+Use the `slot` property to customize a specific item.
+
+You will have access to the following slots:
+
+- `{{ item.slot }}`{lang="ts-type"}
+- `{{ item.slot }}-leading`{lang="ts-type"}
+- `{{ item.slot }}-label`{lang="ts-type"}
+- `{{ item.slot }}-trailing`{lang="ts-type"}
+
+::component-example
+---
+name: 'context-menu-custom-slot-example'
+class: 'justify-center'
+---
+::
+
+::tip{to="#slots"}
+You can also use the `item`, `item-leading`, `item-label` and `item-trailing` slots to customize all items.
+::
+
 ## API
 
 ### Props
 
-:component-props
+::component-props
+---
+ignore:
+  - as
+  - to
+  - target
+  - active
+  - activeClass
+  - inactiveClass
+  - exactActiveClass
+  - ariaCurrentValue
+  - href
+  - rel
+  - noRel
+  - prefetch
+  - noPrefetch
+  - prefetchedClass
+  - replace
+  - exact
+  - exactQuery
+  - exactHash
+  - external
+---
+::
 
 ### Slots
 

docs/content/3.components/dropdown-menu.md

@@ -33,6 +33,7 @@ You can also pass any property from the [Link](/components/link#props) component
 ::component-code
 ---
 prettier: true
+collapse: true
 ignore:
   - items
   - class
@@ -346,6 +347,7 @@ ignore:
   - as
   - to
   - target
+  - active
   - activeClass
   - inactiveClass
   - exactActiveClass