@nuxt/ui 3.0.0-alpha.0 → 3.0.0-alpha.10

package/dist/runtime/components/Container.vue

@@ -1,13 +1,32 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/container";
-const appConfig = _appConfig;
-const container = tv({ extend: tv(theme), ...appConfig.ui?.container || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/container'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+
+const appConfig = _appConfig as AppConfig & { ui: { container: Partial<typeof theme> } }
+
+const container = tv({ extend: tv(theme), ...(appConfig.ui?.container || {}) })
+
+export interface ContainerProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+}
+
+export interface ContainerSlots {
+  default(props?: {}): any
+}
+
+extendDevtoolsMeta({ example: 'ContainerExample' })
 </script>
 
 <script setup lang="ts">
-import { Primitive } from 'radix-vue'
+import { Primitive } from 'reka-ui'
 
 const props = defineProps<ContainerProps>()
 defineSlots<ContainerSlots>()

package/dist/runtime/components/ContextMenu.vue

@@ -1,21 +1,157 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/context-menu";
-const appConfig = _appConfig;
-const contextMenu = tv({ extend: tv(theme), ...appConfig.ui?.contextMenu || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/context-menu'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import type { AvatarProps, KbdProps, LinkProps } from '../types'
+import type { DynamicSlots, PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { contextMenu: Partial<typeof theme> } }
+
+const contextMenu = tv({ extend: tv(theme), ...(appConfig.ui?.contextMenu || {}) })
+
+type ContextMenuVariants = VariantProps<typeof contextMenu>
+
+export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
+  label?: string
+  icon?: string
+  color?: ContextMenuVariants['color']
+  avatar?: AvatarProps
+  content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  kbds?: KbdProps['value'][] | KbdProps[]
+  /**
+   * The item type.
+   * @defaultValue 'link'
+   */
+  type?: 'label' | 'separator' | 'link' | 'checkbox'
+  slot?: string
+  loading?: boolean
+  disabled?: boolean
+  checked?: boolean
+  open?: boolean
+  defaultOpen?: boolean
+  children?: ContextMenuItem[] | ContextMenuItem[][]
+  onSelect?(e: Event): void
+  onUpdateChecked?(checked: boolean): void
+}
+
+export interface ContextMenuProps<T> extends Omit<ContextMenuRootProps, 'dir'> {
+  size?: ContextMenuVariants['size']
+  items?: T[] | T[][]
+  /**
+   * The icon displayed when an item is checked.
+   * @defaultValue appConfig.ui.icons.check
+   */
+  checkedIcon?: string
+  /**
+   * The icon displayed when an item is loading.
+   * @defaultValue appConfig.ui.icons.loading
+   */
+  loadingIcon?: string
+  /** The content of the menu. */
+  content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Render the menu in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
+  disabled?: boolean
+  class?: any
+  ui?: PartialString<typeof contextMenu.slots>
+}
+
+export interface ContextMenuEmits extends ContextMenuRootEmits {}
+
+type SlotProps<T> = (props: { item: T, active?: boolean, index: number }) => any
+
+export type ContextMenuSlots<T extends { slot?: string }> = {
+  'default'(props?: {}): any
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
+
+extendDevtoolsMeta({
+  example: 'ContextMenuExample',
+  ignoreProps: ['items'],
+  defaultProps: {
+    items: [
+      [{
+        label: 'My account',
+        avatar: {
+          src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+        }
+      }],
+      [{
+        label: 'Appearance',
+        children: [{
+          label: 'System',
+          icon: 'i-lucide-monitor'
+        }, {
+          label: 'Light',
+          icon: 'i-lucide-sun'
+        }, {
+          label: 'Dark',
+          icon: 'i-lucide-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: ['option', 'meta', 'U']
+        }, {
+          label: 'Developer Tools',
+          kbds: ['option', 'meta', 'I']
+        }], [{
+          label: 'Inspect Elements',
+          kbds: ['option', 'meta', 'C']
+        }], [{
+          label: 'JavaScript Console',
+          kbds: ['option', 'meta', 'J']
+        }]]
+      }]
+    ]
+  }
+})
 </script>
 
 <script setup lang="ts" generic="T extends ContextMenuItem">
 import { computed, toRef } from 'vue'
-import { ContextMenuRoot, ContextMenuTrigger, useForwardPropsEmits } from 'radix-vue'
+import { ContextMenuRoot, ContextMenuTrigger, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
-import UContextMenuContent from './ContextMenuContent.vue'
 import { omit } from '../utils'
+import UContextMenuContent from './ContextMenuContent.vue'
 
 const props = withDefaults(defineProps<ContextMenuProps<T>>(), {
   portal: true,
-  modal: true
+  modal: true,
+  labelKey: 'label'
 })
 const emits = defineEmits<ContextMenuEmits>()
 const slots = defineSlots<ContextMenuSlots<T>>()
@@ -31,17 +167,20 @@ const ui = computed(() => contextMenu({
 
 <template>
   <ContextMenuRoot v-bind="rootProps">
-    <ContextMenuTrigger v-if="!!slots.default" as-child :disabled="disabled">
+    <ContextMenuTrigger v-if="!!slots.default" as-child :disabled="disabled" :class="props.class">
       <slot />
     </ContextMenuTrigger>
 
     <UContextMenuContent
-      :class="ui.content({ class: [props.class, props.ui?.content] })"
+      :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"
     >
       <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
         <slot :name="name" v-bind="slotData" />

package/dist/runtime/components/ContextMenuContent.vue

@@ -1,22 +1,41 @@
-<script>
-import { tv } from "tailwind-variants";
-import theme from "#build/ui/context-menu";
-const contextMenu = tv(theme)();
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { ContextMenuContentProps as RekaContextMenuContentProps, ContextMenuContentEmits as RekaContextMenuContentEmits } from 'reka-ui'
+import theme from '#build/ui/context-menu'
+import type { KbdProps, AvatarProps, ContextMenuItem, ContextMenuSlots } from '../types'
+
+const _contextMenu = tv(theme)()
+
+interface ContextMenuContentProps<T> extends Omit<RekaContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
+  items?: T[] | T[][]
+  portal?: boolean
+  sub?: boolean
+  labelKey: string
+  checkedIcon?: string
+  loadingIcon?: string
+  class?: any
+  ui: typeof _contextMenu
+  uiOverride?: any
+}
+
+interface ContextMenuContentEmits extends RekaContextMenuContentEmits {}
 </script>
 
 <script setup lang="ts" generic="T extends ContextMenuItem">
 import { computed } from 'vue'
-import { ContextMenu } from 'radix-vue/namespaced'
-import { useForwardPropsEmits } from 'radix-vue'
+import { ContextMenu } from 'reka-ui/namespaced'
+import { useForwardPropsEmits } from 'reka-ui'
 import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
+import { omit, get } from '../utils'
+import { pickLinkProps } from '../utils/link'
 import ULinkBase from './LinkBase.vue'
 import ULink from './Link.vue'
 import UAvatar from './Avatar.vue'
 import UIcon from './Icon.vue'
 import UKbd from './Kbd.vue'
-import { omit } from '../utils'
-import { pickLinkProps } from '../utils/link'
+// eslint-disable-next-line import/no-self-import
+import UContextMenuContent from './ContextMenuContent.vue'
 
 const props = defineProps<ContextMenuContentProps<T>>()
 const emits = defineEmits<ContextMenuContentEmits>()
@@ -35,25 +54,30 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
   <DefineItemTemplate v-slot="{ item, active, index }">
     <slot :name="item.slot || 'item'" :item="(item as T)" :index="index">
       <slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" :item="(item as T)" :active="active" :index="index">
-        <UAvatar v-if="item.avatar" :size="((props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: uiOverride?.itemLeadingAvatar, active })" />
-        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: uiOverride?.itemLeadingIcon, active })" />
+        <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: uiOverride?.itemLeadingIcon, color: item?.color, loading: true })" />
+        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: uiOverride?.itemLeadingIcon, color: item?.color, active })" />
+        <UAvatar v-else-if="item.avatar" :size="((props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: uiOverride?.itemLeadingAvatar, active })" />
       </slot>
 
