nuxt-ui-elements 0.1.7 → 0.1.10

package/dist/module.json

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

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, useLogger, hasNuxtModule, addComponentsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, useLogger, addImportsDir } from '@nuxt/kit';
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -9,20 +9,12 @@ const module$1 = defineNuxtModule({
     prefix: "UE"
   },
   moduleDependencies: {
-    "motion-v/nuxt": {},
-    "@nuxtjs/color-mode": {}
+    "@nuxt/ui": {}
   },
-  setup(options, _nuxt) {
+  setup(_options, _nuxt) {
     const resolver = createResolver(import.meta.url);
-    const logger = useLogger("nuxt-ui-elements");
-    if (!hasNuxtModule("@nuxt/ui")) {
-      logger.error("[nuxt-ui-elements] @nuxt/ui is required. Please install it");
-    }
-    addComponentsDir({
-      path: resolver.resolve("./runtime/components"),
-      pathPrefix: false,
-      prefix: options.prefix
-    });
+    useLogger("nuxt-ui-elements");
+    addImportsDir(resolver.resolve("./runtime/composables"));
   }
 });
 

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

@@ -0,0 +1,25 @@
+interface Props {
+    open?: boolean;
+    size?: "sm" | "md";
+    title: string;
+    description?: string;
+    confirmLabel?: string;
+    dismissLabel?: string;
+    clickToClose?: boolean;
+    async?: boolean;
+    successDelay?: number;
+    onConfirm?: (() => void) | (() => Promise<void>);
+    onDismiss?: () => void;
+    onClose?: () => void;
+}
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    close: (value?: any) => any;
+    "after:leave": () => any;
+}, string, import("@vue/runtime-core").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onClose?: ((value?: any) => any) | undefined;
+    "onAfter:leave"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/DialogConfirm.vue

@@ -0,0 +1,119 @@
+<script setup>
+import { computed, ref } from "vue";
+const {
+  open = false,
+  size = "sm",
+  confirmLabel = "Yes",
+  dismissLabel = "No",
+  async = false,
+  successDelay = 1200,
+  ...props
+} = defineProps({
+  open: { type: Boolean, required: false },
+  size: { type: String, required: false },
+  title: { type: String, required: true },
+  description: { type: String, required: false },
+  confirmLabel: { type: String, required: false },
+  dismissLabel: { type: String, required: false },
+  clickToClose: { type: Boolean, required: false },
+  async: { type: Boolean, required: false },
+  successDelay: { type: Number, required: false },
+  onConfirm: { type: Function, required: false },
+  onDismiss: { type: Function, required: false },
+  onClose: { type: Function, required: false }
+});
+defineEmits(["update:open", "close", "after:leave"]);
+const sizeClass = computed(() => {
+  switch (size) {
+    case "sm":
+      return "sm:max-w-md";
+    case "md":
+      return "sm:max-w-3xl";
+    default:
+      return "max-w-3xl";
+  }
+});
+const isConfirming = ref(false);
+const isComplete = ref(false);
+const error = ref(null);
+const confirm = async () => {
+  if (props.onConfirm) {
+    if (async) {
+      isConfirming.value = true;
+      error.value = null;
+      try {
+        await Promise.resolve(props.onConfirm());
+        isConfirming.value = false;
+        isComplete.value = true;
+        await new Promise((resolve) => setTimeout(resolve, successDelay));
+        props.onClose?.();
+      } catch (e) {
+        isConfirming.value = false;
+        error.value = e instanceof Error ? e.message : "An error occurred";
+        return;
+      }
+    } else {
+      props.onConfirm();
+      props.onClose?.();
+    }
+  }
+};
+const dismiss = () => {
+  if (props.onDismiss) {
+    props.onDismiss();
+  }
+  props.onClose?.();
+};
+</script>
+
+<template>
+  <UModal
+    :open="open"
+    :dismissible="clickToClose"
+    :close="false"
+    :title="title"
+    :ui="{
+  content: `${sizeClass} divide-y-0`,
+  header: 'px-2 sm:px-5 py-3',
+  body: 'p-2 sm:p-5 sm:pt-0',
+  footer: 'justify-end gap-3'
+}"
+    @update:open="$emit('update:open', $event)"
+    @close="$emit('close', $event)"
+    @after:leave="$emit('after:leave')"
+  >
+    <template #body>
+      <div class="space-y-3">
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div class="text-sm text-gray-500" v-html="description" />
+
+        <!-- Error message -->
+        <div
+          v-if="error"
+          class="text-sm text-red-500 dark:text-red-400 bg-red-50 dark:bg-red-950 p-3 rounded"
+        >
+          {{ error }}
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <UButton
+        v-if="dismissLabel"
+        :ui="{ base: 'justify-around' }"
+        color="neutral"
+        variant="outline"
+        :label="dismissLabel"
+        @click="dismiss"
+      />
+      <UButton
+        color="neutral"
+        :loading="isConfirming"
+        :disabled="isComplete"
+        :label="isComplete ? void 0 : confirmLabel"
+        :icon="isComplete ? 'i-heroicons-check' : void 0"
+        :ui="{ base: 'justify-around' }"
+        @click="confirm"
+      />
+    </template>
+  </UModal>
+</template>

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

