@nuxt/ui 3.3.3 → 4.0.0-alpha.1

package/dist/runtime/components/color-mode/ColorModeSelect.vue.d.ts

@@ -0,0 +1,5 @@
+import type { SelectMenuProps } from '@nuxt/ui';
+export interface ColorModeSelectProps extends /** @vue-ignore */ Pick<SelectMenuProps<any>, 'color' | 'variant' | 'size' | 'trailingIcon' | 'selectedIcon' | 'content' | 'arrow' | 'portal' | 'disabled' | 'ui'> {
+}
+declare const _default: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/color-mode/ColorModeSwitch.vue

@@ -0,0 +1,45 @@
+<script>
+
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useColorMode, useAppConfig } from "#imports";
+import { useLocale } from "../../composables/useLocale";
+import USwitch from "../Switch.vue";
+defineOptions({ inheritAttrs: false });
+defineProps({});
+const { t } = useLocale();
+const colorMode = useColorMode();
+const appConfig = useAppConfig();
+const isDark = computed({
+  get() {
+    return colorMode.value === "dark";
+  },
+  set(_isDark) {
+    colorMode.preference = _isDark ? "dark" : "light";
+  }
+});
+</script>
+
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <USwitch
+      v-model="isDark"
+      :checked-icon="appConfig.ui.icons.dark"
+      :unchecked-icon="appConfig.ui.icons.light"
+      :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
+      v-bind="$attrs"
+    />
+
+    <template #fallback>
+      <USwitch
+        :checked-icon="appConfig.ui.icons.dark"
+        :unchecked-icon="appConfig.ui.icons.light"
+        :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
+        v-bind="$attrs"
+        disabled
+      />
+    </template>
+  </ClientOnly>
+</template>

package/dist/runtime/components/color-mode/ColorModeSwitch.vue.d.ts

@@ -0,0 +1,5 @@
+import type { SwitchProps } from '@nuxt/ui';
+export interface ColorModeSwitchProps extends /** @vue-ignore */ Pick<SwitchProps, 'as' | 'color' | 'size' | 'disabled' | 'ui'> {
+}
+declare const _default: import("vue").DefineComponent<ColorModeSwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSwitchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/content/ContentNavigation.vue