-      <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.itemLabel({ class: uiOverride?.itemLabel, active })">
+      <span v-if="get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.itemLabel({ class: uiOverride?.itemLabel, active })">
         <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="(item as T)" :active="active" :index="index">
-          {{ item.label }}
+          {{ get(item, props.labelKey as string) }}
         </slot>
 
-        <UIcon v-if="item.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: uiOverride?.itemLabelExternalIcon, active })" />
+        <UIcon v-if="item.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: uiOverride?.itemLabelExternalIcon, color: item?.color, active })" />
       </span>
 
-      <span v-if="item.children?.length || item.kbds?.length || !!slots[item.slot ? `${item.slot}-trailing`: 'item-trailing']" :class="ui.itemTrailing({ class: uiOverride?.itemTrailing })">
+      <span :class="ui.itemTrailing({ class: uiOverride?.itemTrailing })">
         <slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" :item="(item as T)" :active="active" :index="index">
-          <UIcon v-if="item.children?.length" :name="appConfig.ui.icons.chevronRight" :class="ui.itemTrailingIcon({ class: uiOverride?.itemTrailingIcon, active })" />
+          <UIcon v-if="item.children?.length" :name="appConfig.ui.icons.chevronRight" :class="ui.itemTrailingIcon({ class: uiOverride?.itemTrailingIcon, color: item?.color, active })" />
           <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: uiOverride?.itemTrailingKbds })">
             <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" 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, color: item?.color })" />
+        </ContextMenu.ItemIndicator>
       </span>
     </slot>
   </DefineItemTemplate>
@@ -71,8 +95,8 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
               as="button"
               type="button"
               :disabled="item.disabled"
-              :text-value="item.label"
-              :class="ui.item({ class: uiOverride?.item })"
+              :text-value="get(item, props.labelKey as string)"
+              :class="ui.item({ class: uiOverride?.item, color: item?.color })"
             >
               <ReuseItemTemplate :item="item" :index="index" />
             </ContextMenu.SubTrigger>
@@ -85,6 +109,9 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
               :portal="portal"
               :items="item.children"
               :align-offset="-4"
+              :label-key="labelKey"
+              :checked-icon="checkedIcon"
+              :loading-icon="loadingIcon"
               v-bind="item.content"
             >
               <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
@@ -92,9 +119,26 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
               </template>
             </UContextMenuContent>
           </ContextMenu.Sub>
-          <ContextMenu.Item v-else as-child :disabled="item.disabled" :text-value="item.label" @select="item.select">
+          <ContextMenu.CheckboxItem
+            v-else-if="item.type === 'checkbox'"
+            :checked="item.checked"
+            :disabled="item.disabled"
+            :text-value="get(item, props.labelKey as string)"
+            :class="ui.item({ class: [uiOverride?.item, item.class], color: item?.color })"
+            @update:checked="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 as string)"
+            @select="item.onSelect"
+          >
             <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<ContextMenuItem, 'type'>)" custom>
-              <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.class], active })">
+              <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.class], active, color: item?.color })">
                 <ReuseItemTemplate :item="item" :active="active" :index="index" />
               </ULinkBase>
             </ULink>

package/dist/runtime/components/Drawer.vue

@@ -1,43 +1,96 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/drawer";
-const appConfig = _appConfig;
-const drawer = tv({ extend: tv(theme), ...appConfig.ui?.drawer || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue'
+import type { DialogContentProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/drawer'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+
+const appConfig = _appConfig as AppConfig & { ui: { drawer: Partial<typeof theme> } }
+
+const drawer = tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}) })
+
+export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'defaultOpen' | 'direction' | 'dismissible' | 'fadeFromIndex' | 'fixed' | 'modal' | 'nested' | 'direction' | 'open' | 'scrollLockTimeout' | 'shouldScaleBackground' | 'snapPoints'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  title?: string
+  description?: string
+  /** The content of the drawer. */
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Render an overlay behind the drawer.
+   * @defaultValue true
+   */
+  overlay?: boolean
+  /**
+   * Render a handle on the drawer.
+   * @defaultValue true
+   */
+  handle?: boolean
+  /**
+   * Render the drawer in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  class?: any
+  ui?: Partial<typeof drawer.slots>
+}
+
+export interface DrawerEmits extends DrawerRootEmits {}
+
+export interface DrawerSlots {
+  default(props?: {}): any
+  handle(props?: {}): any
+  content(props?: {}): any
+  header(props?: {}): any
+  title(props?: {}): any
+  description(props?: {}): any
+  body(props?: {}): any
+  footer(props?: {}): any
+}
+
+extendDevtoolsMeta({ example: 'DrawerExample' })
 </script>
 
 <script setup lang="ts">
-import { toRef } from 'vue'
-import { useForwardPropsEmits } from 'radix-vue'
+import { computed, toRef } from 'vue'
+import { useForwardPropsEmits } from 'reka-ui'
 import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription } from 'vaul-vue'
 import { reactivePick } from '@vueuse/core'
 
 const props = withDefaults(defineProps<DrawerProps>(), {
+  direction: 'bottom',
   portal: true,
-  overlay: true
+  overlay: true,
+  handle: true
 })
 const emits = defineEmits<DrawerEmits>()
 const slots = defineSlots<DrawerSlots>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'activeSnapPoint', 'closeThreshold', 'defaultOpen', 'dismissible', 'fadeFromIndex', 'fixed', 'modal', 'nested', 'open', 'scrollLockTimeout', 'shouldScaleBackground', 'snapPoints'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'activeSnapPoint', 'closeThreshold', 'defaultOpen', 'dismissible', 'fadeFromIndex', 'fixed', 'modal', 'nested', 'direction', 'open', 'scrollLockTimeout', 'shouldScaleBackground', 'snapPoints'), emits)
 const contentProps = toRef(() => props.content)
 
-// eslint-disable-next-line vue/no-dupe-keys
-const ui = drawer()
+const ui = computed(() => drawer({
+  direction: props.direction
+}))
 </script>
 
 <template>
   <DrawerRoot v-bind="rootProps">
-    <DrawerTrigger v-if="!!slots.default" as-child>
+    <DrawerTrigger v-if="!!slots.default" as-child :class="props.class">
       <slot />
     </DrawerTrigger>
 
     <DrawerPortal :disabled="!portal">
       <DrawerOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
-      <DrawerContent :class="ui.content({ class: [props.class, props.ui?.content] })" v-bind="contentProps">
+      <DrawerContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps">
         <slot name="handle">
-          <div :class="ui.handle({ class: props.ui?.handle })" />
+          <div v-if="handle" :class="ui.handle({ class: props.ui?.handle })" />
         </slot>
 
         <slot name="content">