@@ -0,0 +1,25 @@
+interface Props {
+    open?: boolean;
+    size?: "sm" | "md";
+    title: string;
+    description?: string;
+    confirmLabel?: string;
+    dismissLabel?: string;
+    clickToClose?: boolean;
+    async?: boolean;
+    successDelay?: number;
+    onConfirm?: (() => void) | (() => Promise<void>);
+    onDismiss?: () => void;
+    onClose?: () => void;
+}
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    close: (value?: any) => any;
+    "after:leave": () => any;
+}, string, import("@vue/runtime-core").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onClose?: ((value?: any) => any) | undefined;
+    "onAfter:leave"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,12 @@
+import DialogConfirm from "../components/DialogConfirm.vue.js";
+type CallbackFn = () => void | Promise<void>;
+interface DialogInstance {
+    onConfirm: (fn: CallbackFn) => DialogInstance;
+    onDismiss: (fn: CallbackFn) => DialogInstance;
+    open: () => DialogInstance;
+}
+export declare const useDialog: () => {
+    confirm: (options: Omit<InstanceType<typeof DialogConfirm>["$props"], "onDismiss" | "onConfirm" | "class">) => DialogInstance;
+    confirmNavigate: (path: string) => void;
+};
+export {};

package/dist/runtime/composables/useDialog.js

@@ -0,0 +1,51 @@
+import DialogConfirm from "../components/DialogConfirm.vue";
+import { useOverlay } from "#imports";
+import { navigateTo } from "#app";
+export const useDialog = () => {
+  const overlay = useOverlay();
+  const confirm = (options) => {
+    let confirmCallback = () => {
+    };
+    let dismissCallback = () => {
+    };
+    const modal = overlay.create(DialogConfirm, {
+      destroyOnClose: true,
+      props: {
+        ...options,
+        onConfirm: async () => {
+          await confirmCallback();
+        },
+        onDismiss: async () => {
+          await dismissCallback();
+        }
+        // onClose: () => {
+        //   modal.close();
+        // },
+      }
+    });
+    const dialogInstance = {
+      onConfirm: (fn) => {
+        confirmCallback = fn;
+        return dialogInstance;
+      },
+      onDismiss: (fn) => {
+        dismissCallback = fn;
+        return dialogInstance;
+      },
+      open: () => {
+        modal.open();
+        return dialogInstance;
+      }
+    };
+    return dialogInstance;
+  };
+  const confirmNavigate = (path) => {
+    confirm({
+      title: "Leave this page?",
+      description: "Are you sure you want to navigate away? Unsaved changes will be lost."
+    }).onConfirm(() => {
+      navigateTo(path);
+    }).open();
+  };
+  return { confirm, confirmNavigate };
+};