@@ -0,0 +1,137 @@
+<script>
+import theme from "#build/ui/content/content-navigation";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, useForwardPropsEmits } from "reka-ui";
+import { reactivePick, createReusableTemplate } from "@vueuse/core";
+import { useRoute, useAppConfig } from "#imports";
+import { pickLinkProps } from "../../utils/link";
+import { tv } from "../../utils/tv";
+import { mapContentNavigationItem } from "../../utils/content";
+import UContentNavigation from "./ContentNavigation.vue";
+import ULink from "../Link.vue";
+import ULinkBase from "../LinkBase.vue";
+import UBadge from "../Badge.vue";
+import UIcon from "../Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "nav" },
+  defaultOpen: { type: Boolean, required: false, default: void 0 },
+  trailingIcon: { type: [String, Object], required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  highlight: { type: Boolean, required: false, default: false },
+  highlightColor: { type: null, required: false },
+  collapsible: { type: Boolean, required: false, default: true },
+  level: { type: Number, required: false, default: 0 },
+  navigation: { type: Array, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  type: { type: String, required: false, default: "multiple" },
+  unmountOnHide: { type: Boolean, required: false, default: true }
+});
+const emits = defineEmits(["update:modelValue"]);
+const slots = defineSlots();
+const rootProps = useForwardPropsEmits(reactivePick(props, "collapsible", "disabled", "type", "unmountOnHide"), emits);
+const route = useRoute();
+const appConfig = useAppConfig();
+const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentNavigation || {} })({
+  color: props.color,
+  variant: props.variant,
+  highlight: props.highlight,
+  highlightColor: props.highlightColor || props.color
+}));
+const defaultValue = computed(() => {
+  if (props.defaultOpen === false) {
+    return void 0;
+  }
+  if (props.defaultOpen === void 0) {
+    return props.type === "single" ? "0" : props.navigation?.map((link, index2) => link.defaultOpen !== false && String(index2)).filter(Boolean);
+  }
+  const index = props.navigation?.findIndex((link) => route.path.startsWith(link.path));
+  const tyindex = index === -1 ? 0 : index;
+  return props.type === "multiple" ? [String(tyindex)] : String(tyindex);
+});
+</script>
+
+<template>
+  <DefineLinkTemplate v-slot="{ link, active }">
+    <slot name="link" :link="link" :active="active">
+      <slot name="link-leading" :link="link" :active="active">
+        <UIcon v-if="link.icon" :name="link.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
+      </slot>
+
+      <span v-if="link.title || !!slots['link-title']" :class="ui.linkTitle({ class: [props.ui?.linkTitle, link.ui?.linkTitle], active })">
+        <slot name="link-title" :link="link" :active="active">
+          {{ link.title }}
+        </slot>
+
+        <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.linkTitleExternalIcon({ class: [props.ui?.linkTitleExternalIcon, link.ui?.linkTitleExternalIcon], active })" />
+      </span>
+
+      <span v-if="link.badge || link.children?.length && !disabled || link.trailingIcon || !!slots['link-trailing']" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, link.ui?.linkTrailing] })">
+        <slot name="link-trailing" :link="link" :active="active">
+          <UBadge
+            v-if="link.badge"
+            color="neutral"
+            variant="outline"
+            :size="props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()"
+            v-bind="typeof link.badge === 'string' || typeof link.badge === 'number' ? { label: link.badge } : link.badge"
+            :class="ui.linkTrailingBadge({ class: props.ui?.linkTrailingBadge })"
+          />
+          <UIcon v-if="link.children?.length && !disabled" :name="link.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, link.ui?.linkTrailingIcon] })" />
+          <UIcon v-else-if="link.trailingIcon" :name="link.trailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, link.ui?.linkTrailingIcon] })" />
+        </slot>
+      </span>
+    </slot>
+  </DefineLinkTemplate>
+
+  <Primitive :as="as" v-bind="$attrs" :as-child="level > 0" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <AccordionRoot as="ul" v-bind="rootProps" :default-value="defaultValue" :class="level > 0 ? ui.listWithChildren({ class: props.ui?.listWithChildren }) : ui.list({ class: props.ui?.list })">
+      <template v-for="(link, index) in navigation" :key="index">
+        <AccordionItem v-if="link.children?.length" as="li" :class="ui.itemWithChildren({ class: [props.ui?.itemWithChildren, link.ui?.itemWithChildren], level: level > 0 })" :value="String(index)">
+          <AccordionTrigger
+            as="button"
+            :class="[
+  ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active: link.active, disabled: !!link.disabled }),
+  ui.trigger({ class: [props.ui?.trigger, link.ui?.trigger] })
+]"
+          >
+            <ReuseLinkTemplate :link="link" :active="link.active" />
+          </AccordionTrigger>
+
+          <AccordionContent :class="ui.content({ class: [props.ui?.content, link.ui?.content] })">
+            <UContentNavigation
+              v-bind="rootProps"
+              :navigation="link.children"
+              :default-open="defaultOpen"
+              :level="level + 1"
+              :trailing-icon="trailingIcon"
+              :color="color"
+              :variant="variant"
+              :highlight="highlight"
+              :highlight-color="highlightColor"
+              :ui="props.ui"
+            >
+              <template v-for="(_, name) in slots" #[name]="slotData">
+                <slot :name="name" :link="slotData.link" :active="slotData.active" />
+              </template>
+            </UContentNavigation>
+          </AccordionContent>
+        </AccordionItem>
+
+        <li v-else :class="ui.item({ class: [props.ui?.item, link.ui?.item], level: level > 0 })">
+          <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(mapContentNavigationItem(link))" custom>
+            <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active, disabled: !!link.disabled, level: level > 0 })">
+              <ReuseLinkTemplate :link="link" :active="active" />
+            </ULinkBase>
+          </ULink>
+        </li>
+      </template>
+    </AccordionRoot>
+  </Primitive>
+</template>

package/dist/runtime/components/content/ContentNavigation.vue.d.ts

