@nuxt/ui 3.0.0-alpha.6 → 3.0.0-alpha.8

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

@@ -3,10 +3,12 @@ import type { ZodSchema } from 'zod';
 import type { ValidationError as JoiError, Schema as JoiSchema } from 'joi';
 import type { ObjectSchema as YupObjectSchema, ValidationError as YupError } from 'yup';
 import type { GenericSchema as ValibotSchema, GenericSchemaAsync as ValibotSchemaAsync, SafeParser as ValibotSafeParser, SafeParserAsync as ValibotSafeParserAsync } from 'valibot';
+import type { Struct } from 'superstruct';
 import type { FormError } from '../types/form';
 export declare function isYupSchema(schema: any): schema is YupObjectSchema<any>;
 export declare function isYupError(error: any): error is YupError;
 export declare function getYupErrors(state: any, schema: YupObjectSchema<any>): Promise<FormError[]>;
+export declare function isSuperStructSchema(schema: any): schema is Struct<any, any>;
 export declare function isZodSchema(schema: any): schema is ZodSchema;
 export declare function getZodErrors(state: any, schema: ZodSchema): Promise<FormError[]>;
 export declare function isJoiSchema(schema: any): schema is JoiSchema;
@@ -16,3 +18,4 @@ export declare function isValibotSchema(schema: any): schema is ValibotSchema |
 export declare function getValibotErrors(state: any, schema: ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>): Promise<FormError[]>;
 export declare function isStandardSchema(schema: any): schema is StandardSchema;
 export declare function getStandardErrors(state: any, schema: StandardSchema): Promise<FormError[]>;
+export declare function getSuperStructErrors(state: any, schema: Struct<any, any>): Promise<FormError[]>;

package/dist/runtime/utils/form.js

@@ -19,6 +19,9 @@ export async function getYupErrors(state, schema) {
     }
   }
 }
+export function isSuperStructSchema(schema) {
+  return "schema" in schema && typeof schema.coercer === "function" && typeof schema.validator === "function" && typeof schema.refiner === "function";
+}
 export function isZodSchema(schema) {
   return schema.parse !== void 0;
 }
@@ -74,3 +77,14 @@ export async function getStandardErrors(state, schema) {
     message: issue.message
   })) || [];
 }
+export async function getSuperStructErrors(state, schema) {
+  const [err] = schema.validate(state);
+  if (err) {
+    const errors = err.failures();
+    return errors.map((error) => ({
+      message: error.message,
+      name: error.path.join(".")
+    }));
+  }
+  return [];
+}

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

@@ -3,3 +3,4 @@ export declare function omit<Data extends object, Keys extends keyof Data>(data:
 export declare function get(object: Record<string, any> | undefined, path: (string | number)[] | string, defaultValue?: any): any;
 export declare function set(object: Record<string, any>, path: (string | number)[] | string, value: any): void;
 export declare function looseToNumber(val: any): any;
+export declare function escapeRegExp(string: string): string;

package/dist/runtime/utils/index.js

@@ -45,3 +45,6 @@ export function looseToNumber(val) {
   const n = Number.parseFloat(val);
   return Number.isNaN(n) ? val : n;
 }
+export function escapeRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, (match) => `\\${match}`);
+}

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