package/package.json

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

package/dist/runtime/components/backgrounds/BackgroundAurora.d.vue.ts

@@ -1,137 +0,0 @@
-import type { ColorInput } from "../../composables/useColorResolver.js";
-/**
- * Aurora - An animated aurora background component with gradient effects
- *
- * A beautiful CSS-based gradient animation that creates flowing aurora-like effects.
- * Perfect for hero sections, landing pages, or anywhere you want eye-catching backgrounds.
- */
-export type AuroraVariant = "calm" | "energetic" | "cosmic";
-export interface AuroraProps {
-    /**
-     * Pin the aurora to a specific corner or edge of the container.
-     *
-     * When set, creates a radial mask that constrains the aurora effect to originate from
-     * the specified position, creating a spotlight or glow effect from that corner/edge.
-     *
-     * When undefined, aurora flows freely across the entire container without masking.
-     *
-     * Use cases:
-     * - 'top-right': Glow from top-right corner (perfect for hero sections)
-     * - 'bottom-left': Accent from bottom corner
-     * - 'top': Top edge glow (header backgrounds)
-     * - undefined: Full-screen flowing effect (landing pages)
-     *
-     * @default 'top-right'
-     */
-    pin?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
-    /**
-     * Color for the aurora gradient. Supports:
-     * - Nuxt UI semantic: 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral'
-     * - Tailwind colors: 'blue-500', 'red-600', 'purple-400', etc.
-     * - Direct values: '#3b82f6', 'oklch(0.6 0.15 250)', 'rgb(59, 130, 246)'
-     *
-     * The component automatically generates multiple gradient shades from this base color
-     * with different lightness values for a rich, multi-tone aurora effect.
-     *
-     * @example 'primary' - Uses Nuxt UI theme primary color
-     * @example 'purple-500' - Tailwind purple
-     * @example '#8b5cf6' - Direct hex value
-     *
-     * @default 'primary'
-     */
-    color?: ColorInput;
-    /**
-     * Speed of the aurora animation (0-100, where 100 is fastest).
-     *
-     * Controls how quickly the aurora gradient flows across the screen.
-     * - 0: Paused (no animation)
-     * - 1-30: Slow, calm movement
-     * - 40-60: Medium, steady flow
-     * - 70-100: Fast, energetic motion
-     *
-     * Range: 0-100
-     * @default 50
-     */
-    speed?: number;
-    /**
-     * Opacity/visibility of the aurora effect (0-100).
-     *
-     * Controls the overall transparency of the aurora gradient overlay.
-     * Does NOT affect blur amount - use `variant` for preset blur configurations.
-     *
-     * - 0: Completely invisible
-     * - 30: Subtle, gentle glow
-     * - 50: Balanced visibility
-     * - 80-100: Bold, prominent effect
-     *
-     * Range: 0-100
-     * @default 50
-     */
-    opacity?: number;
-    /**
-     * Lightness adjustment for the base color in OKLCH color space (0-100).
-     *
-     * Controls the brightness/saturation of the generated gradient colors.
-     * - Lower values (30-50): Darker, more saturated colors (better for dark mode)
-     * - Higher values (60-80): Lighter, pastel colors (better for light mode)
-     *
-     * The component automatically adjusts this for dark mode, but you can override
-     * using the `dark` prop for custom dark mode appearance.
-     *
-     * Range: 0-100
-     * @default 70 (light mode), 40 (dark mode)
-     */
-    lightness?: number;
-    /**
-     * Dark mode overrides for color, lightness, and opacity.
-     *
-     * Allows you to customize the aurora appearance specifically for dark mode.
-     * Any property not specified will use the default light mode value.
-     *
-     * @example { color: 'blue-400', lightness: 30, opacity: 60 }
-     */
-    dark?: {
-        color?: ColorInput;
-        lightness?: number;
-        opacity?: number;
-    };
-    /**
-     * Animation style variant with preset configurations.
-     *
-     * When set, overrides `speed`, `opacity`, and blur settings with carefully tuned presets.
-     * - 'calm': Slow, gentle, heavily blurred (meditative feel)
-     * - 'energetic': Fast, vibrant, lightly blurred (dynamic feel)
-     * - 'cosmic': Medium speed, high opacity, moderate blur (space-like effect)
-     *
-     * Leave undefined to manually control speed and opacity.
-     */
-    variant?: AuroraVariant;
-    /**
-     * Reverse the animation direction.
-     *
-     * When true, the aurora flows in the opposite direction.
-     *
-     * @default false
-     */
-    reverse?: boolean;
-    /**
-     * Additional CSS classes for the container element.
-     */
-    class?: any;
-}
-export interface AuroraSlots {
-    /**
-     * Default slot content rendered on top of the aurora background.
-     *
-     * Content is positioned with z-index above the aurora effect.
-     */
-    default(): any;
-}
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AuroraProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AuroraProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AuroraSlots>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/backgrounds/BackgroundAurora.vue