@@ -0,0 +1,102 @@
+import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import type { ContentNavigationItem } from '@nuxt/content';
+import theme from '#build/ui/content/content-navigation';
+import type { BadgeProps, IconProps, LinkProps } from '../../types';
+import type { ComponentConfig } from '../../types/tv';
+type ContentNavigation = ComponentConfig<typeof theme, AppConfig, 'contentNavigation'>;
+export interface ContentNavigationLink extends ContentNavigationItem {
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /**
+     * Display a badge on the link.
+     * `{ color: 'neutral', variant: 'outline', size: 'sm' }`{lang="ts-type"}
+     */
+    badge?: string | number | BadgeProps;
+    target?: LinkProps['target'];
+    /**
+     * @IconifyIcon
+     */
+    trailingIcon?: IconProps['name'];
+    disabled?: boolean;
+    children?: ContentNavigationLink[];
+    defaultOpen?: boolean;
+    active?: boolean;
+    class?: any;
+    ui?: Pick<ContentNavigation['slots'], 'link' | 'linkLeadingIcon' | 'linkTitle' | 'linkTrailing' | 'linkTrailingIcon' | 'linkTrailingBadge' | 'linkTrailingBadgeSize' | 'linkTrailingIcon' | 'linkTitleExternalIcon' | 'trigger' | 'content' | 'item' | 'itemWithChildren'>;
+}
+export interface ContentNavigationProps<T extends ContentNavigationLink = ContentNavigationLink> extends Pick<AccordionRootProps, 'disabled' | 'type' | 'unmountOnHide'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'nav'
+     */
+    as?: any;
+    /**
+     * When `true`, the tree will be opened based on the current route.
+     * When `false`, the tree will be closed.
+     * When `undefined` (default), the first item will be opened with `type="single"` and the first level will be opened with `type="multiple"`.
+     */
+    defaultOpen?: boolean;
+    /**
+     * The icon displayed to toggle the accordion.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     * @IconifyIcon
+     */
+    trailingIcon?: IconProps['name'];
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: ContentNavigation['variants']['color'];
+    /**
+     * @defaultValue 'pill'
+     */
+    variant?: ContentNavigation['variants']['variant'];
+    /**
+     * Display a line next to the active link.
+     * @defaultValue false
+     */
+    highlight?: boolean;
+    /**
+     * @defaultValue 'primary'
+     */
+    highlightColor?: ContentNavigation['variants']['highlightColor'];
+    /**
+     * When type is "single", allows closing content when clicking trigger for an open item.
+     * When type is "multiple", this prop has no effect.
+     * @defaultValue true
+     */
+    collapsible?: boolean;
+    level?: number;
+    navigation?: T[];
+    class?: any;
+    ui?: ContentNavigation['slots'];
+}
+export interface ContentNavigationEmits extends AccordionRootEmits {
+}
+type SlotProps<T> = (props: {
+    link: T;
+    active?: boolean;
+}) => any;
+export interface ContentNavigationSlots<T extends ContentNavigationLink = ContentNavigationLink> {
+    'link': SlotProps<T>;
+    'link-leading': SlotProps<T>;
+    'link-title': SlotProps<T>;
+    'link-trailing': SlotProps<T>;
+}
+declare const _default: <T extends ContentNavigationLink>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & ContentNavigationProps<T> & {}> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: ContentNavigationSlots<T>;
+    emit: (evt: "update:modelValue", value: string | string[] | undefined) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/content/ContentSearch.vue

