@nuxt/ui 3.3.3 → 4.0.0-alpha.1

package/dist/runtime/utils/ai.d.ts

@@ -0,0 +1,2 @@
+import type { UIMessage } from 'ai';
+export declare function getTextFromMessage(message: UIMessage): string;

package/dist/runtime/utils/ai.js

@@ -0,0 +1,3 @@
+export function getTextFromMessage(message) {
+  return message.parts.filter((part) => part.type === "text").map((part) => part.text).join("");
+}

package/dist/runtime/utils/content.d.ts

@@ -0,0 +1,14 @@
+import type { ContentNavigationItem } from '@nuxt/content';
+type MapContentNavigationItemOptions = {
+    labelAttribute?: string;
+    deep?: number;
+};
+export declare function mapContentNavigationItem(item: ContentNavigationItem, options?: MapContentNavigationItemOptions, currentDepth?: number): Omit<ContentNavigationItem, "title" | "path"> & {
+    label?: string;
+    to?: string;
+};
+export declare function mapContentNavigation(navigation: ContentNavigationItem[], options?: MapContentNavigationItemOptions): (Omit<ContentNavigationItem, "title" | "path"> & {
+    label?: string;
+    to?: string;
+})[];
+export {};

package/dist/runtime/utils/content.js

@@ -0,0 +1,25 @@
+export function mapContentNavigationItem(item, options, currentDepth = 0) {
+  const navMap = {
+    [options?.labelAttribute || "title"]: "label",
+    path: "to"
+  };
+  const link = Object.keys(item).reduce((link2, key) => {
+    if (item[key]) {
+      const mappedKey = navMap[key] || key;
+      link2[mappedKey] = item[key];
+    }
+    return link2;
+  }, {});
+  const shouldRecurse = typeof options?.deep === "undefined" || currentDepth < options.deep;
+  if (shouldRecurse && Array.isArray(item.children)) {
+    link.children = item.children.map(
+      (child) => mapContentNavigationItem(child, options, currentDepth + 1)
+    );
+  } else {
+    link.children = [];
+  }
+  return link;
+}
+export function mapContentNavigation(navigation, options) {
+  return navigation.map((item) => mapContentNavigationItem(item, options));
+}

package/dist/runtime/utils/dashboard.d.ts

@@ -0,0 +1,10 @@
+import type { Ref } from 'vue';
+import type { UseResizableProps } from '../composables/useResizable';
+export interface DashboardContext extends Pick<UseResizableProps, 'storage' | 'storageKey' | 'persistent' | 'unit'> {
+    sidebarOpen?: Ref<boolean>;
+    sidebarCollapsed?: Ref<boolean>;
+    toggleSearch?: () => void;
+    toggleSidebar?: () => void;
+    collapseSidebar?: (collapsed: boolean) => void;
+}
+export declare const useDashboard: <T extends DashboardContext | null | undefined = DashboardContext>(fallback?: T | undefined) => T extends null ? DashboardContext | null : DashboardContext, provideDashboardContext: (contextValue: DashboardContext) => DashboardContext;

package/dist/runtime/utils/dashboard.js

@@ -0,0 +1,2 @@
+import { createContext } from "reka-ui";
+export const [useDashboard, provideDashboardContext] = createContext("DashboardGroup");

package/dist/runtime/utils/index.d.ts

@@ -12,3 +12,6 @@ export declare function getDisplayValue<T, V>(items: T[], value: V | undefined |
 }): string | undefined;
 export declare function isArrayOfArray<A>(item: A[] | A[][]): item is A[][];
 export declare function mergeClasses(appConfigClass?: string | string[], propClass?: string): "" | (string | undefined)[];
+export declare function getSlotChildrenText(children: any): any;
+export declare function transformUI(ui: any, uiProp?: any): any;
+export * from './content';

package/dist/runtime/utils/index.js

@@ -120,3 +120,17 @@ export function mergeClasses(appConfigClass, propClass) {
     propClass
   ].filter(Boolean);
 }