@@ -3,6 +3,7 @@ export declare function pickLinkProps(link: LinkProps & {
     ariaLabel?: string;
     title?: string;
 }): {
+    replace: any;
     type: any;
     title: any;
     active: any;
@@ -23,7 +24,6 @@ export declare function pickLinkProps(link: LinkProps & {
     prefetch: any;
     prefetchedClass: any;
     rel: any;
-    replace: any;
     target: any;
     to: any;
 };

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+export interface IconProps {
+  name: string
+}
+</script>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+
+defineProps<IconProps>()
+</script>
+
+<template>
+  <Icon :icon="name.replace(/^i-/, '')" />
+</template>

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

@@ -0,0 +1,195 @@
+<script lang="ts">
+import type { ButtonHTMLAttributes } from 'vue'
+import { tv } from 'tailwind-variants'
+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'
+
+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 appConfig = _appConfig as AppConfig & { ui: { link: Partial<typeof theme> } }
+
+const link = tv({ extend: tv(theme), ...(appConfig.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
+  /** Will only be active if the current route query is an exact match. */
+  exactQuery?: boolean
+  /** 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>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { isEqual } from 'ohash'
+import { useForwardProps } from 'radix-vue'
+import { reactiveOmit } from '@vueuse/core'
+import { hasProtocol } from 'ufo'
+import { useRoute } from '#imports'
+import { RouterLink } from 'vue-router'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<LinkProps>(), {
+  as: 'button',
+  type: 'button',
+  active: undefined,
+  activeClass: '',
+  inactiveClass: ''
+})
+defineSlots<LinkSlots>()
+
+const route = useRoute()
+const routerLinkProps = useForwardProps(reactiveOmit(props, 'as', 'type', 'disabled', 'active', 'exact', 'exactQuery', 'exactHash', 'activeClass', 'inactiveClass', 'to'))
+
+const ui = computed(() => tv({
+  extend: link,
+  variants: {
+    active: {
+      true: props.activeClass,
+      false: props.inactiveClass
+    }
+  }
+}))
+
+const isExternal = computed(() => typeof props.to === 'string' && hasProtocol(props.to, { acceptRelative: true }))
+
+function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
+  if (props.active !== undefined) {
+    return props.active
+  }
+
+  if (!props.to) {
+    return false
+  }
+
+  if (props.exactQuery && !isEqual(linkRoute.query, route.query)) {
+    return false
+  }
+  if (props.exactHash && linkRoute.hash !== route.hash) {
+    return false
+  }
+
+  if (props.exact && isExactActive) {
+    return true
+  }
+
+  if (!props.exact && isActive) {
+    return true
+  }
+
+  return false
+}
+
+function resolveLinkClass({ route, isActive, isExactActive }: any) {
+  const active = isLinkActive({ route, isActive, isExactActive })
+
+  if (props.raw) {
+    return [props.class, active ? props.activeClass : props.inactiveClass]
+  }
+
+  return ui.value({ class: props.class, active, disabled: props.disabled })
+}
+</script>
+
+<template>
+  <RouterLink v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }" v-bind="routerLinkProps" :to="to || '#'" custom>
+    <template v-if="custom">
+      <slot
+        v-bind="{
+          ...$attrs,
+          as,
+          type,
+          disabled,
+          href: to ? (isExternal ? to as string : href) : undefined,
+          navigate,
+          active: isLinkActive({ route: linkRoute, isActive, isExactActive })
+        }"
+      />
+    </template>
+    <ULinkBase
+      v-else
+      v-bind="{
+        ...$attrs,
+        as,
+        type,
+        disabled,
+        href: to ? (isExternal ? to as string : href) : undefined,
+        navigate
+      }"
+      :class="resolveLinkClass({ route: linkRoute, isActive: isActive, isExactActive: isExactActive })"
+    >
+      <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
+    </ULinkBase>
+  </RouterLink>
+</template>

package/dist/runtime/vue/plugins/color-mode.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    install(): void;
+};
+export default _default;

package/dist/runtime/vue/plugins/color-mode.js

@@ -0,0 +1,6 @@
+import { useDark } from "@vueuse/core";
+export default {
+  install() {
+    useDark();
+  }
+};

package/dist/runtime/vue/plugins/head.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    install(app: import("vue").App<any>): void;
+};
+export default _default;

package/dist/runtime/vue/plugins/head.js

@@ -0,0 +1,6 @@
+import { createHead } from "@unhead/vue";
+export default {
+  install(app) {
+    app.use(createHead());
+  }
+};

package/dist/runtime/vue/stubs.d.ts

@@ -0,0 +1,15 @@
+import type { Ref } from 'vue';
+import type { NuxtApp } from '#app';
+export { useHead } from '@unhead/vue';
+export { useRoute, useRouter } from 'vue-router';
+export declare const useAppConfig: () => any;
+export declare const useState: <T>(key: string, init: () => T) => Ref<T>;
+export declare function useNuxtApp(): {
+    isHydrating: boolean;
+    payload: {
+        serverRendered: boolean;
+    };
+};
+export declare function defineNuxtPlugin(plugin: (nuxtApp: NuxtApp) => void): {
+    install(app: import("vue").App<any>): void;
+};

package/dist/runtime/vue/stubs.js

@@ -0,0 +1,27 @@
+import { ref } from "vue";
+import appConfig from "#build/app.config";
+export { useHead } from "@unhead/vue";
+export { useRoute, useRouter } from "vue-router";
+export const useAppConfig = () => appConfig;
+const state = {};
+export const useState = (key, init) => {
+  if (state[key]) {
+    return state[key];
+  }
+  const value = ref(init());
+  state[key] = value;
+  return value;
+};
+export function useNuxtApp() {
+  return {
+    isHydrating: true,
+    payload: { serverRendered: false }
+  };
+}
+export function defineNuxtPlugin(plugin) {
+  return {
+    install(app) {
+      plugin({ vueApp: app });
+    }
+  };
+}