nuxt-ui-elements 0.1.13 → 0.1.14

package/dist/module.json

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

package/dist/module.mjs

@@ -36,16 +36,14 @@ const dialogConfirm = (options) => ({
       color,
       variant: "solid",
       class: {
-        content: `bg-${color} text-inverted`,
-        close: "!text-white hover:bg-white/10 active:bg-white/20"
+        content: `bg-${color} text-inverted`
       }
     })),
     {
       color: "neutral",
       variant: "solid",
       class: {
-        content: "text-inverted bg-inverted",
-        close: "!text-white hover:bg-white/10 active:bg-white/20"
+        content: "text-inverted bg-inverted"
       }
     },
     // Outline variants - dynamically generated for all theme colors

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

@@ -2,18 +2,8 @@ import type { AppConfig } from "@nuxt/schema";
 import theme from "#build/ui-elements/dialog-confirm";
 import type { ComponentConfig } from "../types/tv.js";
 type DialogConfirm = ComponentConfig<typeof theme, AppConfig, "dialogConfirm">;
-export interface DialogConfirmEmits {
-    "update:open": [value: boolean];
-    close: [value?: any];
-    "after:leave": [];
-}
-export interface DialogConfirmSlots {
-    title(props?: {}): any;
-    description(props?: {}): any;
-    actions(props?: {}): any;
-}
-export interface DialogConfirmProps {
-    title: string;
+interface DialogConfirmProps {
+    title?: string;
     description?: string;
     icon?: boolean;
     confirmLabel?: string;
@@ -23,11 +13,11 @@ export interface DialogConfirmProps {
     variant?: DialogConfirm["variants"]["variant"];
     onConfirm?: (() => void) | (() => Promise<void>);
     onDismiss?: () => void;
-    ui?: Partial<DialogConfirm["slots"]>;
+    ui?: DialogConfirm["slots"];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DialogConfirmProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+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;
@@ -35,15 +25,4 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Dialog
     onClose?: ((value?: any) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onAfter:leave"?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    title?: (props: {}) => any;
-} & {
-    description?: (props: {}) => any;
-} & {
-    actions?: (props: {}) => any;
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/DialogConfirm.vue

@@ -7,7 +7,7 @@ import { tv } from "../utils/tv";
 
 <script setup>
 const {
-  title,
+  title = "",
   description = "",
   icon = true,
   confirmLabel = "Yes",
@@ -15,11 +15,13 @@ const {
   close = false,
   color = "neutral",
   variant = "solid",
-  onConfirm,
-  onDismiss,
-  ui: uiProps
+  onConfirm = () => {
+  },
+  onDismiss = () => {
+  },
+  ui: uiProps = {}
 } = defineProps({
-  title: { type: String, required: true },
+  title: { type: String, required: false },
   description: { type: String, required: false },
   icon: { type: Boolean, required: false },
   confirmLabel: { type: String, required: false },
@@ -29,7 +31,7 @@ const {
   variant: { type: null, required: false },
   onConfirm: { type: Function, required: false },
   onDismiss: { type: Function, required: false },
-  ui: { type: Object, required: false }
+  ui: { type: null, required: false }
 });
 const emits = defineEmits(["update:open", "close", "after:leave"]);
 const isLoading = ref(false);
@@ -64,10 +66,6 @@ const closeButtonProps = computed(() => ({
   variant: "ghost"
 }));
 const confirmHandler = async () => {
-  if (!onConfirm) {
-    emits("close");
-    return;
-  }
   try {
     const result = onConfirm();
     const isAsync = result instanceof Promise;
@@ -121,15 +119,11 @@ const handleClose = () => {
         <UIcon v-if="dialogIcon" :name="dialogIcon" data-slot="icon" :class="ui.icon({ class: uiProps?.icon })" />
         <div class="flex-1 min-w-0">
           <DialogTitle v-if="title" data-slot="title" :class="ui.title({ class: uiProps?.title })">
-            <slot name="title">
-              {{ title }}
-            </slot>
+            {{ title }}
           </DialogTitle>
 
           <DialogDescription v-if="description" :class="ui.description({ class: uiProps?.description })">
-            <slot name="description">
-              {{ description }}
-            </slot>
+            {{ description }}
           </DialogDescription>
         </div>
 
@@ -137,34 +131,35 @@ const handleClose = () => {
           v-if="close"
           v-bind="closeButtonProps"
           data-slot="close"
-          :class="ui.close({ class: uiProps?.close })"
+          :ui="{
+  base: 'text-white hover:bg-white/10 active:bg-white/20'
+}"
           @click="handleClose" />
       </div>
     </template>
 
     <template #footer>
-      <slot name="actions">
-        <!-- Dismiss button (No) - hidden when loading, complete, or error -->
-        <UButton
-          v-if="dismissLabel && !isLoading && !isComplete && !isError"
-          :label="dismissLabel"
-          size="lg"
-          :color="color"
-          variant="solid"
-          @click="dismiss" />
+      <UButton
+        v-if="dismissLabel && !isLoading && !isComplete && !isError"
+        :label="dismissLabel"
+        size="lg"
+        color="neutral"
+        variant="ghost"
+        :ui="{
+  base: 'text-white hover:bg-white/10 active:bg-white/20'
+}"
+        @click="dismiss" />
 
-        <!-- Confirm button (Yes) - shows loading/complete/error states -->
-        <UButton
-          :label="isError ? 'Error' : isComplete ? 'Complete' : confirmLabel"
-          size="lg"
-          color="neutral"
-          variant="outline"
-          :loading="isLoading"
-          :disabled="isComplete"
-          :leading-icon="isError ? 'i-lucide-circle-x' : isComplete ? 'i-lucide-check' : void 0"
-          :class="{ 'animate-shake': isError }"
-          @click="confirmHandler" />
-      </slot>
+      <UButton
+        :label="isError ? 'Error' : isComplete ? 'Complete' : confirmLabel"
+        size="lg"
+        color="neutral"
+        variant="outline"
+        :loading="isLoading"
+        :disabled="isComplete"
+        :leading-icon="isError ? 'i-lucide-circle-x' : isComplete ? 'i-lucide-check' : void 0"
+        :class="{ 'animate-shake': isError }"
+        @click="confirmHandler" />
     </template>
   </UModal>
 </template>

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

@@ -2,18 +2,8 @@ import type { AppConfig } from "@nuxt/schema";
 import theme from "#build/ui-elements/dialog-confirm";
 import type { ComponentConfig } from "../types/tv.js";
 type DialogConfirm = ComponentConfig<typeof theme, AppConfig, "dialogConfirm">;
-export interface DialogConfirmEmits {
-    "update:open": [value: boolean];
-    close: [value?: any];
-    "after:leave": [];
-}
-export interface DialogConfirmSlots {
-    title(props?: {}): any;
-    description(props?: {}): any;
-    actions(props?: {}): any;
-}
-export interface DialogConfirmProps {
-    title: string;
+interface DialogConfirmProps {
+    title?: string;
     description?: string;
     icon?: boolean;
     confirmLabel?: string;
@@ -23,11 +13,11 @@ export interface DialogConfirmProps {
     variant?: DialogConfirm["variants"]["variant"];
     onConfirm?: (() => void) | (() => Promise<void>);
     onDismiss?: () => void;
-    ui?: Partial<DialogConfirm["slots"]>;
+    ui?: DialogConfirm["slots"];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DialogConfirmProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+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;
@@ -35,15 +25,4 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Dialog
     onClose?: ((value?: any) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onAfter:leave"?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    title?: (props: {}) => any;
-} & {
-    description?: (props: {}) => any;
-} & {
-    actions?: (props: {}) => any;
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/package.json

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