@@ -0,0 +1,174 @@
+<script>
+import theme from "#build/ui/content/content-search";
+</script>
+
+<script setup>
+import { computed, useTemplateRef } from "vue";
+import { useForwardProps } from "reka-ui";
+import { defu } from "defu";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig, useColorMode, defineShortcuts } from "#imports";
+import { useContentSearch } from "../../composables/useContentSearch";
+import { useLocale } from "../../composables/useLocale";
+import { omit, transformUI } from "../../utils";
+import { tv } from "../../utils/tv";
+import UModal from "../Modal.vue";
+import UCommandPalette from "../CommandPalette.vue";
+const props = defineProps({
+  icon: { type: [String, Object], required: false },
+  placeholder: { type: String, required: false },
+  autofocus: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: [String, Object], required: false },
+  close: { type: [Boolean, Object], required: false, default: true },
+  closeIcon: { type: [String, Object], required: false },
+  shortcut: { type: String, required: false, default: "meta_k" },
+  links: { type: Array, required: false },
+  navigation: { type: Array, required: false },
+  groups: { type: Array, required: false },
+  files: { type: Array, required: false },
+  fuse: { type: Object, required: false },
+  colorMode: { type: Boolean, required: false, default: true },
+  class: { type: null, required: false },
+  ui: { type: void 0, required: false }
+});
+const slots = defineSlots();
+const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
+const { t } = useLocale();
+const { open } = useContentSearch();
+const colorMode = useColorMode();
+const appConfig = useAppConfig();
+const commandPaletteProps = useForwardProps(reactivePick(props, "icon", "placeholder", "autofocus", "loading", "loadingIcon", "close", "closeIcon"));
+const proxySlots = omit(slots, ["content"]);
+const fuse = computed(() => defu({}, props.fuse, {
+  fuseOptions: {
+    includeMatches: true
+  }
+}));
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSearch || {} })());
+function mapLinksItems(links) {
+  return links.flatMap((link) => [{
+    ...link,
+    suffix: link.description,
+    icon: link.icon || appConfig.ui.icons.file
+  }, ...link.children?.map((child) => ({
+    ...child,
+    prefix: link.label + " >",
+    suffix: child.description,
+    icon: child.icon || link.icon || appConfig.ui.icons.file
+  })) || []]);
+}
+function mapNavigationItems(children, parent) {
+  return children.flatMap((link) => {
+    if (link.children?.length) {
+      return mapNavigationItems(link.children, link);
+    }
+    return props.files?.filter((file) => file.id === link.path || file.id.startsWith(`${link.path}#`))?.map((file) => mapFile(file, link, parent)) || [];
+  });
+}
+function mapFile(file, link, parent) {
+  const prefix = [...new Set([parent?.title, ...file.titles].filter(Boolean))];
+  return {
+    prefix: prefix?.length ? prefix.join(" > ") + " >" : void 0,
+    label: file.id === link.path ? link.title : file.title,
+    suffix: file.content.replaceAll("<", "&lt;").replaceAll(">", "&gt;"),
+    to: file.id,
+    icon: link.icon || parent?.icon || (file.level > 1 ? appConfig.ui.icons.hash : appConfig.ui.icons.file),
+    level: file.level
+  };
+}
+const groups = computed(() => {
+  const groups2 = [];
+  if (props.links?.length) {
+    groups2.push({ id: "links", label: t("contentSearch.links"), items: mapLinksItems(props.links) });
+  }
+  if (props.navigation?.length) {
+    if (props.navigation.some((link) => !!link.children?.length)) {
+      groups2.push(...props.navigation.map((group) => ({ id: group.path, label: group.title, items: mapNavigationItems(group.children || []), postFilter })));
+    } else {
+      groups2.push({ id: "docs", items: mapNavigationItems(props.navigation), postFilter });
+    }
+  }
+  groups2.push(...props.groups || []);
+  if (props.colorMode && !colorMode?.forced) {
+    groups2.push({
+      id: "theme",
+      label: t("contentSearch.theme"),
+      items: [{
+        label: t("colorMode.system"),
+        icon: appConfig.ui.icons.system,
+        active: colorMode.preference === "system",
+        onSelect: () => {
+          colorMode.preference = "system";
+        }
+      }, {
+        label: t("colorMode.light"),
+        icon: appConfig.ui.icons.light,
+        active: colorMode.preference === "light",
+        onSelect: () => {
+          colorMode.preference = "light";
+        }
+      }, {
+        label: t("colorMode.dark"),
+        icon: appConfig.ui.icons.dark,
+        active: colorMode.preference === "dark",
+        onSelect: () => {
+          colorMode.preference = "dark";
+        }
+      }]
+    });
+  }
+  return groups2;
+});
+function postFilter(query, items) {
+  if (!query) {
+    return items?.filter((item) => item.level === 1);
+  }
+  return items;
+}
+function onSelect(item) {
+  if (item.disabled) {
+    return;
+  }
+  open.value = false;
+  searchTerm.value = "";
+}
+defineShortcuts({
+  [props.shortcut]: {
+    usingInput: true,
+    handler: () => open.value = !open.value
+  }
+});
+const commandPaletteRef = useTemplateRef("commandPaletteRef");
+defineExpose({
+  commandPaletteRef
+});
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    :title="t('contentSearch.title')"
+    :description="t('contentSearch.description')"
+    :class="ui.modal({ class: [props.ui?.modal, props.class] })"
+  >
+    <template #content>
+      <slot name="content">
+        <UCommandPalette
+          ref="commandPaletteRef"
+          v-model:search-term="searchTerm"
+          v-bind="commandPaletteProps"
+          :groups="groups"
+          :fuse="fuse"
+          :ui="transformUI(omit(ui, ['modal']), props.ui)"
+          @update:model-value="onSelect"
+          @update:open="open = $event"
+        >
+          <template v-for="(_, name) in proxySlots" #[name]="slotData">
+            <slot :name="name" v-bind="slotData" />
+          </template>
+        </UCommandPalette>
+      </slot>
+    </template>
+  </UModal>
+</template>

