@@ -115,70 +115,72 @@ const groups = computed<DropdownMenuItem[][]>(() =>
115
115
<component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="props.class" v-bind="contentProps">
116
116
<slot name="content-top" />
117
117
118
- <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
119
- <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
120
- <DropdownMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
121
- <ReuseItemTemplate :item="item" :index="index" />
122
- </DropdownMenu.Label>
123
- <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
124
- <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
125
- <DropdownMenu.SubTrigger
126
- as="button"
127
- type="button"
118
+ <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
119
+ <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
120
+ <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
121
+ <DropdownMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
122
+ <ReuseItemTemplate :item="item" :index="index" />
123
+ </DropdownMenu.Label>
124
+ <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
125
+ <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
126
+ <DropdownMenu.SubTrigger
127
+ as="button"
128
+ type="button"
129
+ :disabled="item.disabled"
130
+ :text-value="get(item, props.labelKey as string)"
131
+ :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
132
+ >
133
+ <ReuseItemTemplate :item="item" :index="index" />
134
+ </DropdownMenu.SubTrigger>
135
+
136
+ <UDropdownMenuContent
137
+ sub
138
+ :class="props.class"
139
+ :ui="ui"
140
+ :ui-override="uiOverride"
141
+ :portal="portal"
142
+ :items="(item.children as T)"
143
+ align="start"
144
+ :align-offset="-4"
145
+ :side-offset="3"
146
+ :label-key="labelKey"
147
+ :checked-icon="checkedIcon"
148
+ :loading-icon="loadingIcon"
149
+ :external-icon="externalIcon"
150
+ v-bind="item.content"
151
+ >
152
+ <template v-for="(_, name) in proxySlots" #[name]="slotData">
153
+ <slot :name="(name as keyof DropdownMenuContentSlots<T>)" v-bind="slotData" />
154
+ </template>
155
+ </UDropdownMenuContent>
156
+ </DropdownMenu.Sub>
157
+ <DropdownMenu.CheckboxItem
158
+ v-else-if="item.type === 'checkbox'"
159
+ :model-value="item.checked"
128
160
:disabled="item.disabled"
129
161
:text-value="get(item, props.labelKey as string)"
130
162
:class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
163
+ @update:model-value="item.onUpdateChecked"
164
+ @select="item.onSelect"
131
165
>
132
166
<ReuseItemTemplate :item="item" :index="index" />
133
- </DropdownMenu.SubTrigger>
134
-
135
- <UDropdownMenuContent
136
- sub
137
- :class="props.class"
138
- :ui="ui"
139
- :ui-override="uiOverride"
140
- :portal="portal"
141
- :items="(item.children as T)"
142
- align="start"
143
- :align-offset="-4"
144
- :side-offset="3"
145
- :label-key="labelKey"
146
- :checked-icon="checkedIcon"
147
- :loading-icon="loadingIcon"
148
- :external-icon="externalIcon"
149
- v-bind="item.content"
167
+ </DropdownMenu.CheckboxItem>
168
+ <DropdownMenu.Item
169
+ v-else
170
+ as-child
171
+ :disabled="item.disabled"
172
+ :text-value="get(item, props.labelKey as string)"
173
+ @select="item.onSelect"
150
174
>
151
- <template v-for="(_, name) in proxySlots" #[name]="slotData">
152
- <slot :name="(name as keyof DropdownMenuContentSlots<T>)" v-bind="slotData" />
153
- </template>
154
- </UDropdownMenuContent>
155
- </DropdownMenu.Sub>
156
- <DropdownMenu.CheckboxItem
157
- v-else-if="item.type === 'checkbox'"
158
- :model-value="item.checked"
159
- :disabled="item.disabled"
160
- :text-value="get(item, props.labelKey as string)"
161
- :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
162
- @update:model-value="item.onUpdateChecked"
163
- @select="item.onSelect"
164
- >
165
- <ReuseItemTemplate :item="item" :index="index" />
166
- </DropdownMenu.CheckboxItem>
167
- <DropdownMenu.Item
168
- v-else
169
- as-child
170
- :disabled="item.disabled"
171
- :text-value="get(item, props.labelKey as string)"
172
- @select="item.onSelect"
173
- >
174
- <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<DropdownMenuItem, 'type'>)" custom>
175
- <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color, active })">
176
- <ReuseItemTemplate :item="item" :active="active" :index="index" />
177
- </ULinkBase>
178
- </ULink>
179
- </DropdownMenu.Item>
180
- </template>
181
- </DropdownMenu.Group>
175
+ <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<DropdownMenuItem, 'type'>)" custom>
176
+ <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color, active })">
177
+ <ReuseItemTemplate :item="item" :active="active" :index="index" />
178
+ </ULinkBase>
179
+ </ULink>
180
+ </DropdownMenu.Item>
181
+ </template>
182
+ </DropdownMenu.Group>
183
+ </div>
182
184
183
185
<slot />
184
186
0 commit comments