@nuxt/ui 3.0.2 → 3.1.1

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

@@ -0,0 +1,182 @@
+import type { NumberFieldRootProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/input-number';
+import type { ButtonProps } from '../types';
+import type { ComponentConfig } from '../types/utils';
+type InputNumber = ComponentConfig<typeof theme, AppConfig, 'inputNumber'>;
+export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /** The placeholder text when the input is empty. */
+    placeholder?: string;
+    color?: InputNumber['variants']['color'];
+    variant?: InputNumber['variants']['variant'];
+    size?: InputNumber['variants']['size'];
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    /**
+     * The orientation of the input menu.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Configure the increment button. The `color` and `size` are inherited.
+     * @defaultValue { variant: 'link' }
+     */
+    increment?: ButtonProps;
+    /**
+     * The icon displayed to increment the value.
+     * @defaultValue appConfig.ui.icons.plus
+     * @IconifyIcon
+     */
+    incrementIcon?: string;
+    /**
+     * Configure the decrement button. The `color` and `size` are inherited.
+     * @defaultValue { variant: 'link' }
+     */
+    decrement?: ButtonProps;
+    /**
+     * The icon displayed to decrement the value.
+     * @defaultValue appConfig.ui.icons.minus
+     * @IconifyIcon
+     */
+    decrementIcon?: string;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    /**
+     * The locale to use for formatting and parsing numbers.
+     * @defaultValue UApp.locale.code
+     */
+    locale?: string;
+    class?: any;
+    ui?: InputNumber['slots'];
+}
+export interface InputNumberEmits {
+    (e: 'update:modelValue', payload: number): void;
+    (e: 'blur', event: FocusEvent): void;
+    (e: 'change', payload: Event): void;
+}
+export interface InputNumberSlots {
+    increment(props?: {}): any;
+    decrement(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumberProps, {
+    inputRef: import("vue").Ref<({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly asChild?: boolean | undefined;
+            readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance | null;
+        $parent: import("vue").ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+            as: import("reka-ui").AsTag | import("vue").Component;
+        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    } & Readonly<{
+        as: import("reka-ui").AsTag | import("vue").Component;
+    }> & Omit<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
+        $slots: {
+            default?(_: {}): any;
+        };
+    }) | null, ({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly asChild?: boolean | undefined;
+            readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance | null;
+        $parent: import("vue").ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+            as: import("reka-ui").AsTag | import("vue").Component;
+        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    } & Readonly<{
+        as: import("reka-ui").AsTag | import("vue").Component;
+    }> & Omit<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
+        $slots: {
+            default?(_: {}): any;
+        };
+    }) | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    blur: (event: FocusEvent) => any;
+    change: (payload: Event) => any;
+    "update:modelValue": (payload: number) => any;
+}, string, import("vue").PublicProps, Readonly<InputNumberProps> & Readonly<{
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((payload: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((payload: number) => any) | undefined;
+}>, {
+    orientation: "vertical" | "horizontal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, InputNumberSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Kbd.vue

@@ -1,54 +1,28 @@
-<script lang="ts">
-import type { VariantProps } from 'tailwind-variants'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/ui/kbd'
-import type { KbdKey } from '../composables/useKbd'
-import { tv } from '../utils/tv'
-
-const appConfigKbd = _appConfig as AppConfig & { ui: { kbd: Partial<typeof theme> } }
-
-const kbd = tv({ extend: tv(theme), ...(appConfigKbd.ui?.kbd || {}) })
-
-type KbdVariants = VariantProps<typeof kbd>
-
-export interface KbdProps {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'kbd'
-   */
-  as?: any
-  value?: KbdKey | string
-  /**
-   * @defaultValue 'outline'
-   */
-  variant?: KbdVariants['variant']
-  /**
-   * @defaultValue 'md'
-   */
-  size?: KbdVariants['size']
-  class?: any
-}
-
-export interface KbdSlots {
-  default(props?: {}): any
-}
+<script>
+import theme from "#build/ui/kbd";
 </script>
 
-<script setup lang="ts">
-import { Primitive } from 'reka-ui'
-import { useKbd } from '../composables/useKbd'
-
-const props = withDefaults(defineProps<KbdProps>(), {
-  as: 'kbd'
-})
-defineSlots<KbdSlots>()
-
-const { getKbdKey } = useKbd()
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { useKbd } from "../composables/useKbd";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false, default: "kbd" },
+  value: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  class: { type: null, required: false }
+});
+defineSlots();
+const { getKbdKey } = useKbd();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.kbd || {} }));
 </script>
 
 <template>
