@nuxt/ui 3.0.2 → 3.1.1

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

@@ -0,0 +1,93 @@
+import type { ButtonHTMLAttributes } from 'vue';
+import type { RouterLinkProps, RouteLocationRaw } from 'vue-router';
+interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
+    /**
+     * Route Location the link should navigate to when clicked on.
+     */
+    to?: RouteLocationRaw;
+    /**
+     * An alias for `to`. If used with `to`, `href` will be ignored
+     */
+    href?: NuxtLinkProps['to'];
+    /**
+     * Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
+     */
+    external?: boolean;
+    /**
+     * Where to display the linked URL, as the name for a browsing context.
+     */
+    target?: '_blank' | '_parent' | '_self' | '_top' | (string & {}) | null;
+    /**
+     * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
+     */
+    rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null;
+    /**
+     * If set to true, no rel attribute will be added to the link
+     */
+    noRel?: boolean;
+    /**
+     * A class to apply to links that have been prefetched.
+     */
+    prefetchedClass?: string;
+    /**
+     * When enabled will prefetch middleware, layouts and payloads of links in the viewport.
+     */
+    prefetch?: boolean;
+    /**
+     * Allows controlling when to prefetch links. By default, prefetch is triggered only on visibility.
+     */
+    prefetchOn?: 'visibility' | 'interaction' | Partial<{
+        visibility: boolean;
+        interaction: boolean;
+    }>;
+    /**
+     * Escape hatch to disable `prefetch` attribute.
+     */
+    noPrefetch?: boolean;
+}
+export interface LinkProps extends NuxtLinkProps {
+    /**
+     * The element or component this component should render as when not a link.
+     * @defaultValue 'button'
+     */
+    as?: any;
+    /**
+     * The type of the button when not a link.
+     * @defaultValue 'button'
+     */
+    type?: ButtonHTMLAttributes['type'];
+    disabled?: boolean;
+    /** Force the link to be active independent of the current route. */
+    active?: boolean;
+    /** Will only be active if the current route is an exact match. */
+    exact?: boolean;
+    /** Allows controlling how the current route query sets the link as active. */
+    exactQuery?: boolean | 'partial';
+    /** Will only be active if the current route hash is an exact match. */
+    exactHash?: boolean;
+    /** The class to apply when the link is inactive. */
+    inactiveClass?: string;
+    custom?: boolean;
+    /** When `true`, only styles from `class`, `activeClass`, and `inactiveClass` will be applied. */
+    raw?: boolean;
+    class?: any;
+}
+export interface LinkSlots {
+    default(props: {
+        active: boolean;
+    }): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<LinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkProps> & Readonly<{}>, {
+    type: "reset" | "submit" | "button";
+    as: any;
+    activeClass: string;
+    ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
+    active: boolean;
+    inactiveClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LinkBase.vue

@@ -1,43 +1,34 @@
-<script lang="ts">
-import type { LinkProps } from '../types'
+<script>
 
-export interface LinkBaseProps {
-  as?: string
-  type?: string
-  disabled?: boolean
-  onClick?: ((e: MouseEvent) => void | Promise<void>) | Array<((e: MouseEvent) => void | Promise<void>)>
-  href?: string
-  navigate?: (e: MouseEvent) => void
-  target?: LinkProps['target']
-  rel?: LinkProps['rel']
-  active?: boolean
-  isExternal?: boolean
-}
 </script>
 
-<script setup lang="ts">
-import { Primitive } from 'reka-ui'
-
-const props = withDefaults(defineProps<LinkBaseProps>(), {
-  as: 'button',
-  type: 'button'
-})
-
-function onClickWrapper(e: MouseEvent) {
+<script setup>
+import { Primitive } from "reka-ui";
+const props = defineProps({
+  as: { type: String, required: false, default: "button" },
+  type: { type: String, required: false, default: "button" },
+  disabled: { type: Boolean, required: false },
+  onClick: { type: [Function, Array], required: false },
+  href: { type: String, required: false },
+  navigate: { type: Function, required: false },
+  target: { type: [String, Object, null], required: false },
+  rel: { type: [String, Object, null], required: false },
+  active: { type: Boolean, required: false },
+  isExternal: { type: Boolean, required: false }
+});
+function onClickWrapper(e) {
   if (props.disabled) {
-    e.stopPropagation()
-    e.preventDefault()
-    return
+    e.stopPropagation();
+    e.preventDefault();
+    return;
   }
-
   if (props.onClick) {
     for (const onClick of Array.isArray(props.onClick) ? props.onClick : [props.onClick]) {
-      onClick(e)
+      onClick(e);
     }
   }
-
   if (props.href && props.navigate && !props.isExternal) {
-    props.navigate(e)
+    props.navigate(e);
   }
 }
 </script>
@@ -45,18 +36,18 @@ function onClickWrapper(e: MouseEvent) {
 <template>
   <Primitive
     v-bind="href ? {
-      'as': 'a',
-      'href': disabled ? undefined : href,
-      'aria-disabled': disabled ? 'true' : undefined,
-      'role': disabled ? 'link' : undefined,
-      'tabindex': disabled ? -1 : undefined
-    } : as === 'button' ? {
-      as,
-      type,
-      disabled
-    } : {
-      as
-    }"
+  'as': 'a',
+  'href': disabled ? void 0 : href,
+  'aria-disabled': disabled ? 'true' : void 0,
+  'role': disabled ? 'link' : void 0,
+  'tabindex': disabled ? -1 : void 0
+} : as === 'button' ? {
+  as,
+  type,
+  disabled
+} : {
+  as
+}"
     :rel="rel"
     :target="target"
     @click="onClickWrapper"

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

@@ -0,0 +1,25 @@
+import type { LinkProps } from '../types';
+export interface LinkBaseProps {
+    as?: string;
+    type?: string;
+    disabled?: boolean;
+    onClick?: ((e: MouseEvent) => void | Promise<void>) | Array<((e: MouseEvent) => void | Promise<void>)>;
+    href?: string;
+    navigate?: (e: MouseEvent) => void;
+    target?: LinkProps['target'];
+    rel?: LinkProps['rel'];
+    active?: boolean;
+    isExternal?: boolean;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<LinkBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkBaseProps> & Readonly<{}>, {
+    type: string;
+    as: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Modal.vue

@@ -1,123 +1,60 @@
-<script lang="ts">
-import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/ui/modal'
-import { tv } from '../utils/tv'
-import type { ButtonProps } from '../types'
-import type { EmitsToProps } from '../types/utils'
-
-const appConfigModal = _appConfig as AppConfig & { ui: { modal: Partial<typeof theme> } }
-
-const modal = tv({ extend: tv(theme), ...(appConfigModal.ui?.modal || {}) })
-
-export interface ModalProps extends DialogRootProps {
-  title?: string
-  description?: string
-  /** The content of the modal. */
-  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>
-  /**
-   * Render an overlay behind the modal.
-   * @defaultValue true
-   */
-  overlay?: boolean
-  /**
-   * Animate the modal when opening or closing.
-   * @defaultValue true
-   */
-  transition?: boolean
-  /**
-   * When `true`, the modal will take up the full screen.
-   * @defaultValue false
-   */
-  fullscreen?: boolean
-  /**
-   * Render the modal in a portal.
-   * @defaultValue true
-   */
-  portal?: boolean
-  /**
-   * Display a close button to dismiss the modal.
-   * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
-   * @defaultValue true
-   */
-  close?: boolean | Partial<ButtonProps>
-  /**
-   * The icon displayed in the close button.
-   * @defaultValue appConfig.ui.icons.close
-   * @IconifyIcon
-   */
-  closeIcon?: string
-  /**
-   * When `false`, the modal will not close when clicking outside or pressing escape.
-   * @defaultValue true
-   */
-  dismissible?: boolean
-  class?: any
-  ui?: Partial<typeof modal.slots>
-}
-
-export interface ModalEmits extends DialogRootEmits {
-  'after:leave': []
-}
-
-export interface ModalSlots {
-  default(props: { open: boolean }): any
-  content(props?: {}): any
-  header(props?: {}): any
-  title(props?: {}): any
-  description(props?: {}): any
-  close(props: { ui: ReturnType<typeof modal> }): any
-  body(props?: {}): any
-  footer(props?: {}): any
-}
+<script>
+import theme from "#build/ui/modal";
 </script>
 
-<script setup lang="ts">
-import { computed, toRef } from 'vue'
-import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
-import { reactivePick } from '@vueuse/core'
-import { useAppConfig } from '#imports'
-import { useLocale } from '../composables/useLocale'
-import UButton from './Button.vue'
-
-const props = withDefaults(defineProps<ModalProps>(), {
-  close: true,
-  portal: true,
-  overlay: true,
-  transition: true,
-  modal: true,
-  dismissible: true
-})
-const emits = defineEmits<ModalEmits>()
-const slots = defineSlots<ModalSlots>()
-
-const { t } = useLocale()
-const appConfig = useAppConfig()
-
-const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
-const contentProps = toRef(() => props.content)
+<script setup>
+import { computed, toRef } from "vue";
+import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { usePortal } from "../composables/usePortal";
+import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
+const props = defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  content: { type: Object, required: false },
+  overlay: { type: Boolean, required: false, default: true },
+  transition: { type: Boolean, required: false, default: true },
+  fullscreen: { type: Boolean, required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
+  close: { type: [Boolean, Object], required: false, default: true },
+  closeIcon: { type: String, required: false },
+  dismissible: { type: Boolean, required: false, default: true },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  modal: { type: Boolean, required: false, default: true }
+});
+const emits = defineEmits(["after:leave", "close:prevent", "update:open"]);
+const slots = defineSlots();
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen", "modal"), emits);
+const portalProps = usePortal(toRef(() => props.portal));
+const contentProps = toRef(() => props.content);
 const contentEvents = computed(() => {
-  const events = {
-    closeAutoFocus: (e: Event) => e.preventDefault()
-  }
-
+  const defaultEvents = {
+    closeAutoFocus: (e) => e.preventDefault()
+  };
   if (!props.dismissible) {
-    return {
-      pointerDownOutside: (e: Event) => e.preventDefault(),
-      interactOutside: (e: Event) => e.preventDefault(),
-      escapeKeyDown: (e: Event) => e.preventDefault(),
-      ...events
-    }
+    const events = ["pointerDownOutside", "interactOutside", "escapeKeyDown", "closeAutoFocus"];
+    return events.reduce((acc, curr) => {
+      acc[curr] = (e) => {
+        e.preventDefault();
+        emits("close:prevent");
+      };
+      return acc;
+    }, {});
   }
-
-  return events
-})
-
-const ui = computed(() => modal({
+  return defaultEvents;
+});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.modal || {} })({
   transition: props.transition,
   fullscreen: props.fullscreen
-}))
+}));
 </script>
 
 <template>
