nuxt-ui-elements 0.1.19 → 0.1.21

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-ui-elements",
   "configKey": "uiElements",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "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,25 @@
+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;
+    "after:leave": () => any;
+}, string, import("vue").PublicProps, Readonly<DialogAlertProps> & 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/DialogAlert.vue

@@ -0,0 +1,78 @@
+<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", "after:leave"]);
+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 })
+}"
+    @close="emits('close', $event)"
+    @after:leave="emits('after:leave')">
+    <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,25 @@
+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;
+    "after:leave": () => any;
+}, string, import("vue").PublicProps, Readonly<DialogAlertProps> & 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/dist/runtime/utils/std.d.ts

@@ -1,14 +1,19 @@
 /**
- * Standard utility library re-exports
- * Import from '#std' for tree-shakeable utilities
+ * Standard utility library
  *
  * @example
- * import { plur, slugify, date } from '#std'
+ * import std from '#std'
  *
- * const text = plur('item', count)
- * const slug = slugify('Hello World')
- * const nextMonth = date.add(date.today(), 1, 'month')
+ * const text = std.plur('item', count)
+ * const slug = std.slugify('Hello World')
+ * const nextMonth = std.date.add(std.date.today(), 1, 'month')
  */
-export { default as plur } from "plur";
-export { default as slugify } from "@sindresorhus/slugify";
-export * as date from "./std/date.js";
+import plur from "plur";
+import slugify from "@sindresorhus/slugify";
+import * as date from "./std/date.js";
+declare const _default: {
+    readonly plur: typeof plur;
+    readonly slugify: typeof slugify;
+    readonly date: typeof date;
+};
+export default _default;

package/dist/runtime/utils/std.js

@@ -1,3 +1,8 @@
-export { default as plur } from "plur";
-export { default as slugify } from "@sindresorhus/slugify";
-export * as date from "./std/date.js";
+import plur from "plur";
+import slugify from "@sindresorhus/slugify";
+import * as date from "./std/date.js";
+export default {
+  plur,
+  slugify,
+  date
+};

package/package.json

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