nuxt-ui-elements 0.1.24 → 0.1.26

package/README.md

@@ -1,12 +1,3 @@
-<!--
-Get your module up and running quickly.
-
-Find and replace all on all files (CMD+SHIFT+F):
-- Name: My Module
-- Package name: my-module
-- Description: My new Nuxt module
--->
-
 # Nuxt UI Elements
 
 [![npm version][npm-version-src]][npm-version-href]
@@ -14,37 +5,49 @@ Find and replace all on all files (CMD+SHIFT+F):
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-A collection of beautiful, animated UI components for Nuxt applications. Built with Vue 3 and designed to work seamlessly with Nuxt UI.
+**A growing collection of components and utilities that extend [@nuxt/ui](https://ui.nuxt.com) with enhanced functionality.**
+
+This module extends Nuxt UI with additional components and utilities designed to integrate with Nuxt UI's design system.
+
+> **Early Development Notice**: This project is in early development. APIs, component interfaces, and utilities are subject to change in future releases. Please use with caution in production environments.
 
 - [✨ &nbsp;Release Notes](/CHANGELOG.md)
 
 ## Features
 
-- ✨ **FlickeringGrid** - Animated canvas-based grid background with gradient effects
-- 🌟 **ShimmerButton** - Animated button with elegant shimmer effect
-- 🎨 **Dark Mode Support** - Automatic theme switching with customizable colors
-- 🚀 **Performance Optimized** - Uses IntersectionObserver and only animates when visible
-- 📦 **Auto-import** - Components are automatically available in your app
+- 🧩 **Additional Components** - Extended component library built on top of Nuxt UI
+- 🎨 **Themeable** - Seamlessly extends Nuxt UI's theme system with color variants
+- 📦 **Tree-shakeable Utilities** - Standard utilities via `#std` for common tasks
+- 🔄 **Auto-import** - Components and composables are automatically available
 - 🎯 **TypeScript** - Full type safety out of the box
-- ⚡️ **Lightweight** - Zero external dependencies
+- 🌙 **Dark Mode** - Automatic theme switching compatible with Nuxt UI
+
+## Requirements
 
-## Quick Setup
+This module requires [@nuxt/ui](https://ui.nuxt.com) v4.0.0 or higher.
 
-1. Install the module to your Nuxt application:
+## Installation
 
 ```bash
+# pnpm
 pnpm add nuxt-ui-elements
+
+# npm
+npm install nuxt-ui-elements
+
+# yarn
+yarn add nuxt-ui-elements
 ```
 
-2. Add the module to your `nuxt.config.ts`:
+Add the module to your `nuxt.config.ts`:
 
-```ts
+```typescript
 export default defineNuxtConfig({
-  modules: ["@nuxt/ui", "nuxt-ui-elements"],
+  modules: ['nuxt-ui-elements']
 })
 ```
 
-3. Import the module's CSS in your main CSS file (e.g., `assets/css/main.css`):
+Import the module's CSS in your main CSS file (e.g., `assets/css/main.css`):
 
 ```css
 @import "tailwindcss";
@@ -54,196 +57,232 @@ export default defineNuxtConfig({
 
 That's it! You can now use Nuxt UI Elements in your Nuxt app ✨
 
-> **Note:** This module requires `@nuxt/ui` v4.x as a peer dependency. The CSS import is required for Tailwind v4 to properly scan and generate styles from the component themes.
+> **Note:** The CSS import is required for Tailwind v4 to properly scan and generate styles from the component themes.
 
 ## Usage
 
-### FlickeringGrid
+Components and composables are automatically imported. Standard utilities (`#std`) are available via explicit imports.
+
+### Dialog Components
+
+The module provides two dialog components via the `useDialog` composable: Alert and Confirm dialogs.
 
-A beautiful animated grid background component perfect for hero sections and landing pages.
+#### Alert Dialog
+
+Display informational messages to users:
 
 ```vue
+<script setup>
+const { alert } = useDialog()
+
+function showAlert() {
+  alert({
+    title: 'Success!',
+    description: 'Your changes have been saved.',
+    icon: 'i-lucide-check-circle',
+    label: 'Got it',
+    color: 'success'
+  })
+}
+</script>
+
 <template>
-  <div class="relative w-full h-screen">
-    <UiElementsFlickeringGrid
-      :square-size="7"
-      :grid-gap="10"
-      gradient-direction="left-right"
-      gradient-end-color="white"
-      :flicker-speed="0.2"
-      class="z-0" />
-    <div class="relative z-10">
-      <!-- Your content here -->
-    </div>
-  </div>
+  <UButton @click="showAlert">Show Alert</UButton>
 </template>
 ```
 
-#### Props
-
-| Prop                     | Type     | Default        | Description                            |
-| ------------------------ | -------- | -------------- | -------------------------------------- |
-| `squareSize`             | `number` | `4`            | Size of each grid square in pixels     |
-| `gridGap`                | `number` | `6`            | Gap between grid squares               |
-| `flickerChance`          | `number` | `0.3`          | Probability of flicker per frame       |
-| `flickerSpeed`           | `number` | `1`            | Animation speed multiplier             |
-| `gradientDirection`      | `string` | `'left-right'` | Gradient direction (see options below) |
-| `gradientStartColor`     | `string` | `'#aaf'`       | Light mode gradient start color        |
-| `gradientEndColor`       | `string` | `'#fff'`       | Light mode gradient end color          |
-| `flickerColor`           | `string` | `'#fff'`       | Light mode flicker color               |
-| `darkGradientStartColor` | `string` | `'#23272f'`    | Dark mode gradient start color         |
-| `darkGradientEndColor`   | `string` | `'#353b45'`    | Dark mode gradient end color           |
-| `darkFlickerColor`       | `string` | `'#6b7280'`    | Dark mode flicker color                |
-| `maxOpacity`             | `number` | `0.3`          | Maximum opacity of grid squares        |
-| `width`                  | `number` | -              | Custom width (defaults to container)   |
-| `height`                 | `number` | -              | Custom height (defaults to container)  |
-| `class`                  | `string` | -              | Additional CSS classes                 |
-
-#### Gradient Directions
-
-- `left-right`
-- `right-left`
-- `top-bottom`
-- `bottom-top`
-- `in-out` (radial from center)
-- `out-in` (radial to center)
-- `top-left-bottom-right`
-- `bottom-right-top-left`
-
-### ShimmerButton
-
-An animated button component with an elegant shimmer effect, perfect for call-to-action buttons and hero sections.
+**Alert Dialog API:**
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `title` | `string` | `''` | Dialog title |
+| `description` | `string` | `''` | Dialog description/message |
+| `icon` | `string` | `undefined` | Icon name (e.g., 'i-lucide-info') |
+| `label` | `string` | `'Ok'` | Dismiss button label |
+| `color` | `'primary' \| 'secondary' \| 'success' \| 'info' \| 'warning' \| 'error' \| 'neutral'` | `'neutral'` | Color theme |
+| `variant` | `'solid' \| 'outline'` | `'solid'` | Dialog variant |
+| `onDismiss` | `() => void \| Promise<void>` | `() => {}` | Callback when dismissed |
+| `ui` | `object` | `{}` | Custom UI classes override |
+
+#### Confirm Dialog
+
+Request user confirmation with async support:
 
 ```vue
+<script setup>
+const { confirm } = useDialog()
+
+async function handleDelete() {
+  confirm({
+    title: 'Delete Item',
+    description: 'Are you sure? This action cannot be undone.',
+    confirmLabel: 'Delete',
+    dismissLabel: 'Cancel',
+    color: 'error',
+    onConfirm: async () => {
+      // Async operations are supported
+      await deleteItem()
+      // Dialog shows loading state and success feedback automatically
+    },
+    onDismiss: () => {
+      console.log('User cancelled')
+    }
+  })
+}
+</script>
+
 <template>
-  <UEButtonShimmer
-    label="Get Started"
-    size="lg"
-    shimmer-color="#60a5fa"
-    background="rgba(59, 130, 246, 1)"
-    :speed="2.5"
-    @click="handleClick" />
+  <UButton @click="handleDelete">Delete</UButton>
 </template>
 ```
 
-#### Props
+**Confirm Dialog API:**
 
-| Prop           | Type     | Default              | Description                                 |
-| -------------- | -------- | -------------------- | ------------------------------------------- |
-| `label`        | `string` | -                    | Button label text                           |
-| `shimmerColor` | `string` | `'#ffffff'`          | Color of the shimmer effect                 |
-| `shimmerSize`  | `string` | `'0.05em'`           | Size of the shimmer effect                  |
-| `speed`        | `number` | `3`                  | Animation speed in seconds (lower = faster) |
-| `background`   | `string` | `'rgba(0, 0, 0, 1)'` | Background color of the button              |
-| `radius`       | `string` | `'100px'`            | Border radius of the button                 |
-| `size`         | `string` | `'md'`               | Button size: `xs`, `sm`, `md`, `lg`, `xl`   |
-| `class`        | `string` | -                    | Additional CSS classes                      |
-| `ui`           | `object` | -                    | UI slot customization for advanced styling  |
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `title` | `string` | `''` | Dialog title |
+| `description` | `string` | `''` | Dialog description/message |
+| `icon` | `boolean` | `true` | Show icon (auto-selected based on color) |
+| `confirmLabel` | `string` | `'Yes'` | Confirm button label |
+| `dismissLabel` | `string` | `'No'` | Dismiss button label |
+| `color` | `'primary' \| 'secondary' \| 'success' \| 'info' \| 'warning' \| 'error' \| 'neutral'` | `'neutral'` | Color theme |
+| `variant` | `'solid' \| 'outline'` | `'solid'` | Dialog variant |
+| `close` | `boolean` | `false` | Show close button in header |
+| `onConfirm` | `() => void \| Promise<void>` | `() => {}` | Callback when confirmed (supports async) |
+| `onDismiss` | `() => void \| Promise<void>` | `() => {}` | Callback when dismissed |
+| `ui` | `object` | `{}` | Custom UI classes override |
 
-#### Slots
+**Async Support**: When `onConfirm` returns a Promise, the dialog automatically shows loading state and displays success/error feedback before closing.
 
-- `leading` - Content before the label (e.g., icons)
-- `default` - Main button content (overrides `label` prop)
-- `trailing` - Content after the label (e.g., icons)
+## Standard Utilities (`#std`)
 
-#### Events
+The module provides tree-shakeable utility functions via the `#std` alias. These are **not** auto-imported and must be explicitly imported.
 
-- `click` - Emitted when the button is clicked
+### Date Utilities
 
-#### Examples
+Comprehensive date manipulation built on `@internationalized/date`. Import the entire module or individual functions:
 
-**Basic Usage:**
+```typescript
+import std from '#std'
 
-```vue
-<UEButtonShimmer label="Click Me" />
-```
+const nextMonth = std.date.add(std.date.today(), 1, 'month')
+const formatted = std.date.format(new Date(), 'YYYY-MM-DD')
 
-**With Custom Colors:**
+// Or import individual functions
+import { add, format, today, relative } from '#std/date'
 
-```vue
-<UEButtonShimmer label="Primary Action" shimmer-color="#a78bfa" background="rgba(139, 92, 246, 1)" />
-```
+// Add/subtract time
+const nextMonth = add(today(), 1, 'month')
+const lastWeek = subtract(new Date(), 7, 'day')
 
-**Different Sizes:**
+// Format dates (Day.js-compatible tokens)
+format(new Date(), 'YYYY-MM-DD')           // "2024-01-15"
+format(new Date(), 'MMMM D, YYYY')         // "January 15, 2024"
+format(new Date(), 'MMM DD, YYYY h:mm A')  // "Jan 15, 2024 3:30 PM"
 
-```vue
-<UEButtonShimmer label="Small" size="sm" />
-<UEButtonShimmer label="Medium" size="md" />
-<UEButtonShimmer label="Large" size="lg" />
-<UEButtonShimmer label="Extra Large" size="xl" />
-```
+// Relative time
+relative(someDate)  // "2 days ago" or "in 3 months"
 
-**With Slots:**
+// Date comparisons
+isBefore(date1, date2)
+isAfter(date1, date2)
+isSame(date1, date2)
+isBetween(date, startDate, endDate)
 
-```vue
-<UEButtonShimmer>
-  <template #leading>
-    <Icon name="i-heroicons-arrow-right" />
-  </template>
-  Get Started
-  <template #trailing>
-    <Icon name="i-heroicons-arrow-right" />
-  </template>
-</UEButtonShimmer>
-```
-
-**Fast Animation:**
-
-```vue
-<UEButtonShimmer label="Fast Shimmer" :speed="1.5" />
-```
+// Date manipulation
+set(someDate, { day: 15, month: 3 })
+startOf(someDate, 'month')
+endOf(someDate, 'week')
 
-## Configuration
+// Calculate differences
+diff(date1, date2, 'days')  // number of days between dates
 
-You can customize the component prefix in your `nuxt.config.ts`:
+// Conversions
+toDate(dateValue)              // Convert to JavaScript Date
+asCalendarDate(date)           // Date without time
+asCalendarDateTime(date)       // Date with time, no timezone
+asZonedDateTime(date, 'UTC')   // Date with timezone
 
-```ts
-export default defineNuxtConfig({
-  modules: ["nuxt-ui-elements"],
-  uiElements: {
-    prefix: "Custom", // Components will be named CustomFlickeringGrid
-  },
-})
+// Utilities
+today()              // Current date
+now()                // Current date and time
+parse('2024-01-15')  // Parse date string
 ```
 
+**Available Functions:**
+
+| Function | Description |
+|----------|-------------|
+| `add(date, amount, unit)` | Add time to a date |
+| `subtract(date, amount, unit)` | Subtract time from a date |
+| `set(date, values)` | Set specific date/time values |
+| `format(date, formatString, locale?)` | Format date with Day.js tokens |
+| `relative(date, locale?)` | Get relative time string |
+| `toDate(input, timeZone?)` | Convert to JavaScript Date |
+| `asCalendarDate(input)` | Convert to date without time |
+| `asCalendarDateTime(input)` | Convert to date with time |
+| `asZonedDateTime(input, timeZone?)` | Convert to date with timezone |
+| `isBefore(date1, date2)` | Check if date1 is before date2 |
+| `isAfter(date1, date2)` | Check if date1 is after date2 |
+| `isSame(date1, date2)` | Check if dates are equal |
+| `isBetween(date, start, end, inclusive?)` | Check if date is in range |
+| `diff(date1, date2, unit?)` | Calculate difference between dates |
+| `startOf(date, unit, locale?)` | Get start of time period |
+| `endOf(date, unit, locale?)` | Get end of time period |
+| `today(timeZone?)` | Get today's date |
+| `now(timeZone?)` | Get current date and time |
+| `parse(dateString)` | Parse YYYY-MM-DD string |
+
+Plus re-exported utilities: `isSameDay`, `isSameMonth`, `isSameYear`, `isToday`, `isWeekend`, `getDayOfWeek`, `getWeeksInMonth`, `getLocalTimeZone`
+
+**Tree-shakeable**: All utilities under `#std` are tree-shakeable. Only imported functions will be included in your bundle, whether you import the entire module or individual functions.
+
 ## Contribution
 
 <details>
   <summary>Local development</summary>
-  
+
   ```bash
   # Install dependencies
-  npm install
-  
+  pnpm install
+
   # Generate type stubs
-  npm run dev:prepare
-  
+  pnpm run dev:prepare
+
   # Develop with the playground
-  npm run dev
-  
+  pnpm run dev
+
   # Build the playground
-  npm run dev:build
-  
+  pnpm run dev:build
+
   # Run ESLint
-  npm run lint
-  
+  pnpm run lint
+
   # Run Vitest
-  npm run test
-  npm run test:watch
-  
+  pnpm run test
+  pnpm run test:watch
+
   # Release new version
-  npm run release
+  pnpm run release
   ```
 
 </details>
 
+## License
+
+MIT
+
+## Repository
+
+[https://github.com/genu/nuxt-ui-elements](https://github.com/genu/nuxt-ui-elements)
+
 <!-- Badges -->
 
-[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-version-href]: https://npmjs.com/package/my-module
-[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-downloads-href]: https://npm.chart.dev/my-module
-[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
-[license-href]: https://npmjs.com/package/my-module
+[npm-version-src]: https://img.shields.io/npm/v/nuxt-ui-elements/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/nuxt-ui-elements
+[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-ui-elements.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/nuxt-ui-elements
+[license-src]: https://img.shields.io/npm/l/nuxt-ui-elements.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/nuxt-ui-elements
 [nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
 [nuxt-href]: https://nuxt.com

package/dist/module.d.mts

@@ -1,4 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
+export * from '../dist/runtime/types/index.js';
 
 interface ModuleOptions {
     /**

package/dist/module.json

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

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { addTemplate, defineNuxtModule, createResolver, addImportsDir } from '@nuxt/kit';
+import { addTemplate, defineNuxtModule, createResolver, addImportsDir, addImports } from '@nuxt/kit';
 import { kebabCase } from 'scule';
 
 const dialogConfirm = (options) => ({
@@ -251,7 +251,14 @@ const module$1 = defineNuxtModule({
     addTemplates(optionsWithTheme);
     nuxt.options.css.push(resolver.resolve("./runtime/index.css"));
     addImportsDir(resolver.resolve("./runtime/composables"));
+    addImports([
+      {
+        name: "useUploadManager",
+        from: resolver.resolve("./runtime/composables/useUploadManager")
+      }
+    ]);
     nuxt.options.alias["#std"] = resolver.resolve("./runtime/utils/std");
+    nuxt.options.alias["#ui-elements"] = resolver.resolve("./runtime");
   }
 });