package/dist/runtime/components/content/ContentSearch.vue.d.ts

@@ -0,0 +1,114 @@
+import type { ContentNavigationItem } from '@nuxt/content';
+import type { AppConfig } from '@nuxt/schema';
+import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
+import theme from '#build/ui/content/content-search';
+import type { ButtonProps, InputProps, LinkProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps } from '../../types';
+import type { ComponentConfig } from '../../types/tv';
+type ContentSearch = ComponentConfig<typeof theme, AppConfig, 'contentSearch'>;
+export interface ContentSearchLink extends Omit<LinkProps, 'custom'> {
+    label?: string;
+    description?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    children?: ContentSearchLink[];
+}
+export interface ContentSearchFile {
+    id: string;
+    title: string;
+    titles: string[];
+    level: number;
+    content: string;
+}
+export interface ContentSearchItem extends Omit<LinkProps, 'custom'>, CommandPaletteItem {
+    level?: number;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+}
+export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchLink> extends /* @vue-ignore */ Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'> {
+    /**
+     * The icon displayed in the input.
+     * @defaultValue appConfig.ui.icons.search
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /**
+     * The placeholder text for the input.
+     * @defaultValue t('commandPalette.placeholder')
+     */
+    placeholder?: InputProps['placeholder'];
+    /**
+     * Automatically focus the input when component is mounted.
+     * @defaultValue true
+     */
+    autofocus?: boolean;
+    /** When `true`, the loading icon will be displayed. */
+    loading?: boolean;
+    /**
+     * The icon when the `loading` prop is `true`.
+     * @defaultValue appConfig.ui.icons.loading
+     * @IconifyIcon
+     */
+    loadingIcon?: IconProps['name'];
+    /**
+     * Display a close button in the input (useful when inside a Modal for example).
+     * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+     * @emits 'update:open'
+     * @defaultValue true
+     */
+    close?: boolean | Partial<ButtonProps>;
+    /**
+     * The icon displayed in the close button.
+     * @defaultValue appConfig.ui.icons.close
+     * @IconifyIcon
+     */
+    closeIcon?: IconProps['name'];
+    /**
+     * Keyboard shortcut to open the search (used by [`defineShortcuts`](https://ui.nuxt.com/docs/composables/define-shortcuts))
+     * @defaultValue 'meta_k'
+     */
+    shortcut?: string;
+    /** Links group displayed as the first group in the command palette. */
+    links?: T[];
+    navigation?: ContentNavigationItem[];
+    /** Custom groups displayed between navigation and color mode group. */
+    groups?: CommandPaletteGroup<ContentSearchItem>[];
+    files?: ContentSearchFile[];
+    /**
+     * Options for [useFuse](https://vueuse.org/integrations/useFuse) passed to the [CommandPalette](https://ui.nuxt.com/docs/components/command-palette).
+     * @defaultValue { fuseOptions: { includeMatches: true } }
+     */
+    fuse?: UseFuseOptions<T>;
+    /**
+     * When `true`, the theme command will be added to the groups.
+     * @defaultValue true
+     */
+    colorMode?: boolean;
+    class?: any;
+    ui?: ContentSearch['slots'] & CommandPaletteProps<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem>['ui'];
+}
+export type ContentSearchSlots = CommandPaletteSlots<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem> & {
+    content(props?: {}): any;
+};
+declare const _default: <T extends ContentSearchLink>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:searchTerm"> & (ContentSearchProps<T> & {
+        searchTerm?: string;
+    }) & {}> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        commandPaletteRef: Readonly<import("vue").ShallowRef<import("vue").ShallowUnwrapRef<{}> | null>>;
+    }>): void;
+    attrs: any;
+    slots: ContentSearchSlots;
+    emit: (evt: "update:searchTerm", value: string) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/content/ContentSearchButton.vue

