@nuxt/ui 3.0.0-alpha.9 → 3.0.0-beta.1

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

@@ -6,11 +6,13 @@ export * from '../components/AvatarGroup.vue';
 export * from '../components/Badge.vue';
 export * from '../components/Breadcrumb.vue';
 export * from '../components/Button.vue';
+export * from '../components/Calendar.vue';
 export * from '../components/Card.vue';
 export * from '../components/Carousel.vue';
 export * from '../components/Checkbox.vue';
 export * from '../components/Chip.vue';
 export * from '../components/Collapsible.vue';
+export * from '../components/ColorPicker.vue';
 export * from '../components/CommandPalette.vue';
 export * from '../components/Container.vue';
 export * from '../components/ContextMenu.vue';
@@ -36,6 +38,7 @@ export * from '../components/Separator.vue';
 export * from '../components/Skeleton.vue';
 export * from '../components/Slideover.vue';
 export * from '../components/Slider.vue';
+export * from '../components/Stepper.vue';
 export * from '../components/Switch.vue';
 export * from '../components/Table.vue';
 export * from '../components/Tabs.vue';
@@ -43,5 +46,7 @@ export * from '../components/Textarea.vue';
 export * from '../components/Toast.vue';
 export * from '../components/Toaster.vue';
 export * from '../components/Tooltip.vue';
+export * from '../components/Tree.vue';
 export * from './form';
 export * from './locale';
+export * from './utils';

package/dist/runtime/types/index.js

@@ -6,11 +6,13 @@ export * from "../components/AvatarGroup.vue";
 export * from "../components/Badge.vue";
 export * from "../components/Breadcrumb.vue";
 export * from "../components/Button.vue";
+export * from "../components/Calendar.vue";
 export * from "../components/Card.vue";
 export * from "../components/Carousel.vue";
 export * from "../components/Checkbox.vue";
 export * from "../components/Chip.vue";
 export * from "../components/Collapsible.vue";
+export * from "../components/ColorPicker.vue";
 export * from "../components/CommandPalette.vue";
 export * from "../components/Container.vue";
 export * from "../components/ContextMenu.vue";
@@ -36,6 +38,7 @@ export * from "../components/Separator.vue";
 export * from "../components/Skeleton.vue";
 export * from "../components/Slideover.vue";
 export * from "../components/Slider.vue";
+export * from "../components/Stepper.vue";
 export * from "../components/Switch.vue";
 export * from "../components/Table.vue";
 export * from "../components/Tabs.vue";
@@ -43,5 +46,7 @@ export * from "../components/Textarea.vue";
 export * from "../components/Toast.vue";
 export * from "../components/Toaster.vue";
 export * from "../components/Tooltip.vue";
+export * from "../components/Tree.vue";
 export * from "./form.js";
 export * from "./locale.js";
+export * from "./utils.js";

package/dist/runtime/types/locale.d.ts

@@ -4,11 +4,18 @@ export type Messages = {
         noData: string;
         create: string;
     };
