@eslamdevui/ui 3.2.0-beta.2 → 3.2.0

package/dist/runtime/components/ColorPicker.vue

@@ -179,36 +179,36 @@ const trackThumbStyle = computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-disabled="disabled ? true : void 0">
-    <div :class="ui.picker({ class: props.ui?.picker })">
-      <div
-        ref="selectorRef"
-        :class="ui.selector({ class: props.ui?.selector })"
-        :style="selectorStyle"
-      >
-        <div :class="ui.selectorBackground({ class: props.ui?.selectorBackground })" data-color-picker-background>
-          <div
-            ref="selectorThumbRef"
-            :class="ui.selectorThumb({ class: props.ui?.selectorThumb })"
-            :style="selectorThumbStyle"
-            :data-disabled="disabled ? true : void 0"
-          />
-        </div>
-      </div>
-      <div
-        ref="trackRef"
-        :class="ui.track({ class: props.ui?.track })"
-        data-color-picker-track
-      >
-        <div
-          ref="trackThumbRef"
-          :class="ui.trackThumb({ class: props.ui?.trackThumb })"
-          :style="trackThumbStyle"
-          :data-disabled="disabled ? true : void 0"
-        />
-      </div>
-    </div>
-  </Primitive>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-disabled="disabled ? true : void 0">
+    <div :class="ui.picker({ class: props.ui?.picker })">
+      <div
+        ref="selectorRef"
+        :class="ui.selector({ class: props.ui?.selector })"
+        :style="selectorStyle"
+      >
+        <div :class="ui.selectorBackground({ class: props.ui?.selectorBackground })" data-color-picker-background>
+          <div
+            ref="selectorThumbRef"
+            :class="ui.selectorThumb({ class: props.ui?.selectorThumb })"
+            :style="selectorThumbStyle"
+            :data-disabled="disabled ? true : void 0"
+          />
+        </div>
+      </div>
+      <div
+        ref="trackRef"
+        :class="ui.track({ class: props.ui?.track })"
+        data-color-picker-track
+      >
+        <div
+          ref="trackThumbRef"
+          :class="ui.trackThumb({ class: props.ui?.trackThumb })"
+          :style="trackThumbStyle"
+          :data-disabled="disabled ? true : void 0"
+        />
+      </div>
+    </div>
+  </Primitive>
 </template>
 
 <style scoped>

package/dist/runtime/components/CommandPalette.vue