@@ -126,11 +63,11 @@ const ui = computed(() => modal({
       <slot :open="open" />
     </DialogTrigger>
 
-    <DialogPortal :disabled="!portal">
+    <DialogPortal v-bind="portalProps">
       <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
       <DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-leave="emits('after:leave')" v-on="contentEvents">
-        <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
+        <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
           <DialogTitle v-if="title || !!slots.title">
             <slot name="title">
               {{ title }}
@@ -170,7 +107,7 @@ const ui = computed(() => modal({
                     color="neutral"
                     variant="ghost"
                     :aria-label="t('modal.close')"
-                    v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
+                    v-bind="typeof close === 'object' ? close : {}"
                     :class="ui.close({ class: props.ui?.close })"
                   />
                 </slot>

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

@@ -0,0 +1,93 @@
+import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/modal';
+import type { ButtonProps } from '../types';
+import type { EmitsToProps, ComponentConfig } from '../types/utils';
+type Modal = ComponentConfig<typeof theme, AppConfig, 'modal'>;
+export interface ModalProps extends DialogRootProps {
+    title?: string;
+    description?: string;
+    /** The content of the modal. */
+    content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>;
+    /**
+     * Render an overlay behind the modal.
+     * @defaultValue true
+     */
+    overlay?: boolean;
+    /**
+     * Animate the modal when opening or closing.
+     * @defaultValue true
+     */
+    transition?: boolean;
+    /**
+     * When `true`, the modal will take up the full screen.
+     * @defaultValue false
+     */
+    fullscreen?: boolean;
+    /**
+     * Render the modal in a portal.
+     * @defaultValue true
+     */
+    portal?: boolean | string | HTMLElement;
+    /**
+     * Display a close button to dismiss the modal.
+     * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    close?: boolean | Partial<ButtonProps>;
+    /**
+     * The icon displayed in the close button.
+     * @defaultValue appConfig.ui.icons.close
+     * @IconifyIcon
+     */
+    closeIcon?: string;
+    /**
+     * When `false`, the modal will not close when clicking outside or pressing escape.
+     * @defaultValue true
+     */
+    dismissible?: boolean;
+    class?: any;
+    ui?: Modal['slots'];
+}
+export interface ModalEmits extends DialogRootEmits {
+    'after:leave': [];
+    'close:prevent': [];
+}
+export interface ModalSlots {
+    default(props: {
+        open: boolean;
+    }): any;
+    content(props?: {}): any;
+    header(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    close(props: {
+        ui: {
+            [K in keyof Required<Modal['slots']>]: (props?: Record<string, any>) => string;
+        };
+    }): any;
+    body(props?: {}): any;
+    footer(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    "after:leave": () => any;
+    "close:prevent": () => any;
+}, string, import("vue").PublicProps, Readonly<ModalProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onAfter:leave"?: (() => any) | undefined;
+    "onClose:prevent"?: (() => any) | undefined;
+}>, {
+    close: boolean | Partial<ButtonProps>;
+    modal: boolean;
+    portal: boolean | string | HTMLElement;
+    overlay: boolean;
+    transition: boolean;
+    dismissible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ModalSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};