nuxt-ui-elements 0.1.41 → 0.2.0

package/README.md

@@ -7,11 +7,9 @@
 
 **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.
 
-- [✨  Release Notes](/CHANGELOG.md)
+- [Release Notes](/CHANGELOG.md)
 
 ## Features
 
@@ -21,26 +19,20 @@ This module extends Nuxt UI with additional components and utilities designed to
 - 🔄 **Auto-import** - Components and composables are automatically available
 - 🎯 **TypeScript** - Full type safety out of the box
 - 🌙 **Dark Mode** - Automatic theme switching compatible with Nuxt UI
-- 🔀 **Vue Flow Integration** - Themed wrapper components for interactive flowcharts and diagrams
 
 ## Requirements
 
 This module requires [@nuxt/ui](https://ui.nuxt.com) v4.0.0 or higher.
 
-## Installation
+## Quick Setup
+
+Install the module:
 
 ```bash
-# pnpm
 pnpm add nuxt-ui-elements
-
-# npm
-npm install nuxt-ui-elements
-
-# yarn
-yarn add nuxt-ui-elements
 ```
 
-Add the module to your `nuxt.config.ts`:
+Add it to your `nuxt.config.ts`:
 
 ```typescript
 export default defineNuxtConfig({
@@ -56,407 +48,10 @@ Import the module's CSS in your main CSS file (e.g., `assets/css/main.css`):
 @import "nuxt-ui-elements";
 ```
 
-That's it! You can now use Nuxt UI Elements in your Nuxt app ✨
+That's it! Components and composables are automatically available in your Nuxt app.
 
 > **Note:** The CSS import is required for Tailwind v4 to properly scan and generate styles from the component themes.
 
-## Usage
-
-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.
-
-#### 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>
-  <UButton @click="showAlert">Show Alert</UButton>
-</template>
-```
-
-**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>
-  <UButton @click="handleDelete">Delete</UButton>
-</template>
-```
-
-**Confirm Dialog API:**
-
-| 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 |
-
-**Async Support**: When `onConfirm` returns a Promise, the dialog automatically shows loading state and displays success/error feedback before closing.
-
-### Flow Components
-
-Themed wrapper components for [Vue Flow](https://vueflow.dev/), providing interactive flowcharts and node-based diagrams with Nuxt UI theming integration.
-
-#### Prerequisites
-
-Flow components require the `@vue-flow` packages. Install them alongside `nuxt-ui-elements`:
-
-```bash
-pnpm add @vue-flow/core @vue-flow/background @vue-flow/controls @vue-flow/minimap
-```
-
-#### Flow
-
-The main container component that wraps Vue Flow with Nuxt UI theming and SSR safety via `<ClientOnly>`.
-
-```vue
-<script setup>
-const nodes = ref([
-  { id: '1', type: 'custom', position: { x: 0, y: 0 }, data: { label: 'Start' } },
-  { id: '2', type: 'custom', position: { x: 250, y: 100 }, data: { label: 'Process' } },
-])
-
-const edges = ref([
-  { id: 'e1-2', source: '1', target: '2', animated: true },
-])
-</script>
-
-<template>
-  <UEFlow :nodes="nodes" :edges="edges" @connect="onConnect">
-    <template #node-custom="{ data }">
-      <UEFlowNode :label="data.label" color="primary" variant="outline">
-        <UEFlowHandle type="target" position="left" />
-        <UEFlowHandle type="source" position="right" />
-      </UEFlowNode>
-    </template>
-
-    <UEFlowBackground />
-    <UEFlowControls />
-    <UEFlowMiniMap />
-  </UEFlow>
-</template>
-```
-
-**Flow API:**
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `nodes` | `Node[]` | `[]` | Array of node objects |
-| `edges` | `Edge[]` | `[]` | Array of edge objects |
-| `nodeTypes` | `Record<string, any>` | `undefined` | Map of custom node type components |
-| `edgeTypes` | `Record<string, any>` | `undefined` | Map of custom edge type components |
-| `fitViewOnInit` | `boolean` | `true` | Fit view on initialization |
-| `minZoom` | `number` | `0.2` | Minimum zoom level |
-| `maxZoom` | `number` | `4` | Maximum zoom level |
-| `nodesDraggable` | `boolean` | `true` | Whether nodes are draggable |
-| `nodesConnectable` | `boolean` | `true` | Whether nodes are connectable |
-| `elementsSelectable` | `boolean` | `true` | Whether elements are selectable |
-| `connectionMode` | `ConnectionMode` | `undefined` | Connection mode |
-| `defaultEdgeOptions` | `Record<string, any>` | `undefined` | Default options for edges |
-| `ui` | `object` | `{}` | Custom UI classes override |
-
-**Events:**
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `update:nodes` | `Node[]` | Emitted when nodes change |
-| `update:edges` | `Edge[]` | Emitted when edges change |
-| `nodeClick` | `event` | Emitted on node click |
-| `edgeClick` | `event` | Emitted on edge click |
-| `paneClick` | `event` | Emitted on pane click |
-| `connect` | `params` | Emitted when a connection is made |
-
-**Slots:** All Vue Flow slots are forwarded, including custom node/edge type slots (e.g., `#node-custom`).
-
-#### FlowNode
-
-A styled node component with color and variant theming. Use inside custom node type slots.
-
-```vue
-<template #node-custom="{ data, selected }">
-  <UEFlowNode :label="data.label" color="success" variant="soft" :selected="selected">
-    <UEFlowHandle type="target" position="top" />
-    <template #default>
-      <p>Custom content here</p>
-    </template>
-    <UEFlowHandle type="source" position="bottom" />
-  </UEFlowNode>
-</template>
-```
-
-**FlowNode API:**
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `label` | `string` | `undefined` | Node label text |
-| `color` | `'primary' \| 'secondary' \| 'success' \| 'info' \| 'warning' \| 'error' \| 'neutral'` | `'primary'` | Theme color |
-| `variant` | `'solid' \| 'outline' \| 'soft' \| 'subtle'` | `'outline'` | Visual variant |
-| `selected` | `boolean` | `false` | Whether the node is selected (adds ring indicator) |
-| `ui` | `object` | `{}` | Custom UI classes override |
-
-**Slots:**
-
-| Slot | Description |
-|------|-------------|
-| `default` | Custom content rendered below the label |
-
-#### FlowHandle
-
-A themed connection handle for nodes. Place inside `FlowNode` to define source/target connection points.
-
-```vue
-<UEFlowNode label="My Node" color="primary">
-  <UEFlowHandle type="target" position="top" color="primary" />
-  <UEFlowHandle type="source" position="bottom" color="primary" :connected="true" />
-</UEFlowNode>
-```
-
-**FlowHandle API:**
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `type` | `'source' \| 'target'` | **(required)** | Handle type |
-| `position` | `Position \| 'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | Handle position on the node |
-| `id` | `string` | `undefined` | Handle ID (required when a node has multiple handles of the same type) |
-| `color` | `'primary' \| 'secondary' \| 'success' \| 'info' \| 'warning' \| 'error' \| 'neutral'` | `'primary'` | Theme color |
-| `connected` | `boolean` | `false` | Whether a connection is active (fills the handle with color) |
-| `ui` | `object` | `{}` | Custom UI classes override |
-
-#### FlowBackground
-
-A themed background pattern for the flow canvas.
-
-```vue
-<UEFlow :nodes="nodes" :edges="edges">
-  <!-- Dot pattern (default) -->
-  <UEFlowBackground />
-
-  <!-- Line pattern with custom settings -->
-  <UEFlowBackground pattern="lines" :gap="30" :size="2" color="#ccc" />
-</UEFlow>
-```
-
-**FlowBackground API:**
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `pattern` | `'dots' \| 'lines'` | `'dots'` | Background pattern |
-| `gap` | `number \| number[]` | `20` | Pattern gap spacing |
-| `size` | `number` | `1` | Pattern element size |
-| `color` | `string` | `undefined` | Pattern color |
-| `lineWidth` | `number` | `undefined` | Line width (only for `lines` pattern) |
-| `ui` | `object` | `{}` | Custom UI classes override |
-
-#### FlowControls
-
-A themed control panel for zoom, fit view, and interactivity toggles.
-
-```vue
-<UEFlow :nodes="nodes" :edges="edges">
-  <!-- Default controls (all visible) -->
-  <UEFlowControls />
-
-  <!-- Only zoom and fit view -->
-  <UEFlowControls :show-interactive="false" position="top-left" />
-</UEFlow>
-```
-
-**FlowControls API:**
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `showZoom` | `boolean` | `true` | Show zoom in/out buttons |
-| `showFitView` | `boolean` | `true` | Show fit-view button |
-| `showInteractive` | `boolean` | `true` | Show interactive toggle |
-| `fitViewParams` | `FitViewParams` | `undefined` | Parameters for fit view action |
-| `position` | `PanelPositionType` | `'bottom-left'` | Panel position on the canvas |
-| `ui` | `object` | `{}` | Custom UI classes override |
-
-**Slots:**
-
-| Slot | Description |
-|------|-------------|
-| `default` | Additional custom controls |
-
-#### FlowMiniMap
-
-A themed minimap for navigating large flow diagrams.
-
-```vue
-<UEFlow :nodes="nodes" :edges="edges">
-  <!-- Default minimap -->
-  <UEFlowMiniMap />
-
-  <!-- Customized minimap -->
-  <UEFlowMiniMap
-    :pannable="true"
-    :zoomable="true"
-    position="top-right"
-    :node-border-radius="8"
-  />
-</UEFlow>
-```
-
-**FlowMiniMap API:**
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `pannable` | `boolean` | `true` | Enable drag to pan the viewport |
-| `zoomable` | `boolean` | `true` | Enable scroll to zoom the viewport |
-| `position` | `PanelPositionType` | `'bottom-right'` | Panel position on the canvas |
-| `nodeColor` | `string` | `undefined` | Node fill color in the minimap |
-| `nodeStrokeColor` | `string` | `undefined` | Node stroke color in the minimap |
-| `nodeBorderRadius` | `number` | `4` | Node border radius in the minimap |
-| `maskColor` | `string` | `undefined` | Viewport mask overlay color |
-| `width` | `number` | `undefined` | Minimap width |
-| `height` | `number` | `undefined` | Minimap height |
-| `ui` | `object` | `{}` | Custom UI classes override |
-
-## Standard Utilities (`#std`)
-
-The module provides tree-shakeable utility functions via the `#std` alias. These are **not** auto-imported and must be explicitly imported.
-
-### Date Utilities
-
-Comprehensive date manipulation built on `@internationalized/date`. Import the entire module or individual functions:
-
-```typescript
-import std from '#std'
-
-const nextMonth = std.date.add(std.date.today(), 1, 'month')
-const formatted = std.date.format(new Date(), 'YYYY-MM-DD')
-
-// Or import individual functions
-import { add, format, today, relative } from '#std/date'
-
-// Add/subtract time
-const nextMonth = add(today(), 1, 'month')
-const lastWeek = subtract(new Date(), 7, 'day')
-
-// 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"
-
-// Relative time
-relative(someDate)  // "2 days ago" or "in 3 months"
-
-// Date comparisons
-isBefore(date1, date2)
-isAfter(date1, date2)
-isSame(date1, date2)
-isBetween(date, startDate, endDate)
-
-// Date manipulation
-set(someDate, { day: 15, month: 3 })
-startOf(someDate, 'month')
-endOf(someDate, 'week')
-
-// Calculate differences
-diff(date1, date2, 'days')  // number of days between dates
-
-// 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
-
-// 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>

package/dist/module.json

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

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { addTemplate, defineNuxtModule, createResolver, addImportsDir, addComponentsDir } from '@nuxt/kit';
+import { addTemplate, defineNuxtModule, createResolver, addImportsDir, addComponentsDir, tryResolveModule } from '@nuxt/kit';
 import { kebabCase } from 'scule';
 
 const dialogConfirm = (options) => ({
@@ -481,7 +481,7 @@ const module$1 = defineNuxtModule({
   moduleDependencies: {
     "@nuxt/ui": {}
   },
-  setup(options, nuxt) {
+  async setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
     const uiOptions = nuxt.options.ui;
     const themeColors = uiOptions?.theme?.colors || ["primary", "secondary", "success", "info", "warning", "error"];
@@ -498,39 +498,25 @@ const module$1 = defineNuxtModule({
     nuxt.options.alias["#ui-elements"] = resolver.resolve("./runtime");
     addComponentsDir({
       path: resolver.resolve("./runtime/components"),
-      prefix: options.prefix
+      prefix: options.prefix,
+      ignore: ["**/flow/**"]
     });
-    try {
-      const vueFlowCorePath = resolver.resolve("@vue-flow/core");
-      if (vueFlowCorePath) {
-        nuxt.options.css.push("@vue-flow/core/dist/style.css");
-        nuxt.options.css.push("@vue-flow/core/dist/theme-default.css");
-        nuxt.options.build.transpile.push("@vue-flow/core");
-      }
-    } catch {
+    const moduleDirs = nuxt.options.modulesDir;
+    if (await tryResolveModule("@vue-flow/core", moduleDirs)) {
+      nuxt.options.css.push("@vue-flow/core/dist/style.css");
+      nuxt.options.css.push("@vue-flow/core/dist/theme-default.css");
+      nuxt.options.build.transpile.push("@vue-flow/core");
     }
-    try {
-      const bgPath = resolver.resolve("@vue-flow/background");
-      if (bgPath) {
-        nuxt.options.build.transpile.push("@vue-flow/background");
-      }
-    } catch {
+    if (await tryResolveModule("@vue-flow/background", moduleDirs)) {
+      nuxt.options.build.transpile.push("@vue-flow/background");
     }
-    try {
-      const controlsPath = resolver.resolve("@vue-flow/controls");
-      if (controlsPath) {
-        nuxt.options.css.push("@vue-flow/controls/dist/style.css");
-        nuxt.options.build.transpile.push("@vue-flow/controls");
-      }
-    } catch {
+    if (await tryResolveModule("@vue-flow/controls", moduleDirs)) {
+      nuxt.options.css.push("@vue-flow/controls/dist/style.css");
+      nuxt.options.build.transpile.push("@vue-flow/controls");
     }
-    try {
-      const minimapPath = resolver.resolve("@vue-flow/minimap");
-      if (minimapPath) {
-        nuxt.options.css.push("@vue-flow/minimap/dist/style.css");
-        nuxt.options.build.transpile.push("@vue-flow/minimap");
-      }
-    } catch {
+    if (await tryResolveModule("@vue-flow/minimap", moduleDirs)) {
+      nuxt.options.css.push("@vue-flow/minimap/dist/style.css");
+      nuxt.options.build.transpile.push("@vue-flow/minimap");
     }
   }
 });

package/dist/runtime/components/DialogAlert.vue

@@ -24,7 +24,7 @@ const {
   color: { type: null, required: false },
   variant: { type: null, required: false },
   onDismiss: { type: Function, required: false },
-  ui: { type: Object, required: false }
+  ui: { type: null, required: false }
 });
 const emits = defineEmits(["update:open", "close"]);
 const ui = computed(

package/dist/runtime/components/DialogConfirm.vue

@@ -31,7 +31,7 @@ const {
   close: { type: Boolean, 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"]);
 const isLoading = ref(false);

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

@@ -2,6 +2,9 @@ import type { AppConfig } from "@nuxt/schema";
 import theme from "#build/ui-elements/flow";
 import type { ComponentConfig } from "../types/index.js";
 import type { Node, Edge, ConnectionMode } from "@vue-flow/core";
+import type { FlowBackgroundProps } from "./flow/FlowBackground.vue.js";
+import type { FlowControlsProps } from "./flow/FlowControls.vue.js";
+import type { FlowMiniMapProps } from "./flow/FlowMiniMap.vue.js";
 type Flow = ComponentConfig<typeof theme, AppConfig, "flow">;
 export interface FlowProps {
     /** Array of node objects */
@@ -28,6 +31,12 @@ export interface FlowProps {
     connectionMode?: ConnectionMode;
     /** Default edge options */
     defaultEdgeOptions?: Record<string, any>;
+    /** Show background (true for defaults, or pass config object) */
+    background?: boolean | Omit<FlowBackgroundProps, "ui">;
+    /** Show controls (true for defaults, or pass config object) */
+    controls?: boolean | Omit<FlowControlsProps, "ui">;
+    /** Show minimap (true for defaults, or pass config object) */
+    minimap?: boolean | Omit<FlowMiniMapProps, "ui">;
     /** Theme slot overrides */
     ui?: Flow["slots"];
 }
@@ -39,6 +48,9 @@ export interface FlowEmits {
     paneClick: [event: any];
     connect: [params: any];
 }
+export type { FlowBackgroundProps, FlowControlsProps, FlowMiniMapProps };
+export type { FlowNodeProps } from "./FlowNode.vue.js";
+export type { FlowHandleProps } from "./FlowHandle.vue.js";
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FlowProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/dist/runtime/components/Flow.vue

@@ -6,6 +6,9 @@ import theme from "#build/ui-elements/flow";
 import { computed } from "vue";
 import { VueFlow } from "@vue-flow/core";
 import { tv } from "../utils/tv";
+import FlowBackground from "./flow/FlowBackground.vue";
+import FlowControls from "./flow/FlowControls.vue";
+import FlowMiniMap from "./flow/FlowMiniMap.vue";
 const {
   nodes = [],
   edges = [],
@@ -15,6 +18,9 @@ const {
   nodesDraggable = true,
   nodesConnectable = true,
   elementsSelectable = true,
+  background = true,
+  controls = true,
+  minimap = false,
   ui: uiProps = {}
 } = defineProps({
   nodes: { type: Array, required: false },
@@ -29,10 +35,28 @@ const {
   elementsSelectable: { type: Boolean, required: false },
   connectionMode: { type: String, required: false },
   defaultEdgeOptions: { type: Object, required: false },
-  ui: { type: Object, required: false }
+  background: { type: [Boolean, Object], required: false },
+  controls: { type: [Boolean, Object], required: false },
+  minimap: { type: [Boolean, Object], required: false },
+  ui: { type: null, required: false }
 });
 const emit = defineEmits(["update:nodes", "update:edges", "nodeClick", "edgeClick", "paneClick", "connect"]);
 const ui = computed(() => tv({ extend: tv(theme) })({}));
+const backgroundProps = computed(() => {
+  if (background === false) return null;
+  if (background === true) return {};
+  return background;
+});
+const controlsProps = computed(() => {
+  if (controls === false) return null;
+  if (controls === true) return {};
+  return controls;
+});
+const minimapProps = computed(() => {
+  if (minimap === false) return null;
+  if (minimap === true) return {};
+  return minimap;
+});
 </script>
 
 <template>
@@ -61,6 +85,10 @@ const ui = computed(() => tv({ extend: tv(theme) })({}));
         <template v-for="(_, name) in $slots" #[name]="slotData">
           <slot :name="name" v-bind="slotData ?? {}" />
         </template>
+
+        <FlowBackground v-if="backgroundProps" v-bind="backgroundProps" />
+        <FlowControls v-if="controlsProps" v-bind="controlsProps" />
+        <FlowMiniMap v-if="minimapProps" v-bind="minimapProps" />
       </VueFlow>
     </div>
 

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

@@ -2,6 +2,9 @@ import type { AppConfig } from "@nuxt/schema";
 import theme from "#build/ui-elements/flow";
 import type { ComponentConfig } from "../types/index.js";
 import type { Node, Edge, ConnectionMode } from "@vue-flow/core";
+import type { FlowBackgroundProps } from "./flow/FlowBackground.vue.js";
+import type { FlowControlsProps } from "./flow/FlowControls.vue.js";
+import type { FlowMiniMapProps } from "./flow/FlowMiniMap.vue.js";
 type Flow = ComponentConfig<typeof theme, AppConfig, "flow">;
 export interface FlowProps {
     /** Array of node objects */
@@ -28,6 +31,12 @@ export interface FlowProps {
     connectionMode?: ConnectionMode;
     /** Default edge options */
     defaultEdgeOptions?: Record<string, any>;
+    /** Show background (true for defaults, or pass config object) */
+    background?: boolean | Omit<FlowBackgroundProps, "ui">;
+    /** Show controls (true for defaults, or pass config object) */
+    controls?: boolean | Omit<FlowControlsProps, "ui">;
+    /** Show minimap (true for defaults, or pass config object) */
+    minimap?: boolean | Omit<FlowMiniMapProps, "ui">;
     /** Theme slot overrides */
     ui?: Flow["slots"];
 }
@@ -39,6 +48,9 @@ export interface FlowEmits {
     paneClick: [event: any];
     connect: [params: any];
 }
+export type { FlowBackgroundProps, FlowControlsProps, FlowMiniMapProps };
+export type { FlowNodeProps } from "./FlowNode.vue.js";
+export type { FlowHandleProps } from "./FlowHandle.vue.js";
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FlowProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/dist/runtime/components/FlowHandle.vue

@@ -18,7 +18,7 @@ const {
   id: { type: String, required: false },
   color: { type: null, required: false },
   connected: { type: Boolean, required: false },
-  ui: { type: Object, required: false }
+  ui: { type: null, required: false }
 });
 const ui = computed(
   () => tv({ extend: tv(theme) })({

package/dist/runtime/components/FlowNode.vue

@@ -16,7 +16,7 @@ const {
   color: { type: null, required: false },
   variant: { type: null, required: false },
   selected: { type: Boolean, required: false },
-  ui: { type: Object, required: false }
+  ui: { type: null, required: false }
 });
 const ui = computed(
   () => tv({ extend: tv(theme) })({

package/dist/runtime/components/ToggleGroup.vue

@@ -23,7 +23,7 @@ const {
   defaultValue: { type: null, required: false },
   multiple: { type: null, required: false },
   orientation: { type: String, required: false },
-  ui: { type: Object, required: false },
+  ui: { type: null, required: false },
   loop: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   name: { type: String, required: false },

package/dist/runtime/components/{FlowBackground.d.vue.ts → flow/FlowBackground.d.vue.ts}

@@ -1,6 +1,6 @@
 import type { AppConfig } from "@nuxt/schema";
 import theme from "#build/ui-elements/flow-background";
-import type { ComponentConfig } from "../types/index.js";
+import type { ComponentConfig } from "../../types/index.js";
 type FlowBackground = ComponentConfig<typeof theme, AppConfig, "flowBackground">;
 export interface FlowBackgroundProps {
     /** Background pattern variant */

package/dist/runtime/components/{FlowBackground.vue → flow/FlowBackground.vue}

@@ -5,7 +5,7 @@ import theme from "#build/ui-elements/flow-background";
 <script setup>
 import { computed } from "vue";
 import { Background } from "@vue-flow/background";
-import { tv } from "../utils/tv";
+import { tv } from "../../utils/tv";
 const {
   pattern = "dots",
   gap = 20,
@@ -19,7 +19,7 @@ const {
   size: { type: Number, required: false },
   color: { type: String, required: false },
   lineWidth: { type: Number, required: false },
-  ui: { type: Object, required: false }
+  ui: { type: null, required: false }
 });
 const ui = computed(
   () => tv({ extend: tv(theme) })({

package/dist/runtime/components/{FlowBackground.vue.d.ts → flow/FlowBackground.vue.d.ts}

@@ -1,6 +1,6 @@
 import type { AppConfig } from "@nuxt/schema";
 import theme from "#build/ui-elements/flow-background";
-import type { ComponentConfig } from "../types/index.js";
+import type { ComponentConfig } from "../../types/index.js";
 type FlowBackground = ComponentConfig<typeof theme, AppConfig, "flowBackground">;
 export interface FlowBackgroundProps {
     /** Background pattern variant */

package/dist/runtime/components/{FlowControls.d.vue.ts → flow/FlowControls.d.vue.ts}

@@ -1,6 +1,6 @@
 import type { AppConfig } from "@nuxt/schema";
 import theme from "#build/ui-elements/flow-controls";
-import type { ComponentConfig } from "../types/index.js";
+import type { ComponentConfig } from "../../types/index.js";
 import type { PanelPositionType, FitViewParams } from "@vue-flow/core";
 type FlowControls = ComponentConfig<typeof theme, AppConfig, "flowControls">;
 export interface FlowControlsProps {

package/dist/runtime/components/{FlowControls.vue → flow/FlowControls.vue}

@@ -5,7 +5,7 @@ import theme from "#build/ui-elements/flow-controls";
 <script setup>
 import { computed } from "vue";
 import { Controls } from "@vue-flow/controls";
-import { tv } from "../utils/tv";
+import { tv } from "../../utils/tv";
 const {
   showZoom = true,
   showFitView = true,
@@ -19,7 +19,7 @@ const {
   showInteractive: { type: Boolean, required: false },
   fitViewParams: { type: Object, required: false },
   position: { type: String, required: false },
-  ui: { type: Object, required: false }
+  ui: { type: null, required: false }
 });
 const ui = computed(() => tv({ extend: tv(theme) })({}));
 </script>

package/dist/runtime/components/{FlowControls.vue.d.ts → flow/FlowControls.vue.d.ts}

@@ -1,6 +1,6 @@
 import type { AppConfig } from "@nuxt/schema";
 import theme from "#build/ui-elements/flow-controls";
-import type { ComponentConfig } from "../types/index.js";
+import type { ComponentConfig } from "../../types/index.js";
 import type { PanelPositionType, FitViewParams } from "@vue-flow/core";
 type FlowControls = ComponentConfig<typeof theme, AppConfig, "flowControls">;
 export interface FlowControlsProps {

package/dist/runtime/components/{FlowMiniMap.d.vue.ts → flow/FlowMiniMap.d.vue.ts}

@@ -1,6 +1,6 @@
 import type { AppConfig } from "@nuxt/schema";
 import theme from "#build/ui-elements/flow-mini-map";
-import type { ComponentConfig } from "../types/index.js";
+import type { ComponentConfig } from "../../types/index.js";
 import type { PanelPositionType } from "@vue-flow/core";
 type FlowMiniMap = ComponentConfig<typeof theme, AppConfig, "flowMiniMap">;
 export interface FlowMiniMapProps {

package/dist/runtime/components/{FlowMiniMap.vue → flow/FlowMiniMap.vue}

@@ -5,7 +5,7 @@ import theme from "#build/ui-elements/flow-mini-map";
 <script setup>
 import { computed } from "vue";
 import { MiniMap } from "@vue-flow/minimap";
-import { tv } from "../utils/tv";
+import { tv } from "../../utils/tv";
 const {
   pannable = true,
   zoomable = true,
@@ -27,7 +27,7 @@ const {
   maskColor: { type: String, required: false },
   width: { type: Number, required: false },
   height: { type: Number, required: false },
-  ui: { type: Object, required: false }
+  ui: { type: null, required: false }
 });
 const ui = computed(() => tv({ extend: tv(theme) })({}));
 </script>

package/dist/runtime/components/{FlowMiniMap.vue.d.ts → flow/FlowMiniMap.vue.d.ts}

@@ -1,6 +1,6 @@
 import type { AppConfig } from "@nuxt/schema";
 import theme from "#build/ui-elements/flow-mini-map";
-import type { ComponentConfig } from "../types/index.js";
+import type { ComponentConfig } from "../../types/index.js";
 import type { PanelPositionType } from "@vue-flow/core";
 type FlowMiniMap = ComponentConfig<typeof theme, AppConfig, "flowMiniMap">;
 export interface FlowMiniMapProps {

package/dist/runtime/index.css

@@ -1 +1 @@
-@import "#build/ui-elements.css";@source "./components";
+@import "#build/ui-elements.css";@source "./components";.vue-flow__controls{border:1px solid var(--ui-border);border-radius:var(--ui-radius);box-shadow:0 0 2px 1px rgba(0,0,0,.08);overflow:hidden}.vue-flow__controls-button{align-items:center;background:var(--ui-bg);border:none;border-bottom:1px solid var(--ui-border);cursor:pointer;display:flex;height:16px;justify-content:center;padding:6px;width:16px}.vue-flow__controls-button:last-child{border-bottom:none}.vue-flow__controls-button:hover{background:var(--ui-bg-elevated)}.vue-flow__controls-button svg{fill:var(--ui-text);max-height:12px;max-width:12px;width:100%}.vue-flow__minimap{border:1px solid var(--ui-border);border-radius:var(--ui-radius);overflow:hidden}

package/dist/runtime/utils/std.d.ts

@@ -11,6 +11,7 @@
 import plur from "plur";
 import slugify from "@sindresorhus/slugify";
 import * as date from "./std/date.js";
+export { plur, slugify, date };
 declare const _default: {
     readonly plur: typeof plur;
     readonly slugify: typeof slugify;

package/dist/runtime/utils/std.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-elements",
-  "version": "0.1.41",
+  "version": "0.2.0",
   "description": "A collection of beautiful, animated UI components for Nuxt applications",
   "license": "MIT",
   "repository": "https://github.com/genu/nuxt-ui-elements.git",
@@ -43,7 +43,7 @@
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
-    "@internationalized/date": "3.11.0",
+    "@internationalized/date": "3.12.0",
     "@nuxt/kit": "4.3.1",
     "@sindresorhus/slugify": "3.0.0",
     "plur": "6.0.0",
@@ -51,7 +51,7 @@
     "tailwind-variants": "3.2.2"
   },
   "devDependencies": {
-    "@nuxt/devtools": "3.2.2",
+    "@nuxt/devtools": "3.2.3",
     "@nuxt/eslint-config": "1.15.2",
     "@nuxt/module-builder": "1.0.2",
     "@nuxt/schema": "4.3.1",
@@ -60,7 +60,7 @@
     "@types/node": "latest",
     "@vitest/coverage-v8": "4.0.18",
     "better-sqlite3": "12.6.2",
-    "eslint": "10.0.2",
+    "eslint": "10.0.3",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-prettier": "5.5.5",
     "nuxt": "4.3.1",
@@ -90,7 +90,7 @@
       "optional": true
     }
   },
-  "packageManager": "pnpm@10.30.3+sha512.c961d1e0a2d8e354ecaa5166b822516668b7f44cb5bd95122d590dd81922f606f5473b6d23ec4a5be05e7fcd18e8488d47d978bbe981872f1145d06e9a740017",
+  "packageManager": "pnpm@10.32.1+sha512.a706938f0e89ac1456b6563eab4edf1d1faf3368d1191fc5c59790e96dc918e4456ab2e67d613de1043d2e8c81f87303e6b40d4ffeca9df15ef1ad567348f2be",
   "pnpm": {
     "onlyBuiltDependencies": [
       "better-sqlite3"