@nuxt/ui 2.18.3 → 3.0.0-alpha.0

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

@@ -0,0 +1,548 @@
+import { type VariantProps } from 'tailwind-variants';
+import type { AvatarProps, ButtonProps } from '../types.js';
+declare const alert: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        error: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        gray: string;
+    };
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    multiline: {
+        true: {
+            root: string;
+            actions: string;
+        };
+        false: {
+            root: string;
+            actions: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    title: string;
+    description: string;
+    icon: string;
+    avatar: string;
+    avatarSize: string;
+    actions: string;
+    close: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    color: {
+        primary: string;
+        error: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        gray: string;
+    };
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    multiline: {
+        true: {
+            root: string;
+            actions: string;
+        };
+        false: {
+            root: string;
+            actions: string;
+        };
+    };
+}, {
+    color: {
+        primary: string;
+        error: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        gray: string;
+    };
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    multiline: {
+        true: {
+            root: string;
+            actions: string;
+        };
+        false: {
+            root: string;
+            actions: string;
+        };
+    };
+}>, {
+    color: {
+        primary: string;
+        error: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        gray: string;
+    };
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    multiline: {
+        true: {
+            root: string;
+            actions: string;
+        };
+        false: {
+            root: string;
+            actions: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    title: string;
+    description: string;
+    icon: string;
+    avatar: string;
+    avatarSize: string;
+    actions: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        error: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        gray: string;
+    };
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    multiline: {
+        true: {
+            root: string;
+            actions: string;
+        };
+        false: {
+            root: string;
+            actions: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    title: string;
+    description: string;
+    icon: string;
+    avatar: string;
+    avatarSize: string;
+    actions: string;
+    close: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    color: {
+        primary: string;
+        error: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        gray: string;
+    };
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    multiline: {
+        true: {
+            root: string;
+            actions: string;
+        };
+        false: {
+            root: string;
+            actions: string;
+        };
+    };
+}, {
+    color: {
+        primary: string;
+        error: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        gray: string;
+    };
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    multiline: {
+        true: {
+            root: string;
+            actions: string;
+        };
+        false: {
+            root: string;
+            actions: string;
+        };
+    };
+}>, {
+    color: {
+        primary: string;
+        error: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        gray: string;
+    };
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    multiline: {
+        true: {
+            root: string;
+            actions: string;
+        };
+        false: {
+            root: string;
+            actions: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    title: string;
+    description: string;
+    icon: string;
+    avatar: string;
+    avatarSize: string;
+    actions: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        error: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        gray: string;
+    };
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    multiline: {
+        true: {
+            root: string;
+            actions: string;
+        };
+        false: {
+            root: string;
+            actions: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    title: string;
+    description: string;
+    icon: string;
+    avatar: string;
+    avatarSize: string;
+    actions: string;
+    close: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    color: {
+        primary: string;
+        error: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        gray: string;
+    };
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    multiline: {
+        true: {
+            root: string;
+            actions: string;
+        };
+        false: {
+            root: string;
+            actions: string;
+        };
+    };
+}, {
+    color: {
+        primary: string;
+        error: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        gray: string;
+    };
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    multiline: {
+        true: {
+            root: string;
+            actions: string;
+        };
+        false: {
+            root: string;
+            actions: string;
+        };
+    };
+}>, unknown, unknown, undefined>>>;
+type AlertVariants = VariantProps<typeof alert>;
+export interface AlertProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    title?: string;
+    description?: string;
+    icon?: string;
+    avatar?: AvatarProps;
+    color?: AlertVariants['color'];
+    variant?: AlertVariants['variant'];
+    /**
+     * Display a list of actions:
+     * - under the title and description if multiline
+     * - next to the close button if not multiline
+     */
+    actions?: ButtonProps[];
+    /**
+     * Display a close button to dismiss the alert.
+     * `{ size: 'md', color: 'gray', variant: 'link' }`{lang="ts-type"}
+     * @emits `close`
+     * @defaultValue false
+     */
+    close?: ButtonProps | boolean;
+    /**
+     * The icon displayed in the close button.
+     * @defaultValue appConfig.ui.icons.close
+     */
+    closeIcon?: string;
+    class?: any;
+    ui?: Partial<typeof alert.slots>;
+}
+export interface AlertEmits {
+    (e: 'close'): void;
+}
+export interface AlertSlots {
+    leading(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    actions(props?: {}): any;
+    close(props: {
+        ui: any;
+    }): any;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<AlertProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<AlertProps>>> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<AlertSlots> & AlertSlots>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/App.vue

@@ -0,0 +1,32 @@
+<script>
+
+</script>
+
+<script setup lang="ts">
+import { toRef, useId } from 'vue'
+import { ConfigProvider, TooltipProvider, useForwardProps } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import UToaster from './Toaster.vue'
+import UModalProvider from './ModalProvider.vue'
+import USlideoverProvider from './SlideoverProvider.vue'
+
+const props = defineProps<AppProps>()
+defineSlots<AppSlots>()
+
+const configProviderProps = useForwardProps(reactivePick(props, 'dir', 'scrollBody'))
+const tooltipProps = toRef(() => props.tooltip)
+const toasterProps = toRef(() => props.toaster)
+</script>
+
+<template>
+  <ConfigProvider :use-id="() => useId() as string" v-bind="configProviderProps">
+    <TooltipProvider v-bind="tooltipProps">
+      <UToaster v-if="toaster !== null" v-bind="toasterProps">
+        <slot />
+      </UToaster>
+    </TooltipProvider>
+
+    <UModalProvider />
+    <USlideoverProvider />
+  </ConfigProvider>
+</template>

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

@@ -0,0 +1,25 @@
+import type { ConfigProviderProps, TooltipProviderProps } from 'radix-vue';
+import type { ToasterProps } from '../types.js';
+export interface AppProps extends Omit<ConfigProviderProps, 'useId'> {
+    tooltip?: TooltipProviderProps;
+    toaster?: ToasterProps | null;
+}
+export interface AppSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<AppProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<AppProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<AppSlots> & AppSlots>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Avatar.vue

@@ -0,0 +1,48 @@
+<script>
+import { tv } from "tailwind-variants";
+import _appConfig from "#build/app.config";
+import theme from "#build/ui/avatar";
+const appConfig = _appConfig;
+const avatar = tv({ extend: tv(theme), ...appConfig.ui?.avatar || {} });
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { AvatarRoot, AvatarImage, AvatarFallback, useForwardProps } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useAvatarGroup } from '../composables/useAvatarGroup'
+import UIcon from './Icon.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<AvatarProps>()
+
+const fallbackProps = useForwardProps(reactivePick(props, 'delayMs'))
+
+const fallback = computed(() => props.text || (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substring(0, 2))
+
+const { size } = useAvatarGroup(props)
+
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = computed(() => avatar({
+  size: size.value
+}))
+</script>
+
+<template>
+  <AvatarRoot :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <AvatarImage
+      v-if="src"
+      :as="as"
+      :src="src"
+      :alt="alt"
+      v-bind="$attrs"
+      :class="ui.image({ class: props.ui?.image })"
+    />
+
+    <AvatarFallback as-child v-bind="fallbackProps">
+      <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+      <span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback }}</span>
+    </AvatarFallback>
+  </AvatarRoot>
+</template>