nuxt-ui-elements 0.1.40 → 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
 
@@ -26,20 +24,15 @@ This module extends Nuxt UI with additional components and utilities designed to
 
 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({
@@ -55,188 +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.
-
-## 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.40",
+  "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) => ({
@@ -166,10 +166,222 @@ const toggleGroup = (_options) => ({
   }
 });
 
+const flow = (_options) => ({
+  slots: {
+    root: "w-full h-[500px] relative",
+    wrapper: ""
+  },
+  variants: {},
+  defaultVariants: {}
+});
+
+const flowNode = (options) => ({
+  slots: {
+    root: [
+      "rounded-lg border px-4 py-3 shadow-sm",
+      "transition-all duration-200",
+      "min-w-[150px]"
+    ],
+    label: "text-sm font-medium",
+    content: "text-xs mt-1 opacity-80"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    variant: {
+      solid: "",
+      outline: "",
+      soft: "",
+      subtle: ""
+    },
+    selected: {
+      true: {
+        root: "ring-2 ring-offset-2 ring-offset-default"
+      },
+      false: ""
+    }
+  },
+  compoundVariants: [
+    // Solid variants
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "solid",
+      class: {
+        root: `bg-${color} text-inverted border-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "solid",
+      class: {
+        root: "bg-inverted text-inverted border-inverted"
+      }
+    },
+    // Outline variants
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "outline",
+      class: {
+        root: `bg-default border-${color} text-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "outline",
+      class: {
+        root: "bg-default border-accented text-highlighted"
+      }
+    },
+    // Soft variants
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "soft",
+      class: {
+        root: `bg-${color}/10 border-${color}/20 text-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "soft",
+      class: {
+        root: "bg-elevated border-accented text-highlighted"
+      }
+    },
+    // Subtle variants
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "subtle",
+      class: {
+        root: `bg-${color}/5 border-transparent text-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "subtle",
+      class: {
+        root: "bg-elevated/50 border-transparent text-highlighted"
+      }
+    },
+    // Selected + color ring
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      selected: true,
+      class: {
+        root: `ring-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      selected: true,
+      class: {
+        root: "ring-accented"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    variant: "outline",
+    selected: false
+  }
+});
+
+const flowHandle = (options) => ({
+  slots: {
+    root: [
+      "!size-3 !rounded-full !border-2 !bg-default",
+      "transition-colors duration-150"
+    ]
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    connected: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    // Default state: colored border, fill on hover
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      class: {
+        root: `!border-${color} hover:!bg-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      class: {
+        root: "!border-accented hover:!bg-inverted"
+      }
+    },
+    // Connected state: filled with color
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      connected: true,
+      class: {
+        root: `!bg-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      connected: true,
+      class: {
+        root: "!bg-inverted"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    connected: false
+  }
+});
+
+const flowBackground = (_options) => ({
+  slots: {
+    root: ""
+  },
+  variants: {
+    pattern: {
+      dots: "",
+      lines: ""
+    }
+  },
+  defaultVariants: {
+    pattern: "dots"
+  }
+});
+
+const flowControls = (_options) => ({
+  slots: {
+    root: "bg-default border border-accented rounded-lg shadow-sm overflow-hidden",
+    button: "p-2 hover:bg-elevated transition-colors border-b border-accented last:border-b-0"
+  },
+  variants: {},
+  defaultVariants: {}
+});
+
+const flowMiniMap = (_options) => ({
+  slots: {
+    root: "border border-accented rounded-lg shadow-sm overflow-hidden"
+  },
+  variants: {},
+  defaultVariants: {}
+});
+
 const theme = {
   __proto__: null,
   dialogAlert: dialogAlert,
   dialogConfirm: dialogConfirm,
+  flow: flow,
+  flowBackground: flowBackground,
+  flowControls: flowControls,
+  flowHandle: flowHandle,
+  flowMiniMap: flowMiniMap,
+  flowNode: flowNode,
   toggleGroup: toggleGroup
 };
 
@@ -269,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"];
@@ -286,8 +498,26 @@ 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/**"]
     });
+    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");
+    }
+    if (await tryResolveModule("@vue-flow/background", moduleDirs)) {
+      nuxt.options.build.transpile.push("@vue-flow/background");
+    }
+    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");
+    }
+    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

@@ -0,0 +1,77 @@
+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 */
+    nodes?: Node[];
+    /** Array of edge objects */
+    edges?: Edge[];
+    /** Map of custom node type components */
+    nodeTypes?: Record<string, any>;
+    /** Map of custom edge type components */
+    edgeTypes?: Record<string, any>;
+    /** Fit view on initialization */
+    fitViewOnInit?: boolean;
+    /** Minimum zoom level */
+    minZoom?: number;
+    /** Maximum zoom level */
+    maxZoom?: number;
+    /** Whether nodes are draggable */
+    nodesDraggable?: boolean;
+    /** Whether nodes are connectable */
+    nodesConnectable?: boolean;
+    /** Whether elements are selectable */
+    elementsSelectable?: boolean;
+    /** Connection mode */
+    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"];
+}
+export interface FlowEmits {
+    "update:nodes": [nodes: Node[]];
+    "update:edges": [edges: Edge[]];
+    nodeClick: [event: any];
+    edgeClick: [event: any];
+    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, {
+    "update:nodes": (nodes: Node<any, any, string>[]) => any;
+    "update:edges": (edges: Edge[]) => any;
+    nodeClick: (event: any) => any;
+    edgeClick: (event: any) => any;
+    paneClick: (event: any) => any;
+    connect: (params: any) => any;
+}, string, import("vue").PublicProps, Readonly<FlowProps> & Readonly<{
+    "onUpdate:nodes"?: ((nodes: Node<any, any, string>[]) => any) | undefined;
+    "onUpdate:edges"?: ((edges: Edge[]) => any) | undefined;
+    onNodeClick?: ((event: any) => any) | undefined;
+    onEdgeClick?: ((event: any) => any) | undefined;
+    onPaneClick?: ((event: any) => any) | undefined;
+    onConnect?: ((params: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    [x: string]: ((props: any) => any) | undefined;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Flow.vue

@@ -0,0 +1,99 @@
+<script>
+import theme from "#build/ui-elements/flow";
+</script>
+
+<script setup>
+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 = [],
+  fitViewOnInit = true,
+  minZoom = 0.2,
+  maxZoom = 4,
+  nodesDraggable = true,
+  nodesConnectable = true,
+  elementsSelectable = true,
+  background = true,
+  controls = true,
+  minimap = false,
+  ui: uiProps = {}
+} = defineProps({
+  nodes: { type: Array, required: false },
+  edges: { type: Array, required: false },
+  nodeTypes: { type: Object, required: false },
+  edgeTypes: { type: Object, required: false },
+  fitViewOnInit: { type: Boolean, required: false },
+  minZoom: { type: Number, required: false },
+  maxZoom: { type: Number, required: false },
+  nodesDraggable: { type: Boolean, required: false },
+  nodesConnectable: { type: Boolean, required: false },
+  elementsSelectable: { type: Boolean, required: false },
+  connectionMode: { type: String, required: false },
+  defaultEdgeOptions: { 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>
+  <ClientOnly>
+    <div :class="ui.root({ class: uiProps?.root })">
+      <VueFlow
+        :nodes="nodes"
+        :edges="edges"
+        :node-types="nodeTypes"
+        :edge-types="edgeTypes"
+        :fit-view-on-init="fitViewOnInit"
+        :min-zoom="minZoom"
+        :max-zoom="maxZoom"
+        :nodes-draggable="nodesDraggable"
+        :nodes-connectable="nodesConnectable"
+        :elements-selectable="elementsSelectable"
+        :connection-mode="connectionMode"
+        :default-edge-options="defaultEdgeOptions"
+        :class="ui.wrapper({ class: uiProps?.wrapper })"
+        @update:nodes="emit('update:nodes', $event)"
+        @update:edges="emit('update:edges', $event)"
+        @node-click="emit('nodeClick', $event)"
+        @edge-click="emit('edgeClick', $event)"
+        @pane-click="emit('paneClick', $event)"
+        @connect="emit('connect', $event)">
+        <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>
+
+    <template #fallback>
+      <div :class="ui.root({ class: uiProps?.root })" />
+    </template>
+  </ClientOnly>
+</template>