-  <Primitive :as="as" :class="kbd({ variant, size, class: props.class })">
+  <Primitive :as="as" :class="ui({ variant, size, class: props.class })">
     <slot>
       {{ getKbdKey(value) }}
     </slot>

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

@@ -0,0 +1,34 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/kbd';
+import type { KbdKey } from '../composables/useKbd';
+import type { ComponentConfig } from '../types/utils';
+type Kbd = ComponentConfig<typeof theme, AppConfig, 'kbd'>;
+export interface KbdProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'kbd'
+     */
+    as?: any;
+    value?: KbdKey | string;
+    /**
+     * @defaultValue 'outline'
+     */
+    variant?: Kbd['variants']['variant'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: Kbd['variants']['size'];
+    class?: any;
+}
+export interface KbdSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<KbdProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KbdProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, KbdSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Link.vue

@@ -1,175 +1,97 @@
-<script lang="ts">
-import type { ButtonHTMLAttributes } from 'vue'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import type { RouterLinkProps, RouteLocationRaw } from 'vue-router'
-import theme from '#build/ui/link'
-import { tv } from '../utils/tv'
-
-interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
-  /**
-   * Route Location the link should navigate to when clicked on.
-   */
-  to?: RouteLocationRaw // need to manually type to avoid breaking typedPages
-  /**
-   * 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
-}
-
-const appConfigLink = _appConfig as AppConfig & { ui: { link: Partial<typeof theme> } }
-
-const link = tv({ extend: tv(theme), ...(appConfigLink.ui?.link || {}) })
-
-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
-}
+<script>
+import theme from "#build/ui/link";
 </script>
 
-<script setup lang="ts">
-import { computed } from 'vue'
-import { isEqual, diff } from 'ohash/utils'
-import { useForwardProps } from 'reka-ui'
-import { reactiveOmit } from '@vueuse/core'
-import { useRoute } from '#imports'
-import ULinkBase from './LinkBase.vue'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<LinkProps>(), {
-  as: 'button',
-  type: 'button',
-  ariaCurrentValue: 'page',
-  active: undefined,
-  activeClass: '',
-  inactiveClass: ''
-})
-defineSlots<LinkSlots>()
-
-const route = useRoute()
-const nuxtLinkProps = useForwardProps(reactiveOmit(props, 'as', 'type', 'disabled', 'active', 'exact', 'exactQuery', 'exactHash', 'activeClass', 'inactiveClass', 'raw', 'class'))
-
+<script setup>
+import { computed } from "vue";
+import { defu } from "defu";
+import { isEqual, diff } from "ohash/utils";
+import { useForwardProps } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
+import { useRoute, useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+import ULinkBase from "./LinkBase.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "button" },
+  type: { type: null, required: false, default: "button" },
+  disabled: { type: Boolean, required: false },
+  active: { type: Boolean, required: false, default: void 0 },
+  exact: { type: Boolean, required: false },
+  exactQuery: { type: [Boolean, String], required: false },
+  exactHash: { type: Boolean, required: false },
+  inactiveClass: { type: String, required: false, default: "" },
+  custom: { type: Boolean, required: false },
+  raw: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  to: { type: null, required: false },
+  href: { type: null, required: false },
+  external: { type: Boolean, required: false },
+  target: { type: [String, Object, null], required: false },
+  rel: { type: [String, Object, null], required: false },
+  noRel: { type: Boolean, required: false },
+  prefetchedClass: { type: String, required: false },
+  prefetch: { type: Boolean, required: false },
+  prefetchOn: { type: [String, Object], required: false },
+  noPrefetch: { type: Boolean, required: false },
+  activeClass: { type: String, required: false, default: "" },
+  exactActiveClass: { type: String, required: false },
+  ariaCurrentValue: { type: String, required: false, default: "page" },
+  viewTransition: { type: Boolean, required: false },
+  replace: { type: Boolean, required: false }
+});
+defineSlots();
+const route = useRoute();
+const appConfig = useAppConfig();
+const nuxtLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "exactQuery", "exactHash", "activeClass", "inactiveClass", "raw", "class"));
 const ui = computed(() => tv({
-  extend: link,
-  variants: {
-    active: {
-      true: props.activeClass,
-      false: props.inactiveClass
+  extend: tv(theme),
+  ...defu({
+    variants: {
+      active: {
+        true: props.activeClass,
+        false: props.inactiveClass
+      }
     }
-  }
-}))
-
-function isPartiallyEqual(item1: any, item2: any) {
+  }, appConfig.ui?.link || {})
+}));
+function isPartiallyEqual(item1, item2) {
   const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
-    if (q.type === 'added') {
-      filtered.add(q.key)
+    if (q.type === "added") {
+      filtered.add(q.key);
     }
-    return filtered
-  }, new Set<string>())
-
-  const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key)))
-  const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key)))
-
-  return isEqual(item1Filtered, item2Filtered)
+    return filtered;
+  }, /* @__PURE__ */ new Set());
+  const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key)));
+  const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key)));
+  return isEqual(item1Filtered, item2Filtered);
 }
