fix(ContentSearch/DashboardSearch): proxy modal props to support fullscreen

Author: benjamincanac

src/runtime/components/DashboardSearch.vue

@@ -8,7 +8,7 @@ import type { ComponentConfig } from '../types/tv'
 
 type DashboardSearch = ComponentConfig<typeof theme, AppConfig, 'dashboardSearch'>
 
-export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPaletteItem> extends /* @vue-ignore */ Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'> {
+export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'> {
   /**
    * The icon displayed in the input.
    * @defaultValue appConfig.ui.icons.search
@@ -87,7 +87,8 @@ import UModal from './Modal.vue'
 const props = withDefaults(defineProps<DashboardSearchProps>(), {
   shortcut: 'meta_k',
   colorMode: true,
-  close: true
+  close: true,
+  fullscreen: false
 })
 const slots = defineSlots<DashboardSearchSlots>()
 
@@ -104,6 +105,7 @@ const colorMode = useColorMode()
 const appConfig = useAppConfig() as DashboardSearch['AppConfig']
 
 const commandPaletteProps = useForwardProps(reactivePick(props, 'icon', 'placeholder', 'autofocus', 'loading', 'loadingIcon', 'close', 'closeIcon'))
+const modalProps = useForwardProps(reactivePick(props, 'overlay', 'transition', 'content', 'dismissible', 'fullscreen', 'modal', 'portal'))
 
 const getProxySlots = () => omit(slots, ['content'])
 
@@ -112,8 +114,9 @@ const fuse = computed(() => defu({}, props.fuse, {
   }
 }))
 
-// eslint-disable-next-line vue/no-dupe-keys
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardSearch || {}) })())
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardSearch || {}) })({
+  fullscreen: props.fullscreen
+}))
 
 const groups = computed(() => {
   const groups = []
@@ -180,8 +183,9 @@ defineExpose({
 <template>
   <UModal
     v-model:open="open"
-    :title="t('dashboardSearch.title')"
-    :description="t('dashboardSearch.description')"
+    :title="title || t('dashboardSearch.title')"
+    :description="description || t('dashboardSearch.description')"
+    v-bind="modalProps"
     :class="ui.modal({ class: [props.ui?.modal, props.class] })"
   >
     <template #content>

src/runtime/components/content/ContentSearch.vue

@@ -35,7 +35,7 @@ export interface ContentSearchItem extends Omit<LinkProps, 'custom'>, CommandPal
   icon?: IconProps['name']
 }
 
-export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchLink> extends /* @vue-ignore */ Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'> {
+export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchLink> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'> {
   /**
    * The icon displayed in the input.
    * @defaultValue appConfig.ui.icons.search
@@ -120,7 +120,8 @@ import UCommandPalette from '../CommandPalette.vue'
 const props = withDefaults(defineProps<ContentSearchProps<T>>(), {
   shortcut: 'meta_k',
   colorMode: true,
-  close: true
+  close: true,
+  fullscreen: false
 })
 const slots = defineSlots<ContentSearchSlots>()
 
@@ -133,6 +134,7 @@ const colorMode = useColorMode()
 const appConfig = useAppConfig() as ContentSearch['AppConfig']
 
 const commandPaletteProps = useForwardProps(reactivePick(props, 'icon', 'placeholder', 'autofocus', 'loading', 'loadingIcon', 'close', 'closeIcon'))
+const modalProps = useForwardProps(reactivePick(props, 'overlay', 'transition', 'content', 'dismissible', 'fullscreen', 'modal', 'portal'))
 
 const getProxySlots = () => omit(slots, ['content'])
 
@@ -142,8 +144,9 @@ const fuse = computed(() => defu({}, props.fuse, {
   }
 }))
 
-// eslint-disable-next-line vue/no-dupe-keys
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.contentSearch || {}) })())
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.contentSearch || {}) })({
+  fullscreen: props.fullscreen
+}))
 
 function mapLinksItems(links: T[]): ContentSearchItem[] {
   return links.flatMap(link => [{
@@ -267,8 +270,9 @@ defineExpose({
 <template>
   <UModal
     v-model:open="open"
-    :title="t('contentSearch.title')"
-    :description="t('contentSearch.description')"
+    :title="title || t('contentSearch.title')"
+    :description="description || t('contentSearch.description')"
+    v-bind="modalProps"
     :class="ui.modal({ class: [props.ui?.modal, props.class] })"
   >
     <template #content>

src/theme/content/content-search.ts

@@ -1,6 +1,13 @@
 export default {
   slots: {
-    modal: 'sm:max-w-3xl sm:h-[28rem]',
+    modal: '',
     input: '[&>input]:text-base/5'
+  },
+  variants: {
+    fullscreen: {
+      false: {
+        modal: 'sm:max-w-3xl sm:h-[28rem]'
+      }
+    }
   }
 }

src/theme/dashboard-search.ts

@@ -1,6 +1,13 @@
 export default {
   slots: {
-    modal: 'sm:max-w-3xl sm:h-[28rem]',
+    modal: '',
     input: '[&>input]:text-base/5'
+  },
+  variants: {
+    fullscreen: {
+      false: {
+        modal: 'sm:max-w-3xl sm:h-[28rem]'
+      }
+    }
   }
 }

test/components/DashboardSearch.spec.ts

@@ -40,6 +40,7 @@ describe('DashboardSearch', () => {
     ['with loading', { props: { ...props, loading: true } }],
     ['with loadingIcon', { props: { ...props, loading: true, loadingIcon: 'i-lucide-loading' } }],
     ['without colorMode', { props: { ...props, colorMode: false } }],
+    ['with fullscreen', { props: { ...props, fullscreen: true } }],
     ['with ui', { props: { ...props, ui: { input: '[&>input]:text-lg' } } }],
     ['with class', { props: { ...props, class: 'sm:max-w-5xl' } }]
   ])('renders %s correctly', async (_: string, options: { props?: DashboardSearchProps }) => {

test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap

@@ -28,6 +28,34 @@ exports[`DashboardSearch > renders with class correctly 1`] = `
 </div>"
 `;
 
+exports[`DashboardSearch > renders with fullscreen correctly 1`] = `
+"<div class="fixed inset-0 flex overflow-hidden">
+  <!--v-if-->
+  <!--teleport start-->
+  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
+    <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+      <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div class="relative overflow-hidden flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+        <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1 focus:outline-none">
+          <div role="group" aria-labelledby="reka-listbox-group-v-2" class="p-1 isolate">
+            <div id="reka-listbox-group-v-2" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated">
+              <!--v-if--><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </a>
+          </div>
+          <div role="group" aria-labelledby="reka-listbox-group-v-4" class="p-1 isolate">
+            <div id="reka-listbox-group-v-4" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span></button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span></button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span></button>
+          </div>
+        </div>
+      </div>
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+  </div>
+  <!--teleport end-->
+</div>"
+`;
+
 exports[`DashboardSearch > renders with groups correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!--v-if-->