@@ -155,121 +155,121 @@ function onSelect(e, item) {
 </script>
 
 <template>
-  <ListboxRoot v-bind="rootProps" ref="listboxRootRef" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <ListboxFilter v-model="searchTerm" as-child>
-      <UInput
-        :placeholder="placeholder"
-        variant="none"
-        :autofocus="autofocus"
-        v-bind="inputProps"
-        :icon="icon || appConfig.ui.icons.search"
-        :class="ui.input({ class: props.ui?.input })"
-        @keydown.backspace="onBackspace"
-      >
-        <template v-if="history?.length && (back || !!slots.back)" #leading>
-          <slot name="back" :ui="ui">
-            <UButton
-              :icon="backIcon || appConfig.ui.icons.arrowLeft"
-              color="neutral"
-              variant="link"
-              :aria-label="t('commandPalette.back')"
-              v-bind="typeof back === 'object' ? back : {}"
-              :class="ui.back({ class: props.ui?.back })"
-              @click="navigateBack"
-            />
-          </slot>
-        </template>
-
-        <template v-if="close || !!slots.close" #trailing>
-          <slot name="close" :ui="ui">
-            <UButton
-              v-if="close"
-              :icon="closeIcon || appConfig.ui.icons.close"
-              color="neutral"
-              variant="ghost"
-              :aria-label="t('commandPalette.close')"
-              v-bind="typeof close === 'object' ? close : {}"
-              :class="ui.close({ class: props.ui?.close })"
-              @click="emits('update:open', false)"
-            />
-          </slot>
-        </template>
-      </UInput>
-    </ListboxFilter>
-
-    <ListboxContent :class="ui.content({ class: props.ui?.content })">
-      <div v-if="filteredGroups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
-        <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
-          <ListboxGroupLabel v-if="get(group, props.labelKey)" :class="ui.label({ class: props.ui?.label })">
-            {{ get(group, props.labelKey) }}
-          </ListboxGroupLabel>
-
-          <ListboxItem
-            v-for="(item, index) in group.items"
-            :key="`group-${group.id}-${index}`"
-            :value="omit(item, ['matches', 'group', 'onSelect', 'labelHtml', 'suffixHtml', 'children'])"
-            :disabled="item.disabled"
-            as-child
-            @select="onSelect($event, item)"
-          >
-            <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-              <ULinkBase v-bind="slotProps" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], active: active || item.active })">
-                <slot :name="item.slot || group.slot || 'item'" :item="item" :index="index">
-                  <slot :name="item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index">
-                    <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], loading: true })" />
-                    <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], active: active || item.active })" />
-                    <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active: active || item.active })" />
-                    <UChip
-                      v-else-if="item.chip"
-                      :size="item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()"
-                      inset
-                      standalone
-                      v-bind="item.chip"
-                      :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip], active: active || item.active })"
-                    />
-                  </slot>
-
-                  <span v-if="item.labelHtml || get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`]" :class="ui.itemLabel({ class: [props.ui?.itemLabel, item.ui?.itemLabel], active: active || item.active })">
-                    <slot :name="item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`" :item="item" :index="index">
-                      <span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: [props.ui?.itemLabelPrefix, item.ui?.itemLabelPrefix] })">{{ item.prefix }}</span>
-
-                      <span :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })" v-html="item.labelHtml || get(item, props.labelKey)" />
-
-                      <span :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })" v-html="item.suffixHtml || item.suffix" />
-                    </slot>
-                  </span>
-
-                  <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
-                    <slot :name="item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`" :item="item" :index="index">
-                      <UIcon
-                        v-if="item.children && item.children.length > 0"
-                        :name="trailingIcon || appConfig.ui.icons.chevronRight"
-                        :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
-                      />
-
-                      <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
-                        <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
-                      </span>
-
-                      <UIcon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: [props.ui?.itemTrailingHighlightedIcon, item.ui?.itemTrailingHighlightedIcon] })" />
-                    </slot>
-
-                    <ListboxItemIndicator v-if="!item.children?.length" as-child>
-                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
-                    </ListboxItemIndicator>
-                  </span>
-                </slot>
-              </ULinkBase>
-            </ULink>
-          </ListboxItem>
-        </ListboxGroup>
-      </div>
-
-      <div v-else :class="ui.empty({ class: props.ui?.empty })">
-        <slot name="empty" :search-term="searchTerm">
-          {{ searchTerm ? t("commandPalette.noMatch", { searchTerm }) : t("commandPalette.noData") }}
-        </slot>
-      </div>
-    </ListboxContent>
-  </ListboxRoot>
+  <ListboxRoot v-bind="rootProps" ref="listboxRootRef" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <ListboxFilter v-model="searchTerm" as-child>
+      <UInput
+        :placeholder="placeholder"
+        variant="none"
+        :autofocus="autofocus"
+        v-bind="inputProps"
+        :icon="icon || appConfig.ui.icons.search"
+        :class="ui.input({ class: props.ui?.input })"
+        @keydown.backspace="onBackspace"
+      >
+        <template v-if="history?.length && (back || !!slots.back)" #leading>
+          <slot name="back" :ui="ui">
+            <UButton
+              :icon="backIcon || appConfig.ui.icons.arrowLeft"
+              color="neutral"
+              variant="link"
+              :aria-label="t('commandPalette.back')"
+              v-bind="typeof back === 'object' ? back : {}"
+              :class="ui.back({ class: props.ui?.back })"
+              @click="navigateBack"
+            />
+          </slot>
+        </template>
+
+        <template v-if="close || !!slots.close" #trailing>
+          <slot name="close" :ui="ui">
+            <UButton
+              v-if="close"
+              :icon="closeIcon || appConfig.ui.icons.close"
+              color="neutral"
+              variant="ghost"
+              :aria-label="t('commandPalette.close')"
+              v-bind="typeof close === 'object' ? close : {}"
+              :class="ui.close({ class: props.ui?.close })"
+              @click="emits('update:open', false)"
+            />
+          </slot>
+        </template>
+      </UInput>
+    </ListboxFilter>
+
+    <ListboxContent :class="ui.content({ class: props.ui?.content })">
+      <div v-if="filteredGroups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+        <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
+          <ListboxGroupLabel v-if="get(group, props.labelKey)" :class="ui.label({ class: props.ui?.label })">
+            {{ get(group, props.labelKey) }}
+          </ListboxGroupLabel>
+
+          <ListboxItem
+            v-for="(item, index) in group.items"
+            :key="`group-${group.id}-${index}`"
+            :value="omit(item, ['matches', 'group', 'onSelect', 'labelHtml', 'suffixHtml', 'children'])"
+            :disabled="item.disabled"
+            as-child
+            @select="onSelect($event, item)"
+          >
+            <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+              <ULinkBase v-bind="slotProps" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], active: active || item.active })">
+                <slot :name="item.slot || group.slot || 'item'" :item="item" :index="index">
+                  <slot :name="item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index">
+                    <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], loading: true })" />
+                    <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], active: active || item.active })" />
+                    <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active: active || item.active })" />
+                    <UChip
+                      v-else-if="item.chip"
+                      :size="item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()"
+                      inset
+                      standalone
+                      v-bind="item.chip"
+                      :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip], active: active || item.active })"
+                    />
+                  </slot>
+
+                  <span v-if="item.labelHtml || get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`]" :class="ui.itemLabel({ class: [props.ui?.itemLabel, item.ui?.itemLabel], active: active || item.active })">
+                    <slot :name="item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`" :item="item" :index="index">
+                      <span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: [props.ui?.itemLabelPrefix, item.ui?.itemLabelPrefix] })">{{ item.prefix }}</span>
+
+                      <span :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })" v-html="item.labelHtml || get(item, props.labelKey)" />
+
+                      <span :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })" v-html="item.suffixHtml || item.suffix" />
+                    </slot>
+                  </span>
+
+                  <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
+                    <slot :name="item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`" :item="item" :index="index">
+                      <UIcon
+                        v-if="item.children && item.children.length > 0"
+                        :name="trailingIcon || appConfig.ui.icons.chevronRight"
+                        :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
+                      />
+
+                      <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
+                        <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+                      </span>
+
+                      <UIcon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: [props.ui?.itemTrailingHighlightedIcon, item.ui?.itemTrailingHighlightedIcon] })" />
+                    </slot>
+
+                    <ListboxItemIndicator v-if="!item.children?.length" as-child>
+                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
+                    </ListboxItemIndicator>
+                  </span>
+                </slot>
+              </ULinkBase>
+            </ULink>
+          </ListboxItem>
+        </ListboxGroup>
+      </div>
+
+      <div v-else :class="ui.empty({ class: props.ui?.empty })">
+        <slot name="empty" :search-term="searchTerm">
+          {{ searchTerm ? t("commandPalette.noMatch", { searchTerm }) : t("commandPalette.noData") }}
+        </slot>
+      </div>
+    </ListboxContent>
+  </ListboxRoot>
 </template>

package/dist/runtime/components/Container.vue

@@ -17,7 +17,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.container ||
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ class: props.class })">
-    <slot />
-  </Primitive>
+  <Primitive :as="as" :class="ui({ class: props.class })">
+    <slot />
+  </Primitive>
 </template>

package/dist/runtime/components/ContextMenu.vue

@@ -36,26 +36,26 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contextMenu |
 </script>
 
 <template>
-  <ContextMenuRoot v-bind="rootProps">
-    <ContextMenuTrigger v-if="!!slots.default" as-child :disabled="disabled" :class="props.class">
-      <slot />
-    </ContextMenuTrigger>
-
-    <UContextMenuContent
-      :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
-      :ui="ui"
-      :ui-override="props.ui"
-      v-bind="contentProps"
-      :items="items"
-      :portal="portal"
-      :label-key="labelKey"
-      :checked-icon="checkedIcon"
-      :loading-icon="loadingIcon"
-      :external-icon="externalIcon"
-    >
-      <template v-for="(_, name) in proxySlots" #[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-    </UContextMenuContent>
-  </ContextMenuRoot>
+  <ContextMenuRoot v-bind="rootProps">
+    <ContextMenuTrigger v-if="!!slots.default" as-child :disabled="disabled" :class="props.class">
+      <slot />
+    </ContextMenuTrigger>
+
+    <UContextMenuContent
+      :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
+      :ui="ui"
+      :ui-override="props.ui"
+      v-bind="contentProps"
+      :items="items"
+      :portal="portal"
+      :label-key="labelKey"
+      :checked-icon="checkedIcon"
+      :loading-icon="loadingIcon"
+      :external-icon="externalIcon"
+    >
+      <template v-for="(_, name) in proxySlots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </UContextMenuContent>
+  </ContextMenuRoot>
 </template>