-
-function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
-  if (props.active !== undefined) {
-    return props.active
+function isLinkActive({ route: linkRoute, isActive, isExactActive }) {
+  if (props.active !== void 0) {
+    return props.active;
   }
-
-  if (props.exactQuery === 'partial') {
-    if (!isPartiallyEqual(linkRoute.query, route.query)) return false
+  if (props.exactQuery === "partial") {
+    if (!isPartiallyEqual(linkRoute.query, route.query)) return false;
   } else if (props.exactQuery === true) {
-    if (!isEqual(linkRoute.query, route.query)) return false
+    if (!isEqual(linkRoute.query, route.query)) return false;
   }
-
   if (props.exactHash && linkRoute.hash !== route.hash) {
-    return false
+    return false;
   }
-
   if (props.exact && isExactActive) {
-    return true
+    return true;
   }
-
   if (!props.exact && isActive) {
-    return true
+    return true;
   }
-
-  return false
+  return false;
 }
-
-function resolveLinkClass({ route, isActive, isExactActive }: any) {
-  const active = isLinkActive({ route, isActive, isExactActive })
-
+function resolveLinkClass({ route: route2, isActive, isExactActive }) {
+  const active = isLinkActive({ route: route2, isActive, isExactActive });
   if (props.raw) {
-    return [props.class, active ? props.activeClass : props.inactiveClass]
+    return [props.class, active ? props.activeClass : props.inactiveClass];
   }
-
-  return ui.value({ class: props.class, active, disabled: props.disabled })
+  return ui.value({ class: props.class, active, disabled: props.disabled });
 }
 </script>
 
@@ -178,34 +100,34 @@ function resolveLinkClass({ route, isActive, isExactActive }: any) {
     <template v-if="custom">
       <slot
         v-bind="{
-          ...$attrs,
-          ...(exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {}),
-          as,
-          type,
-          disabled,
-          href,
-          navigate,
-          rel,
-          target,
-          isExternal,
-          active: isLinkActive({ route: linkRoute, isActive, isExactActive })
-        }"
+  ...$attrs,
+  ...exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
+  as,
+  type,
+  disabled,
+  href,
+  navigate,
+  rel,
+  target,
+  isExternal,
+  active: isLinkActive({ route: linkRoute, isActive, isExactActive })
+}"
       />
     </template>
     <ULinkBase
       v-else
       v-bind="{
-        ...$attrs,
-        ...(exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {}),
-        as,
-        type,
-        disabled,
-        href,
-        navigate,
-        rel,
-        target,
-        isExternal
-      }"
+  ...$attrs,
+  ...exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
+  as,
+  type,
+  disabled,
+  href,
+  navigate,
+  rel,
+  target,
+  isExternal
+}"
       :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
     >
       <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />