nuxt-ui-elements 0.1.20 → 0.1.22

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-ui-elements",
   "configKey": "uiElements",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -69,8 +69,76 @@ const dialogConfirm = (options) => ({
   }
 });
 
+const dialogAlert = (options) => ({
+  slots: {
+    content: "divide-y-0 bg-default ring-0",
+    header: "relative flex items-center gap-1.5 p-4 sm:px-6 min-h-16",
+    icon: "shrink-0 size-12",
+    title: "text-lg font-semibold",
+    description: "text-sm opacity-90",
+    body: "p-2 sm:p-5 sm:pt-0",
+    footer: "justify-center gap-3"
+  },
+  variants: {
+    size: {
+      sm: {
+        content: "sm:max-w-md"
+      },
+      md: {
+        content: "sm:max-w-3xl"
+      }
+    },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    variant: {
+      solid: "",
+      outline: ""
+    }
+  },
+  compoundVariants: [
+    // Solid variants - dynamically generated for all theme colors
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "solid",
+      class: {
+        content: `bg-${color} text-inverted`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "solid",
+      class: {
+        content: "text-inverted bg-inverted"
+      }
+    },
+    // Outline variants - dynamically generated for all theme colors
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "outline",
+      class: {
+        content: `bg-gradient-to-b from-${color}/5 to-${color}/5 bg-default text-${color} !ring !ring-inset !ring-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "outline",
+      class: {
+        content: "text-highlighted bg-elevated !ring !ring-inset !ring-accented"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    variant: "solid",
+    size: "sm"
+  }
+});
+
 const theme = {
   __proto__: null,
+  dialogAlert: dialogAlert,
   dialogConfirm: dialogConfirm
 };
 
@@ -135,6 +203,24 @@ function addTemplates(options, _nuxt) {
 .animate-shake {
   animation: shake 0.5s ease-in-out;
 }
+
+@keyframes alert-bounce {
+  0% {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  50% {
+    transform: scale(1.02);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animate-alert-bounce {
+  animation: alert-bounce 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
 `;
     }
   });

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

@@ -0,0 +1,23 @@
+import type { AppConfig } from "@nuxt/schema";
+import theme from "#build/ui-elements/dialog-alert";
+import type { ComponentConfig } from "../types/tv.js";
+type DialogAlert = ComponentConfig<typeof theme, AppConfig, "dialogAlert">;
+interface DialogAlertProps {
+    title?: string;
+    description?: string;
+    icon?: string;
+    label?: string;
+    color?: DialogAlert["variants"]["color"];
+    variant?: DialogAlert["variants"]["variant"];
+    onDismiss?: (() => void) | (() => Promise<void>);
+    ui?: DialogAlert["slots"];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<DialogAlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (value?: any) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<DialogAlertProps> & Readonly<{
+    onClose?: ((value?: any) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/DialogAlert.vue

@@ -0,0 +1,76 @@
+<script>
+import theme from "#build/ui-elements/dialog-alert";
+import { computed } from "vue";
+import { DialogTitle, DialogDescription } from "reka-ui";
+import { tv } from "../utils/tv";
+</script>
+
+<script setup>
+const {
+  title = "",
+  description = "",
+  icon = void 0,
+  label = "Ok",
+  color = "neutral",
+  variant = "solid",
+  onDismiss = () => {
+  },
+  ui: uiProps = {}
+} = defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  icon: { type: String, required: false },
+  label: { type: String, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  onDismiss: { type: Function, required: false },
+  ui: { type: null, required: false }
+});
+const emits = defineEmits(["update:open", "close"]);
+const ui = computed(
+  () => tv({
+    extend: tv(theme)
+  })({
+    size: "sm",
+    color,
+    variant
+  })
+);
+const dismissHandler = () => {
+  onDismiss();
+  emits("close");
+};
+</script>
+
+<template>
+  <UModal
+    :dismissible="false"
+    :close="false"
+    :title="title"
+    :description="description"
+    :ui="{
+  content: ui.content({ class: ['animate-alert-bounce', uiProps?.content] }),
+  header: ui.header({ class: uiProps?.header }),
+  body: ui.body({ class: uiProps?.body }),
+  footer: ui.footer({ class: uiProps?.footer })
+}">
+    <template #header>
+      <div class="relative w-full flex flex-col items-center text-center gap-3">
+        <UIcon v-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: uiProps?.icon })" />
+        <div class="w-full">
+          <DialogTitle v-if="title" data-slot="title" :class="ui.title({ class: uiProps?.title })">
+            {{ title }}
+          </DialogTitle>
+
+          <DialogDescription v-if="description" :class="ui.description({ class: uiProps?.description })">
+            {{ description }}
+          </DialogDescription>
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <UButton :label="label" size="lg" color="neutral" variant="outline" @click="dismissHandler" />
+    </template>
+  </UModal>
+</template>

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

@@ -0,0 +1,23 @@
+import type { AppConfig } from "@nuxt/schema";
+import theme from "#build/ui-elements/dialog-alert";
+import type { ComponentConfig } from "../types/tv.js";
+type DialogAlert = ComponentConfig<typeof theme, AppConfig, "dialogAlert">;
+interface DialogAlertProps {
+    title?: string;
+    description?: string;
+    icon?: string;
+    label?: string;
+    color?: DialogAlert["variants"]["color"];
+    variant?: DialogAlert["variants"]["variant"];
+    onDismiss?: (() => void) | (() => Promise<void>);
+    ui?: DialogAlert["slots"];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<DialogAlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (value?: any) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<DialogAlertProps> & Readonly<{
+    onClose?: ((value?: any) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -20,9 +20,7 @@ export default _default;
 declare const __VLS_export: import("vue").DefineComponent<DialogConfirmProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (value?: any) => any;
     "update:open": (value: boolean) => any;
-    "after:leave": () => any;
 }, string, import("vue").PublicProps, Readonly<DialogConfirmProps> & Readonly<{
     onClose?: ((value?: any) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-    "onAfter:leave"?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/DialogConfirm.vue

@@ -33,7 +33,7 @@ const {
   onDismiss: { type: Function, required: false },
   ui: { type: null, required: false }
 });
-const emits = defineEmits(["update:open", "close", "after:leave"]);
+const emits = defineEmits(["update:open", "close"]);
 const isLoading = ref(false);
 const isComplete = ref(false);
 const isError = ref(false);
@@ -111,9 +111,7 @@ const handleClose = () => {
   header: ui.header({ class: uiProps?.header }),
   body: ui.body({ class: uiProps?.body }),
   footer: ui.footer({ class: uiProps?.footer })
-}"
-    @close="emits('close', $event)"
-    @after:leave="emits('after:leave')">
+}">
     <template #header>
       <div class="relative w-full flex items-start gap-3">
         <UIcon v-if="dialogIcon" :name="dialogIcon" data-slot="icon" :class="ui.icon({ class: uiProps?.icon })" />

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

@@ -20,9 +20,7 @@ export default _default;
 declare const __VLS_export: import("vue").DefineComponent<DialogConfirmProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (value?: any) => any;
     "update:open": (value: boolean) => any;
-    "after:leave": () => any;
 }, string, import("vue").PublicProps, Readonly<DialogConfirmProps> & Readonly<{
     onClose?: ((value?: any) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-    "onAfter:leave"?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -14,8 +14,18 @@ export interface DialogConfirmOptions {
     onDismiss?: CallbackFn;
     ui?: any;
 }
+export interface DialogAlertOptions {
+    title: string;
+    description?: string;
+    icon?: string;
+    label?: string;
+    color?: Color;
+    variant?: Variant;
+    onDismiss?: CallbackFn;
+    ui?: any;
+}
 export declare const useDialog: () => {
     confirm: (options: DialogConfirmOptions) => void;
-    confirmNavigate: (path: string, options?: Omit<DialogConfirmOptions, "title" | "description" | "onConfirm">) => void;
+    alert: (options: DialogAlertOptions) => void;
 };
 export {};

package/dist/runtime/composables/useDialog.js

@@ -1,6 +1,6 @@
 import DialogConfirm from "../components/DialogConfirm.vue";
+import DialogAlert from "../components/DialogAlert.vue";
 import { useOverlay } from "#imports";
-import { navigateTo } from "#app";
 export const useDialog = () => {
   const overlay = useOverlay();
   const confirm = (options) => {
@@ -10,15 +10,12 @@ export const useDialog = () => {
     });
     modal.open();
   };
-  const confirmNavigate = (path, options) => {
-    confirm({
-      title: "Leave this page?",
-      description: "Are you sure you want to navigate away? Unsaved changes will be lost.",
-      ...options,
-      onConfirm: () => {
-        navigateTo(path);
-      }
+  const alert = (options) => {
+    const modal = overlay.create(DialogAlert, {
+      destroyOnClose: true,
+      props: options
     });
+    modal.open();
   };
-  return { confirm, confirmNavigate };
+  return { confirm, alert };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-elements",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "A collection of beautiful, animated UI components for Nuxt applications",
   "license": "MIT",
   "repository": "https://github.com/genu/nuxt-ui-elements.git",