docs(context-menu): update

docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const loading = ref(true)
+
+const items = [{
+  label: 'Refresh the Page',
+  slot: 'refresh'
+}, {
+  label: 'Clear Cookies and Refresh'
+}, {
+  label: 'Clear Cache and Refresh'
+}]
+</script>
+
+<template>
+  <UContextMenu :items="items" class="w-48">
+    <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>
+
+    <template #refresh-label>
+      {{ loading ? 'Refreshing...' : 'Refresh the Page' }}
+    </template>
+
+    <template #refresh-trailing>
+      <UIcon v-if="loading" name="i-heroicons-arrow-path-20-solid" class="shrink-0 size-5 text-primary-500 dark:text-primary-400 animate-spin" />
+    </template>
+  </UContextMenu>
+</template>

docs/app/components/content/examples/dropdown-menu/DropdownMenuOpenExample.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const open = ref(true)
+const open = ref(false)
 
 defineShortcuts({
   o: () => open.value = !open.value

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

docs/nuxt.config.ts

@@ -128,6 +128,7 @@ export default defineNuxtConfig({
         'UCheckbox',
         'UChip',
         'UCollapsible',
+        'UContextMenu',
         'UDropdownMenu',
         'UFormField',
         'UIcon',

src/runtime/components/ContextMenu.vue

@@ -66,7 +66,8 @@ import UContextMenuContent from './ContextMenuContent.vue'
 import { omit } from '../utils'
 
 const props = withDefaults(defineProps<ContextMenuProps<T>>(), {
-  portal: true
+  portal: true,
+  modal: true
 })
 const emits = defineEmits<ContextMenuEmits>()
 const slots = defineSlots<ContextMenuSlots<T>>()

src/runtime/components/DropdownMenu.vue

@@ -75,7 +75,8 @@ import UDropdownMenuContent from './DropdownMenuContent.vue'
 import { omit } from '../utils'
 
 const props = withDefaults(defineProps<DropdownMenuProps<T>>(), {
-  portal: true
+  portal: true,
+  modal: true
 })
 const emits = defineEmits<DropdownMenuEmits>()
 const slots = defineSlots<DropdownMenuSlots<T>>()