package/dist/runtime/components/ContextMenuContent.vue

@@ -56,109 +56,109 @@ const groups = computed(
 </script>
 
 <template>
-  <DefineItemTemplate v-slot="{ item, active, index }">
-    <slot :name="item.slot || 'item'" :item="item" :index="index">
-      <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index">
-        <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
-        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
-        <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
-      </slot>
-
-      <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
-        <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
-          {{ get(item, props.labelKey) }}
-        </slot>
-
-        <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: [uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item?.color, active })" />
-      </span>
-
-      <span :class="ui.itemTrailing({ class: [uiOverride?.itemTrailing, item.ui?.itemTrailing] })">
-        <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
-          <UIcon v-if="item.children?.length" :name="childrenIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
-          <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
-            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
-          </span>
-        </slot>
-
-        <ContextMenu.ItemIndicator as-child>
-          <UIcon :name="checkedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color })" />
-        </ContextMenu.ItemIndicator>
-      </span>
-    </slot>
-  </DefineItemTemplate>
-
-  <ContextMenu.Portal v-bind="portalProps">
-    <component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" :class="props.class" v-bind="contentProps">
-      <slot name="content-top" />
-
-      <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
-        <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
-          <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-            <ContextMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
-              <ReuseItemTemplate :item="item" :index="index" />
-            </ContextMenu.Label>
-            <ContextMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
-            <ContextMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
-              <ContextMenu.SubTrigger
-                as="button"
-                type="button"
-                :disabled="item.disabled"
-                :text-value="get(item, props.labelKey)"
-                :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
-              >
-                <ReuseItemTemplate :item="item" :index="index" />
-              </ContextMenu.SubTrigger>
-
-              <UContextMenuContent
-                sub
-                :class="props.class"
-                :ui="ui"
-                :ui-override="uiOverride"
-                :portal="portal"
-                :items="item.children"
-                :align-offset="-4"
-                :label-key="labelKey"
-                :checked-icon="checkedIcon"
-                :loading-icon="loadingIcon"
-                :external-icon="externalIcon"
-                v-bind="item.content"
-              >
-                <template v-for="(_, name) in proxySlots" #[name]="slotData">
-                  <slot :name="name" v-bind="slotData" />
-                </template>
-              </UContextMenuContent>
-            </ContextMenu.Sub>
-            <ContextMenu.CheckboxItem
-              v-else-if="item.type === 'checkbox'"
-              :model-value="item.checked"
-              :disabled="item.disabled"
-              :text-value="get(item, props.labelKey)"
-              :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
-              @update:model-value="item.onUpdateChecked"
-              @select="item.onSelect"
-            >
-              <ReuseItemTemplate :item="item" :index="index" />
-            </ContextMenu.CheckboxItem>
-            <ContextMenu.Item
-              v-else
-              as-child
-              :disabled="item.disabled"
-              :text-value="get(item, props.labelKey)"
-              @select="item.onSelect"
-            >
-              <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-                <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], active, color: item?.color })">
-                  <ReuseItemTemplate :item="item" :active="active" :index="index" />
-                </ULinkBase>
-              </ULink>
-            </ContextMenu.Item>
-          </template>
-        </ContextMenu.Group>
-      </div>
-
-      <slot />
-
-      <slot name="content-bottom" />
-    </component>
-  </ContextMenu.Portal>
+  <DefineItemTemplate v-slot="{ item, active, index }">
+    <slot :name="item.slot || 'item'" :item="item" :index="index">
+      <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index">
+        <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
+        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
+        <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
+      </slot>
+
+      <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
+        <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
+          {{ get(item, props.labelKey) }}
+        </slot>
+
+        <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: [uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item?.color, active })" />
+      </span>
+
+      <span :class="ui.itemTrailing({ class: [uiOverride?.itemTrailing, item.ui?.itemTrailing] })">
+        <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
+          <UIcon v-if="item.children?.length" :name="childrenIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
+          <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
+            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+          </span>
+        </slot>
+
+        <ContextMenu.ItemIndicator as-child>
+          <UIcon :name="checkedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color })" />
+        </ContextMenu.ItemIndicator>
+      </span>
+    </slot>
+  </DefineItemTemplate>
+
+  <ContextMenu.Portal v-bind="portalProps">
+    <component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" :class="props.class" v-bind="contentProps">
+      <slot name="content-top" />
+
+      <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+        <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
+          <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+            <ContextMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
+              <ReuseItemTemplate :item="item" :index="index" />
+            </ContextMenu.Label>
+            <ContextMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
+            <ContextMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
+              <ContextMenu.SubTrigger
+                as="button"
+                type="button"
+                :disabled="item.disabled"
+                :text-value="get(item, props.labelKey)"
+                :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+              >
+                <ReuseItemTemplate :item="item" :index="index" />
+              </ContextMenu.SubTrigger>
+
+              <UContextMenuContent
+                sub
+                :class="props.class"
+                :ui="ui"
+                :ui-override="uiOverride"
+                :portal="portal"
+                :items="item.children"
+                :align-offset="-4"
+                :label-key="labelKey"
+                :checked-icon="checkedIcon"
+                :loading-icon="loadingIcon"
+                :external-icon="externalIcon"
+                v-bind="item.content"
+              >
+                <template v-for="(_, name) in proxySlots" #[name]="slotData">
+                  <slot :name="name" v-bind="slotData" />
+                </template>
+              </UContextMenuContent>
+            </ContextMenu.Sub>
+            <ContextMenu.CheckboxItem
+              v-else-if="item.type === 'checkbox'"
+              :model-value="item.checked"
+              :disabled="item.disabled"
+              :text-value="get(item, props.labelKey)"
+              :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+              @update:model-value="item.onUpdateChecked"
+              @select="item.onSelect"
+            >
+              <ReuseItemTemplate :item="item" :index="index" />
+            </ContextMenu.CheckboxItem>
+            <ContextMenu.Item
+              v-else
+              as-child
+              :disabled="item.disabled"
+              :text-value="get(item, props.labelKey)"
+              @select="item.onSelect"
+            >
+              <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+                <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], active, color: item?.color })">
+                  <ReuseItemTemplate :item="item" :active="active" :index="index" />
+                </ULinkBase>
+              </ULink>
+            </ContextMenu.Item>
+          </template>
+        </ContextMenu.Group>
+      </div>
+
+      <slot />
+
+      <slot name="content-bottom" />
+    </component>
+  </ContextMenu.Portal>
 </template>

package/dist/runtime/components/DashboardGroup.vue

@@ -40,7 +40,7 @@ provideDashboardContext({
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui({ class: props.class })">
-    <slot />
-  </Primitive>
+  <Primitive :as="props.as" :class="ui({ class: props.class })">
+    <slot />
+  </Primitive>
 </template>