+export function getSlotChildrenText(children) {
+  return children.map((node) => {
+    if (!node.children || typeof node.children === "string") return node.children || "";
+    else if (Array.isArray(node.children)) return getSlotChildrenText(node.children);
+    else if (node.children.default) return getSlotChildrenText(node.children.default());
+  }).join("");
+}
+export function transformUI(ui, uiProp) {
+  return Object.entries(ui).reduce((acc, [key, value]) => {
+    acc[key] = typeof value === "function" ? value({ class: uiProp?.[key] }) : value;
+    return acc;
+  }, uiProp || {});
+}
+export * from "./content.js";

package/dist/runtime/vue/components/Icon.vue

@@ -5,10 +5,11 @@
 <script setup>
 import { Icon as IconifyIcon } from "@iconify/vue";
 defineProps({
-  name: { type: String, required: true }
+  name: { type: [String, Object], required: true }
 });
 </script>
 
 <template>
-  <IconifyIcon :icon="name.replace(/^i-/, '')" />
+  <IconifyIcon v-if="typeof name === 'string'" :icon="name.replace(/^i-/, '')" />
+  <component :is="name" v-else />
 </template>

package/dist/runtime/vue/components/Icon.vue.d.ts

@@ -1,5 +1,6 @@
+import type { IconProps as NuxtIconProps } from '../../types';
 export interface IconProps {
-    name: string;
+    name: NuxtIconProps['name'];
 }
 declare const _default: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -0,0 +1,35 @@
+<script>
+
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig, useColorMode } from "#imports";
+import { useLocale } from "../../../composables/useLocale";
+import UButton from "../../../components/Button.vue";
+defineProps({
+  color: { type: null, required: false, default: "neutral" },
+  variant: { type: null, required: false, default: "ghost" }
+});
+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>
+  <UButton
+    :icon="isDark ? appConfig.ui.icons.dark : appConfig.ui.icons.light"
+    :color="color"
+    :variant="variant"
+    :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
+    @click="isDark = !isDark"
+  />
+</template>

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

@@ -0,0 +1,16 @@
+import type { ButtonProps } from '../../../types';
+export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * @defaultValue 'ghost'
+     */
+    variant?: ButtonProps['variant'];
+}
+declare const _default: import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,38 @@
+<script>
+
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig, useColorMode } from "#imports";
+import { useLocale } from "../../../composables/useLocale";
+import USelectMenu from "../../../components/SelectMenu.vue";
+defineOptions({ inheritAttrs: false });
+defineProps({});
+const { t } = useLocale();
+const colorMode = useColorMode();
+const appConfig = useAppConfig();
+const items = computed(() => [
+  { label: t("colorMode.system"), value: "system", icon: appConfig.ui.icons.system },
+  { label: t("colorMode.light"), value: "light", icon: appConfig.ui.icons.light },
+  { label: t("colorMode.dark"), value: "dark", icon: appConfig.ui.icons.dark }
+]);
+const preference = computed({
+  get() {
+    return items.value.find((option) => option.value === colorMode.preference) || items.value[0];
+  },
+  set(option) {
+    colorMode.preference = option.value;
+  }
+});
+</script>
+
+<template>
+  <USelectMenu
+    v-model="preference"
+    :icon="preference?.icon"
+    :search-input="false"
+    v-bind="$attrs"
+    :items="items"
+  />
+</template>

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

@@ -0,0 +1,5 @@
+import type { SelectMenuProps } from '../../../types';
+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/vue/components/color-mode/ColorModeSwitch.vue

@@ -0,0 +1,33 @@
+<script>
+
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig, useColorMode } from "#imports";
+import { useLocale } from "../../../composables/useLocale";
+import USwitch from "../../../components/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>
+  <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>

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

@@ -0,0 +1,5 @@
+import type { SwitchProps } from '../../../types';
+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/vue/stubs.d.ts

@@ -12,7 +12,7 @@ export declare const useColorMode: () => {
     preference?: undefined;
     readonly value?: undefined;
 } | {
-    preference: "system" | "light" | "dark";
+    preference: "dark" | "light" | "system";
     readonly value: import("@vueuse/core").BasicColorMode;
     forced: boolean;
 };