+    calendar: {
+        prevYear: string;
+        nextYear: string;
+        prevMonth: string;
+        nextMonth: string;
+    };
     inputNumber: {
         increment: string;
         decrement: string;
     };
     commandPalette: {
+        placeholder: string;
         noMatch: string;
         noData: string;
         close: string;
@@ -17,6 +24,7 @@ export type Messages = {
         noMatch: string;
         noData: string;
         create: string;
+        search: string;
     };
     toast: {
         close: string;

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

@@ -1,8 +1,9 @@
+import type { VNode } from 'vue';
 export interface TightMap<O = any> {
     [key: string]: TightMap | O;
 }
 export type DeepPartial<T, O = any> = {
-    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P], O> : T[P];
+    [P in keyof T]?: T[P] extends Array<string> ? string : T[P] extends object ? DeepPartial<T[P], O> : T[P];
 } & {
     [key: string]: O | TightMap<O>;
 };
@@ -10,8 +11,6 @@ export type DynamicSlots<T extends {
     slot?: string;
 }, SlotProps, Slot = T['slot']> = Record<string, SlotProps> & (Slot extends string ? Record<Slot, SlotProps> : Record<string, never>);
 export type GetObjectField<MaybeObject, Key extends string> = MaybeObject extends Record<string, any> ? MaybeObject[Key] : never;
-export type AcceptableValue = string | number | boolean | Record<string, any>;
-export type ArrayOrWrapped<T> = T extends any[] ? T : Array<T>;
 export type PartialString<T> = {
     [K in keyof T]?: string;
 };
@@ -22,3 +21,8 @@ export type SelectItemKey<T> = T extends Record<string, any> ? keyof T : string;
 export type SelectModelValueEmits<T, V, M extends boolean = false, DV = T> = {
     'update:modelValue': [payload: SelectModelValue<T, V, M, DV>];
 };
+export type MaybeMultipleModelValue<T, M extends boolean = false> = (T extends infer U ? M extends true ? U[] : U : never);
+export type StringOrVNode = string | VNode | (() => VNode);
+export type EmitsToProps<T> = {
+    [K in keyof T as `on${Capitalize<string & K>}`]: T[K] extends [...args: infer Args] ? (...args: Args) => void : never;
+};

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

@@ -1,4 +1,4 @@
-import type { v1 } from '@standard-schema/spec';
+import type { StandardSchemaV1 } from '@standard-schema/spec';
 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';
@@ -12,6 +12,6 @@ export declare function isZodSchema(schema: any): schema is ZodSchema;
 export declare function isJoiSchema(schema: any): schema is JoiSchema;
 export declare function isJoiError(error: any): error is JoiError;
 export declare function isValibotSchema(schema: any): schema is ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>;
-export declare function isStandardSchema(schema: any): schema is v1.StandardSchema;
-export declare function validateStandarSchema(state: any, schema: v1.StandardSchema): Promise<ValidateReturnSchema<typeof state>>;
-export declare function parseSchema<T extends object>(state: T, schema: FormSchema<T>): Promise<ValidateReturnSchema<typeof state>>;
+export declare function isStandardSchema(schema: any): schema is StandardSchemaV1;
+export declare function validateStandardSchema(state: any, schema: StandardSchemaV1): Promise<ValidateReturnSchema<typeof state>>;
+export declare function validateSchema<T extends object>(state: T, schema: FormSchema<T>): Promise<ValidateReturnSchema<typeof state>>;

package/dist/runtime/utils/form.js

@@ -22,10 +22,8 @@ export function isValibotSchema(schema) {
 export function isStandardSchema(schema) {
   return "~standard" in schema;
 }
-export async function validateStandarSchema(state, schema) {
-  const result = await schema["~standard"].validate({
-    value: state
-  });
+export async function validateStandardSchema(state, schema) {
+  const result = await schema["~standard"].validate(state);
   if (result.issues) {
     return {
       errors: result.issues?.map((issue) => ({
@@ -42,7 +40,7 @@ export async function validateStandarSchema(state, schema) {
 }
 async function validateYupSchema(state, schema) {
   try {
-    const result = schema.validateSync(state, { abortEarly: false });
+    const result = await schema.validate(state, { abortEarly: false });
     return {
       errors: null,
       result
@@ -136,19 +134,19 @@ async function validateValibotSchema(state, schema) {
     result: null
   };
 }
-export function parseSchema(state, schema) {
+export function validateSchema(state, schema) {
   if (isZodSchema(schema)) {
     return validateZodSchema(state, schema);
   } else if (isJoiSchema(schema)) {
     return validateJoiSchema(state, schema);
+  } else if (isStandardSchema(schema)) {
+    return validateStandardSchema(state, schema);
   } else if (isValibotSchema(schema)) {
     return validateValibotSchema(state, schema);
   } else if (isYupSchema(schema)) {
     return validateYupSchema(state, schema);
   } else if (isSuperStructSchema(schema)) {
     return validateSuperstructSchema(state, schema);
-  } else if (isStandardSchema(schema)) {
-    return validateStandarSchema(state, schema);
   } else {
     throw new Error("Form validation failed: Unsupported form schema");
   }

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

@@ -3,4 +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;
+export declare function compare<T>(value?: T, currentValue?: T, comparator?: string | ((a: T, b: T) => boolean)): boolean;

package/dist/runtime/utils/index.js

@@ -1,3 +1,4 @@
+import { isEqual } from "ohash";
 export function pick(data, keys) {
   const result = {};
   for (const key of keys) {
@@ -45,6 +46,18 @@ 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}`);
+export function compare(value, currentValue, comparator) {
+  if (value === void 0 || currentValue === void 0) {
+    return false;
+  }
+  if (typeof value === "string") {
+    return value === currentValue;
+  }
+  if (typeof comparator === "function") {
+    return comparator(value, currentValue);
+  }
+  if (typeof comparator === "string") {
+    return get(value, comparator) === get(currentValue, comparator);
+  }
+  return isEqual(value, currentValue);
 }

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

@@ -0,0 +1 @@
+export declare const tv: import("tailwind-variants").CreateTV<boolean | (string | number | symbol)[] | {} | undefined>;

package/dist/runtime/utils/tv.js

@@ -0,0 +1,4 @@
+import { createTV } from "tailwind-variants";
+import _appConfig from "#build/app.config";
+const appConfigTv = _appConfig;
+export const tv = createTV(appConfigTv.ui?.tv);

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

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

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

@@ -52,9 +52,9 @@ interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
   noPrefetch?: boolean
 }
 
-const appConfig = _appConfig as AppConfig & { ui: { link: Partial<typeof theme> } }
+const appConfigLink = _appConfig as AppConfig & { ui: { link: Partial<typeof theme> } }
 
-const link = tv({ extend: tv(theme), ...(appConfig.ui?.link || {}) })
+const link = tv({ extend: tv(theme), ...(appConfigLink.ui?.link || {}) })
 
 export interface LinkProps extends NuxtLinkProps {
   /**
@@ -73,7 +73,7 @@ export interface LinkProps extends NuxtLinkProps {
   /** 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
+  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. */
@@ -90,9 +90,9 @@ export interface LinkSlots {
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { isEqual } from 'ohash'
-import { useForwardProps } from 'radix-vue'
+import { computed, getCurrentInstance } from 'vue'
+import { isEqual, diff } from 'ohash'
+import { useForwardProps } from 'reka-ui'
 import { reactiveOmit } from '@vueuse/core'
 import { hasProtocol } from 'ufo'
 import { useRoute } from '#imports'
@@ -109,8 +109,23 @@ const props = withDefaults(defineProps<LinkProps>(), {
 })
 defineSlots<LinkSlots>()
 
-const route = useRoute()
-const routerLinkProps = useForwardProps(reactiveOmit(props, 'as', 'type', 'disabled', 'active', 'exact', 'exactQuery', 'exactHash', 'activeClass', 'inactiveClass', 'to'))
+// Check if vue-router is available by checking for the injection key
+const hasRouter = computed(() => {
+  const app = getCurrentInstance()?.appContext.app
+  return !!(app?.config?.globalProperties?.$router)
+})
+
+// Only try to get route if router exists
+const route = computed(() => {
+  if (!hasRouter.value) return null
+  try {
+    return useRoute()
+  } catch {
+    return null
+  }
+})
+
+const routerLinkProps = useForwardProps(reactiveOmit(props, 'as', 'type', 'disabled', 'active', 'exact', 'exactQuery', 'exactHash', 'activeClass', 'inactiveClass', 'to', 'raw', 'class'))
 
 const ui = computed(() => tv({
   extend: link,
@@ -122,21 +137,37 @@ const ui = computed(() => tv({
   }
 }))
 
-const isExternal = computed(() => typeof props.to === 'string' && hasProtocol(props.to, { acceptRelative: true }))
+function isPartiallyEqual(item1: any, item2: any) {
+  const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
+    if (q.type === 'added') {
+      filtered.push(q.key)
+    }
+    return filtered
+  }, [] as string[])
+  return isEqual(item1, item2, { excludeKeys: key => diffedKeys.includes(key) })
+}
+
+const isExternal = computed(() => {
+  if (!props.to) return false
+  return 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) {
+  if (!props.to || !route.value) {
     return false
   }
 
-  if (props.exactQuery && !isEqual(linkRoute.query, route.query)) {
-    return false
+  if (props.exactQuery === 'partial') {
+    if (!isPartiallyEqual(linkRoute.query, route.value.query)) return false
+  } else if (props.exactQuery === true) {
+    if (!isEqual(linkRoute.query, route.value.query)) return false
   }
-  if (props.exactHash && linkRoute.hash !== route.hash) {
+
+  if (props.exactHash && linkRoute.hash !== route.value.hash) {
     return false
   }
 
@@ -151,7 +182,7 @@ function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
   return false
 }
 
-function resolveLinkClass({ route, isActive, isExactActive }: any) {
+function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
   const active = isLinkActive({ route, isActive, isExactActive })
 
   if (props.raw) {
@@ -163,7 +194,39 @@ function resolveLinkClass({ route, isActive, isExactActive }: any) {
 </script>
 
 <template>
-  <RouterLink v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }" v-bind="routerLinkProps" :to="to || '#'" custom>
+  <template v-if="hasRouter && !isExternal">
+    <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 ? href : undefined,
+            navigate,
+            active: isLinkActive({ route: linkRoute, isActive, isExactActive })
+          }"
+        />
+      </template>
+      <ULinkBase
+        v-else
+        v-bind="{
+          ...$attrs,
+          as,
+          type,
+          disabled,
+          href: to ? href : undefined,
+          navigate
+        }"
+        :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
+      >
+        <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
+      </ULinkBase>
+    </RouterLink>
+  </template>
+
+  <template v-else>
     <template v-if="custom">
       <slot
         v-bind="{
@@ -171,9 +234,9 @@ function resolveLinkClass({ route, isActive, isExactActive }: any) {
           as,
           type,
           disabled,
-          href: to ? (isExternal ? to as string : href) : undefined,
-          navigate,
-          active: isLinkActive({ route: linkRoute, isActive, isExactActive })
+          href: to,
+          target: isExternal ? '_blank' : undefined,
+          active: false
         }"
       />
     </template>
@@ -184,12 +247,13 @@ function resolveLinkClass({ route, isActive, isExactActive }: any) {
         as,
         type,
         disabled,
-        href: to ? (isExternal ? to as string : href) : undefined,
-        navigate
+        href: (to as string),
+        target: isExternal ? '_blank' : undefined
       }"
-      :class="resolveLinkClass({ route: linkRoute, isActive: isActive, isExactActive: isExactActive })"
+      :is-external="isExternal"
+      :class="resolveLinkClass()"
     >
-      <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
+      <slot :active="false" />
     </ULinkBase>
-  </RouterLink>
+  </template>
 </template>

package/dist/runtime/vue/composables/useAppConfig.d.ts

@@ -0,0 +1 @@
+export declare const useAppConfig: () => any;

package/dist/runtime/vue/composables/useAppConfig.js

@@ -0,0 +1,2 @@
+import appConfig from "#build/app.config";
+export const useAppConfig = () => appConfig;

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

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

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

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

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

@@ -2,7 +2,26 @@ import type { Ref } from 'vue';
 import type { NuxtApp } from '#app';
 export { useHead } from '@unhead/vue';
 export { useRoute, useRouter } from 'vue-router';
+export { defineShortcuts } from '../composables/defineShortcuts';
+export { useLocale } from '../composables/useLocale';
+export declare const useColorMode: () => {
+    forced: boolean;
+    preference?: undefined;
+    readonly value?: undefined;
+} | {
+    preference: "system" | "light" | "dark";
+    readonly value: import("@vueuse/core").BasicColorMode;
+    forced: boolean;
+};
 export declare const useAppConfig: () => any;
+export declare const useCookie: <T = string>(_name: string, _options?: Record<string, any>) => {
+    value: Ref<T, T>;
+    get: () => T;
+    set: () => void;
+    update: () => void;
+    refresh: () => Promise<Awaited<T>>;
+    remove: () => void;
+};
 export declare const useState: <T>(key: string, init: () => T) => Ref<T>;
 export declare function useNuxtApp(): {
     isHydrating: boolean;

package/dist/runtime/vue/stubs.js

@@ -1,8 +1,45 @@
 import { ref } from "vue";
 import appConfig from "#build/app.config";
+import { useColorMode as useColorModeVueUse } from "@vueuse/core";
 export { useHead } from "@unhead/vue";
 export { useRoute, useRouter } from "vue-router";
+export { defineShortcuts } from "../composables/defineShortcuts.js";
+export { useLocale } from "../composables/useLocale.js";
+export const useColorMode = () => {
+  if (!appConfig.colorMode) {
+    return {
+      forced: true
+    };
+  }
+  const { store, system } = useColorModeVueUse();
+  return {
+    get preference() {
+      return store.value === "auto" ? "system" : store.value;
+    },
+    set preference(value) {
+      store.value = value === "system" ? "auto" : value;
+    },
+    get value() {
+      return store.value === "auto" ? system.value : store.value;
+    },
+    forced: false
+  };
+};
 export const useAppConfig = () => appConfig;
+export const useCookie = (_name, _options = {}) => {
+  const value = ref(null);
+  return {
+    value,
+    get: () => value.value,
+    set: () => {
+    },
+    update: () => {
+    },
+    refresh: () => Promise.resolve(value.value),
+    remove: () => {
+    }
+  };
+};
 const state = {};
 export const useState = (key, init) => {
   if (state[key]) {