@@ -0,0 +1,81 @@
+<script>
+import theme from "#build/ui/content/content-search-button";
+</script>
+
+<script setup>
+import { computed, toRef } from "vue";
+import { useForwardProps } from "reka-ui";
+import { defu } from "defu";
+import { reactivePick, createReusableTemplate } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useContentSearch } from "../../composables/useContentSearch";
+import { useLocale } from "../../composables/useLocale";
+import { omit, transformUI } from "../../utils";
+import { tv } from "../../utils/tv";
+import UButton from "../Button.vue";
+import UKbd from "../Kbd.vue";
+import UTooltip from "../Tooltip.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  icon: { type: [String, Object], required: false },
+  label: { type: String, required: false },
+  color: { type: null, required: false, default: "neutral" },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  collapsed: { type: Boolean, required: false, default: true },
+  tooltip: { type: [Boolean, Object], required: false, default: false },
+  kbds: { type: Array, required: false, default: () => ["meta", "k"] },
+  ui: { type: void 0, required: false },
+  class: { type: null, required: false }
+});
+const slots = defineSlots();
+const [DefineButtonTemplate, ReuseButtonTemplate] = createReusableTemplate();
+const proxySlots = omit(slots, ["trailing"]);
+const rootProps = useForwardProps(reactivePick(props, "color", "size"));
+const tooltipProps = toRef(() => defu(typeof props.tooltip === "boolean" ? {} : props.tooltip, { delayDuration: 0, content: { side: "right" } }));
+const { t } = useLocale();
+const { open } = useContentSearch();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSearchButton || {} })());
+</script>
+
+<template>
+  <DefineButtonTemplate>
+    <UButton
+      :icon="icon || appConfig.ui.icons.search"
+      :label="label || t('contentSearchButton.label')"
+      :variant="variant || (collapsed ? 'ghost' : 'outline')"
+      v-bind="{
+  ...rootProps,
+  ...collapsed ? {
+    'square': true,
+    'label': void 0,
+    'aria-label': label || t('contentSearchButton.label')
+  } : {},
+  ...$attrs
+}"
+      :class="ui.base({ class: [props.ui?.base, props.class] })"
+      :ui="transformUI(ui, props.ui)"
+      @click="open = true"
+    >
+      <template v-for="(_, name) in proxySlots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+
+      <template v-if="!collapsed" #trailing>
+        <div :class="ui.trailing({ class: props.ui?.trailing })">
+          <slot name="trailing">
+            <template v-if="kbds?.length">
+              <UKbd v-for="(kbd, index) in kbds" :key="index" variant="subtle" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+            </template>
+          </slot>
+        </div>
+      </template>
+    </UButton>
+  </DefineButtonTemplate>
+
+  <UTooltip v-if="collapsed && tooltip" :text="label || t('contentSearchButton.label')" v-bind="tooltipProps">
+    <ReuseButtonTemplate />
+  </UTooltip>
+  <ReuseButtonTemplate v-else />
+</template>