@@ -1,147 +0,0 @@
-<script>
-
-</script>
-
-<script setup>
-import { computed, ref, onMounted, watch } from "vue";
-import { useColorMode } from "#imports";
-import { resolveColor } from "../../composables/useColorResolver";
-import {
-  adjustLightness,
-  oklchToRgb
-} from "../../composables/useThemeColors";
-import { createRepeatingGradient } from "../../composables/useGradient";
-const {
-  pin = "top-right",
-  color = "primary",
-  speed = 50,
-  opacity = 50,
-  lightness = 70,
-  reverse = false,
-  ...props
-} = defineProps({
-  pin: { type: String, required: false },
-  color: { type: null, required: false },
-  speed: { type: Number, required: false },
-  opacity: { type: Number, required: false },
-  lightness: { type: Number, required: false },
-  dark: { type: Object, required: false },
-  variant: { type: String, required: false },
-  reverse: { type: Boolean, required: false },
-  class: { type: null, required: false }
-});
-defineSlots();
-const isDark = ref(false);
-onMounted(() => {
-  const colorMode = useColorMode();
-  isDark.value = colorMode.value === "dark";
-  watch(
-    () => colorMode.value,
-    (newValue) => {
-      isDark.value = newValue === "dark";
-    }
-  );
-});
-const variants = {
-  calm: { speed: 20, opacity: 30, blur: 15 },
-  energetic: { speed: 80, opacity: 70, blur: 8 },
-  cosmic: { speed: 50, opacity: 90, blur: 12 }
-};
-const effectiveSpeed = computed(
-  () => props.variant ? variants[props.variant].speed : speed
-);
-const effectiveOpacity = computed(
-  () => props.variant ? variants[props.variant].opacity : opacity
-);
-const effectiveBlur = computed(
-  () => props.variant ? variants[props.variant].blur : 10
-);
-const effectiveColor = computed(
-  () => isDark.value && props.dark?.color ? props.dark.color : color
-);
-const effectiveLightness = computed(
-  () => isDark.value && props.dark?.lightness !== void 0 ? props.dark.lightness : isDark.value ? 40 : lightness
-);
-const effectiveOpacityValue = computed(
-  () => isDark.value && props.dark?.opacity !== void 0 ? props.dark.opacity : effectiveOpacity.value
-);
-const baseColor = computed(() => resolveColor(effectiveColor.value));
-const auroraColors = computed(() => {
-  const base = baseColor.value;
-  const baseLightness = effectiveLightness.value;
-  return [
-    oklchToRgb(adjustLightness(base, baseLightness - 10)),
-    oklchToRgb(adjustLightness(base, baseLightness + 5)),
-    oklchToRgb(adjustLightness(base, baseLightness)),
-    oklchToRgb(adjustLightness(base, baseLightness + 10)),
-    oklchToRgb(adjustLightness(base, baseLightness - 5))
-  ];
-});
-const auroraGradient = computed(
-  () => createRepeatingGradient(auroraColors.value, 100)
-);
-const animationDuration = computed(() => {
-  const clampedSpeed = Math.max(1, Math.min(100, effectiveSpeed.value));
-  const duration = 120 - clampedSpeed * 0.9;
-  return `${duration}s`;
-});
-const animationState = computed(
-  () => effectiveSpeed.value === 0 ? "paused" : "running"
-);
-const animationDirection = computed(() => reverse ? "reverse" : "normal");
-const auroraOpacityValue = computed(() => {
-  const clampedOpacity = Math.max(
-    0,
-    Math.min(100, effectiveOpacityValue.value)
-  );
-  return clampedOpacity / 100;
-});
-const auroraBlur = computed(() => `${effectiveBlur.value}px`);
-const lineColor = computed(() => isDark.value ? "#000" : "#fff");
-const lineColorAfter = computed(
-  () => isDark.value ? "rgba(0, 0, 0, 0.3)" : "#fff"
-);
-const filterInvert = computed(() => isDark.value ? "invert(0)" : "invert(1)");
-const afterOpacity = computed(() => isDark.value ? 0.3 : 1);
-const maskGradient = computed(() => {
-  if (!pin) return void 0;
-  const positions = {
-    "top-left": "ellipse at 0% 0%",
-    "top-right": "ellipse at 100% 0%",
-    "bottom-left": "ellipse at 0% 100%",
-    "bottom-right": "ellipse at 100% 100%",
-    top: "ellipse at 50% 0%",
-    bottom: "ellipse at 50% 100%",
-    left: "ellipse at 0% 50%",
-    right: "ellipse at 100% 50%"
-  };
-  return `radial-gradient(${positions[pin]}, black 10%, transparent 70%)`;
-});
-</script>
-
-<template>
-  <div
-    class="relative flex h-full w-full items-center justify-center bg-zinc-50 text-slate-950 transition-bg dark:bg-zinc-900"
-    :class="props.class"
-  >
-    <div
-      class="absolute inset-0 overflow-hidden"
-      :style="maskGradient ? { maskImage: maskGradient } : {}"
-    >
-      <ClientOnly>
-        <div
-          class="aurora-effect pointer-events-none absolute -inset-2.5 h-full w-full will-change-transform animate-in fade-in duration-1000"
-          :style="{ opacity: auroraOpacityValue }"
-        />
-      </ClientOnly>
-    </div>
-
-    <div class="relative z-10">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.aurora-effect{background-image:repeating-linear-gradient(100deg,v-bind(lineColor),v-bind(lineColor) 7%,transparent 10%,transparent 12%,v-bind(lineColor) 16%),v-bind(auroraGradient);background-size:200%,100%;filter:blur(v-bind(auroraBlur)) v-bind(filterInvert)}.aurora-effect,.aurora-effect:after{animation:aurora v-bind(animationDuration) linear infinite;animation-direction:v-bind(animationDirection);animation-play-state:v-bind(animationState);background-position:50% 50%,50% 50%}.aurora-effect:after{background-attachment:fixed;background-image:repeating-linear-gradient(100deg,v-bind(lineColorAfter),v-bind(lineColorAfter) 7%,transparent 10%,transparent 12%,v-bind(lineColorAfter) 16%),v-bind(auroraGradient);background-size:180%,100%;content:"";inset:0;mix-blend-mode:difference;opacity:v-bind(afterOpacity);position:absolute}@keyframes aurora{0%{background-position:50% 50%,50% 50%}to{background-position:350% 50%,350% 50%}}
-</style>