@nuxt/ui 3.0.0-alpha.12 → 3.0.0-alpha.13

package/dist/runtime/composables/useToast.d.ts

@@ -1,11 +1,12 @@
-import type { ToastProps } from '../types';
-export interface Toast extends Omit<ToastProps, 'defaultOpen'> {
+import type { ToastProps, ToastEmits } from '../types';
+import type { EmitsToProps } from '../types/utils';
+export interface Toast extends Omit<ToastProps, 'defaultOpen'>, EmitsToProps<ToastEmits> {
     id: string | number;
-    click?: (toast: Toast) => void;
+    onClick?: (toast: Toast) => void;
 }
 export declare function useToast(): {
     toasts: import("vue").Ref<Toast[], Toast[]>;
-    add: (toast: Partial<Toast>) => Promise<Toast>;
+    add: (toast: Partial<Toast>) => Toast;
     update: (id: string | number, toast: Omit<Partial<Toast>, "id">) => void;
     remove: (id: string | number) => void;
     clear: () => void;

package/dist/runtime/composables/useToast.js

@@ -18,14 +18,14 @@ export function useToast() {
     }
     running.value = false;
   }
-  async function add(toast) {
+  function add(toast) {
     const body = {
       id: generateId(),
       open: true,
       ...toast
     };
     queue.push(body);
-    await processQueue();
+    processQueue();
     return body;
   }
   function update(id, toast) {

package/dist/runtime/index.css

@@ -1 +1 @@
-@import "./keyframes.css";@variant light (&:where(.light, .light *));@variant dark (&:where(.dark, .dark *));@layer base{body{@apply antialiased text-[var(--ui-text)] bg-[var(--ui-bg)] scheme-light dark:scheme-dark}.light,:root{--ui-text-dimmed:var(--ui-color-neutral-400);--ui-text-muted:var(--ui-color-neutral-500);--ui-text-toned:var(--ui-color-neutral-600);--ui-text:var(--ui-color-neutral-700);--ui-text-highlighted:var(--ui-color-neutral-900);--ui-bg:var(--color-white);--ui-bg-muted:var(--ui-color-neutral-50);--ui-bg-elevated:var(--ui-color-neutral-100);--ui-bg-accented:var(--ui-color-neutral-200);--ui-bg-inverted:var(--ui-color-neutral-900);--ui-border:var(--ui-color-neutral-200);--ui-border-muted:var(--ui-color-neutral-200);--ui-border-accented:var(--ui-color-neutral-300);--ui-border-inverted:var(--ui-color-neutral-900);--ui-radius:var(--radius-sm);--ui-container:var(--container-7xl)}.dark{--ui-text-dimmed:var(--ui-color-neutral-500);--ui-text-muted:var(--ui-color-neutral-400);--ui-text-toned:var(--ui-color-neutral-300);--ui-text:var(--ui-color-neutral-200);--ui-text-highlighted:var(--color-white);--ui-bg:var(--ui-color-neutral-900);--ui-bg-muted:var(--ui-color-neutral-800);--ui-bg-elevated:var(--ui-color-neutral-800);--ui-bg-accented:var(--ui-color-neutral-700);--ui-bg-inverted:var(--color-white);--ui-border:var(--ui-color-neutral-800);--ui-border-muted:var(--ui-color-neutral-700);--ui-border-accented:var(--ui-color-neutral-700);--ui-border-inverted:var(--color-white)}}
+@import "#build/ui.css";@import "./keyframes.css";@variant light (&:where(.light, .light *));@variant dark (&:where(.dark, .dark *));@layer base{body{@apply antialiased text-(--ui-text) bg-(--ui-bg) scheme-light dark:scheme-dark}.light,:root{--ui-text-dimmed:var(--ui-color-neutral-400);--ui-text-muted:var(--ui-color-neutral-500);--ui-text-toned:var(--ui-color-neutral-600);--ui-text:var(--ui-color-neutral-700);--ui-text-highlighted:var(--ui-color-neutral-900);--ui-bg:var(--color-white);--ui-bg-muted:var(--ui-color-neutral-50);--ui-bg-elevated:var(--ui-color-neutral-100);--ui-bg-accented:var(--ui-color-neutral-200);--ui-bg-inverted:var(--ui-color-neutral-900);--ui-border:var(--ui-color-neutral-200);--ui-border-muted:var(--ui-color-neutral-200);--ui-border-accented:var(--ui-color-neutral-300);--ui-border-inverted:var(--ui-color-neutral-900);--ui-radius:var(--radius-sm);--ui-container:var(--container-7xl)}.dark{--ui-text-dimmed:var(--ui-color-neutral-500);--ui-text-muted:var(--ui-color-neutral-400);--ui-text-toned:var(--ui-color-neutral-300);--ui-text:var(--ui-color-neutral-200);--ui-text-highlighted:var(--color-white);--ui-bg:var(--ui-color-neutral-900);--ui-bg-muted:var(--ui-color-neutral-800);--ui-bg-elevated:var(--ui-color-neutral-800);--ui-bg-accented:var(--ui-color-neutral-700);--ui-bg-inverted:var(--color-white);--ui-border:var(--ui-color-neutral-800);--ui-border-muted:var(--ui-color-neutral-700);--ui-border-accented:var(--ui-color-neutral-700);--ui-border-inverted:var(--color-white)}}

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

@@ -0,0 +1,2 @@
+declare const _default: import("../types").Locale;
+export default _default;

package/dist/runtime/locale/az.js

@@ -0,0 +1,54 @@
+import { defineLocale } from "../composables/defineLocale.js";
+export default defineLocale({
+  name: "Az\u0259rbaycanca",
+  code: "az",
+  messages: {
+    inputMenu: {
+      noMatch: "Uy\u011Fun m\u0259lumat tap\u0131lmad\u0131",
+      noData: "M\u0259lumat yoxdur",
+      create: '"{label}" yarat'
+    },
+    calendar: {
+      prevYear: "\u018Fvv\u0259lki il",
+      nextYear: "N\xF6vb\u0259ti il",
+      prevMonth: "\u018Fvv\u0259lki ay",
+      nextMonth: "N\xF6vb\u0259ti ay"
+    },
+    inputNumber: {
+      increment: "Art\u0131r",
+      decrement: "Azalt"
+    },
+    commandPalette: {
+      placeholder: "\u018Fmr daxil edin v\u0259 ya axtar\u0131n...",
+      noMatch: "Uy\u011Fun m\u0259lumat tap\u0131lmad\u0131",
+      noData: "M\u0259lumat yoxdur",
+      close: "Ba\u011Fla"
+    },
+    selectMenu: {
+      noMatch: "Uy\u011Fun m\u0259lumat tap\u0131lmad\u0131",
+      noData: "M\u0259lumat yoxdur",
+      create: '"{label}" yarat',
+      search: "Axtar..."
+    },
+    toast: {
+      close: "Ba\u011Fla"
+    },
+    carousel: {
+      prev: "\u018Fvv\u0259lki",
+      next: "N\xF6vb\u0259ti",
+      goto: "Slayd {slide} ke\xE7"
+    },
+    modal: {
+      close: "Ba\u011Fla"
+    },
+    slideover: {
+      close: "Ba\u011Fla"
+    },
+    alert: {
+      close: "Ba\u011Fla"
+    },
+    table: {
+      noData: "M\u0259lumat yoxdur"
+    }
+  }
+});

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

@@ -0,0 +1,2 @@
+declare const _default: import("../types").Locale;
+export default _default;

package/dist/runtime/locale/bn.js

@@ -0,0 +1,54 @@
+import { defineLocale } from "../composables/defineLocale.js";
+export default defineLocale({
+  name: "\u09AC\u09BE\u0982\u09B2\u09BE",
+  code: "bn",
+  messages: {
+    inputMenu: {
+      noMatch: "\u0995\u09CB\u09A8 \u09AE\u09BF\u09B2 \u09AA\u09BE\u0993\u09AF\u09BC\u09BE \u09AF\u09BE\u09AF\u09BC\u09A8\u09BF",
+      noData: "\u0995\u09CB\u09A8 \u09A4\u09A5\u09CD\u09AF \u09A8\u09C7\u0987",
+      create: '"{label}" \u09A4\u09C8\u09B0\u09BF \u0995\u09B0\u09C1\u09A8'
+    },
+    calendar: {
+      prevYear: "\u09AA\u09C2\u09B0\u09CD\u09AC\u09AC\u09B0\u09CD\u09A4\u09C0 \u09AC\u099B\u09B0",
+      nextYear: "\u09AA\u09B0\u09AC\u09B0\u09CD\u09A4\u09C0 \u09AC\u099B\u09B0",
+      prevMonth: "\u09AA\u09C2\u09B0\u09CD\u09AC\u09AC\u09B0\u09CD\u09A4\u09C0 \u09AE\u09BE\u09B8",
+      nextMonth: "\u09AA\u09B0\u09AC\u09B0\u09CD\u09A4\u09C0 \u09AE\u09BE\u09B8"
+    },
+    inputNumber: {
+      increment: "\u09AC\u09C3\u09A6\u09CD\u09A7\u09BF \u0995\u09B0\u09C1\u09A8",
+      decrement: "\u09B9\u09CD\u09B0\u09BE\u09B8 \u0995\u09B0\u09C1\u09A8"
+    },
+    commandPalette: {
+      placeholder: "\u0995\u09AE\u09BE\u09A8\u09CD\u09A1 \u099F\u09BE\u0987\u09AA \u0995\u09B0\u09C1\u09A8 \u09AC\u09BE \u0985\u09A8\u09C1\u09B8\u09A8\u09CD\u09A7\u09BE\u09A8 \u0995\u09B0\u09C1\u09A8...",
+      noMatch: "\u0995\u09CB\u09A8 \u09AE\u09BF\u09B2 \u09AA\u09BE\u0993\u09AF\u09BC\u09BE \u09AF\u09BE\u09AF\u09BC\u09A8\u09BF",
+      noData: "\u0995\u09CB\u09A8 \u09A4\u09A5\u09CD\u09AF \u09A8\u09C7\u0987",
+      close: "\u09AC\u09A8\u09CD\u09A7 \u0995\u09B0\u09C1\u09A8"
+    },
+    selectMenu: {
+      noMatch: "\u0995\u09CB\u09A8 \u09AE\u09BF\u09B2 \u09AA\u09BE\u0993\u09AF\u09BC\u09BE \u09AF\u09BE\u09AF\u09BC\u09A8\u09BF",
+      noData: "\u0995\u09CB\u09A8 \u09A4\u09A5\u09CD\u09AF \u09A8\u09C7\u0987",
+      create: '"{label}" \u09A4\u09C8\u09B0\u09BF \u0995\u09B0\u09C1\u09A8',
+      search: "\u0985\u09A8\u09C1\u09B8\u09A8\u09CD\u09A7\u09BE\u09A8 \u0995\u09B0\u09C1\u09A8..."
+    },
+    toast: {
+      close: "\u09AC\u09A8\u09CD\u09A7 \u0995\u09B0\u09C1\u09A8"
+    },
+    carousel: {
+      prev: "\u09AA\u09C2\u09B0\u09CD\u09AC\u09AC\u09B0\u09CD\u09A4\u09C0",
+      next: "\u09AA\u09B0\u09AC\u09B0\u09CD\u09A4\u09C0",
+      goto: "\u09B8\u09CD\u09B2\u09BE\u0987\u09A1 {slide} \u098F \u09AF\u09BE\u09A8"
+    },
+    modal: {
+      close: "\u09AC\u09A8\u09CD\u09A7 \u0995\u09B0\u09C1\u09A8"
+    },
+    slideover: {
+      close: "\u09AC\u09A8\u09CD\u09A7 \u0995\u09B0\u09C1\u09A8"
+    },
+    alert: {
+      close: "\u09AC\u09A8\u09CD\u09A7 \u0995\u09B0\u09C1\u09A8"
+    },
+    table: {
+      noData: "\u0995\u09CB\u09A8 \u09A4\u09A5\u09CD\u09AF \u09A8\u09C7\u0987"
+    }
+  }
+});

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

@@ -1,4 +1,6 @@
 export { default as ar } from './ar';
+export { default as az } from './az';
+export { default as bn } from './bn';
 export { default as cs } from './cs';
 export { default as da } from './da';
 export { default as de } from './de';
@@ -13,6 +15,7 @@ export { default as hi } from './hi';
 export { default as id } from './id';
 export { default as it } from './it';
 export { default as ja } from './ja';
+export { default as km } from './km';
 export { default as ko } from './ko';
 export { default as nb_no } from './nb_no';
 export { default as nl } from './nl';

package/dist/runtime/locale/index.js

@@ -1,4 +1,6 @@
 export { default as ar } from "./ar.js";
+export { default as az } from "./az.js";
+export { default as bn } from "./bn.js";
 export { default as cs } from "./cs.js";
 export { default as da } from "./da.js";
 export { default as de } from "./de.js";
@@ -13,6 +15,7 @@ export { default as hi } from "./hi.js";
 export { default as id } from "./id.js";
 export { default as it } from "./it.js";
 export { default as ja } from "./ja.js";
+export { default as km } from "./km.js";
 export { default as ko } from "./ko.js";
 export { default as nb_no } from "./nb_no.js";
 export { default as nl } from "./nl.js";

package/dist/runtime/plugins/colors.js

@@ -5,7 +5,7 @@ export default defineNuxtPlugin(() => {
   const nuxtApp = useNuxtApp();
   const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
   function generateShades(key, value) {
-    return `${shades.map((shade) => `--ui-color-${key}-${shade}: var(--color-${value}-${shade});`).join("\n  ")}`;
+    return `${shades.map((shade) => `--ui-color-${key}-${shade}: var(--color-${value === "neutral" ? "old-neutral" : value}-${shade});`).join("\n  ")}`;
   }
   function generateColor(key, shade) {
     return `--ui-${key}: var(--ui-color-${key}-${shade});`;

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

@@ -48,3 +48,4 @@ export * from '../components/Toaster.vue';
 export * from '../components/Tooltip.vue';
 export * from './form';
 export * from './locale';
+export * from './utils';

package/dist/runtime/types/index.js

@@ -48,3 +48,4 @@ export * from "../components/Toaster.vue";
 export * from "../components/Tooltip.vue";
 export * from "./form.js";
 export * from "./locale.js";
+export * from "./utils.js";

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 export interface TightMap<O = any> {
     [key: string]: TightMap | O;
 }
@@ -20,3 +21,7 @@ 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 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/vue/components/Link.vue

@@ -90,7 +90,7 @@ export interface LinkSlots {
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, getCurrentInstance } from 'vue'
 import { isEqual, diff } from 'ohash'
 import { useForwardProps } from 'reka-ui'
 import { reactiveOmit } from '@vueuse/core'
@@ -109,7 +109,22 @@ const props = withDefaults(defineProps<LinkProps>(), {
 })
 defineSlots<LinkSlots>()
 
-const route = useRoute()
+// 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({
@@ -132,24 +147,27 @@ function isPartiallyEqual(item1: any, item2: any) {
   return isEqual(item1, item2, { excludeKeys: key => diffedKeys.includes(key) })
 }
 
-const isExternal = computed(() => typeof props.to === 'string' && hasProtocol(props.to, { acceptRelative: true }))
+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 === 'partial') {
-    if (!isPartiallyEqual(linkRoute.query, route.query)) return false
+    if (!isPartiallyEqual(linkRoute.query, route.value.query)) return false
   } else if (props.exactQuery === true) {
-    if (!isEqual(linkRoute.query, route.query)) return false
+    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
   }
 
@@ -173,10 +191,51 @@ function resolveLinkClass({ route, isActive, isExactActive }: any) {
 
   return ui.value({ class: props.class, active, disabled: props.disabled })
 }
+
+// Handle navigation without vue-router
+const handleNavigation = (href: string) => {
+  if (isExternal.value) {
+    window.location.href = href
+  } else {
+    window.location.pathname = href
+  }
+}
 </script>
 
 <template>
-  <RouterLink v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }" v-bind="routerLinkProps" :to="to || '#'" custom>
+  <template v-if="hasRouter">
+    <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, isExactActive })"
+      >
+        <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
+      </ULinkBase>
+    </RouterLink>
+  </template>
+
+  <template v-else>
     <template v-if="custom">
       <slot
         v-bind="{
@@ -184,9 +243,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,
+          navigate: () => to && handleNavigation(to as string),
+          active: false
         }"
       />
     </template>
@@ -197,12 +256,12 @@ function resolveLinkClass({ route, isActive, isExactActive }: any) {
         as,
         type,
         disabled,
-        href: to ? (isExternal ? to as string : href) : undefined,
-        navigate
+        href: (to as string)
       }"
-      :class="resolveLinkClass({ route: linkRoute, isActive: isActive, isExactActive: isExactActive })"
+      :class="ui({ class: props.class, disabled })"
+      @click="to && handleNavigation(to as string)"
     >
-      <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
+      <slot :active="false" />
     </ULinkBase>
-  </RouterLink>
+  </template>
 </template>