nuxt-ui-elements-pro 0.1.6 → 0.1.7

package/dist/runtime/types/org-chart.d.ts

@@ -0,0 +1,181 @@
+import type { ComputedRef, Ref } from "vue";
+/** A single node in the org chart flat data */
+export interface OrgChartNode {
+    /** Unique identifier */
+    id: string | number;
+    /** Parent node ID. `null` for the root node. */
+    parentId: string | number | null;
+    /** Display name */
+    name: string;
+    /** Optional secondary text (e.g., job title) */
+    title?: string;
+    /** Avatar image URL */
+    avatar?: string;
+    /** Icon name (e.g., `i-lucide-user`) */
+    icon?: string;
+    /** Nuxt UI color override for this node */
+    color?: string;
+    /** Arbitrary user-defined metadata passed through to slots */
+    metadata?: Record<string, unknown>;
+}
+/** Layout direction */
+export type OrgChartDirection = "vertical" | "horizontal" | "bottom-up" | "right-to-left";
+/** Connector line style */
+export type OrgChartConnectorStyle = "right-angle" | "curved" | "straight";
+/** Selection mode */
+export type OrgChartSelectionMode = "none" | "single" | "multiple";
+/** Tree node with computed relationships and layout position */
+export interface OrgChartTreeNode {
+    /** Original flat node data */
+    data: OrgChartNode;
+    /** Parent tree node (null for root) */
+    parent: OrgChartTreeNode | null;
+    /** Direct children */
+    children: OrgChartTreeNode[];
+    /** Depth in the tree (root = 0) */
+    depth: number;
+    /** 0-based index among siblings */
+    indexInSiblings: number;
+    /** Total sibling count */
+    siblingCount: number;
+    /** Count of all descendants */
+    descendantCount: number;
+    /** Layout x position (top-left of node) */
+    x: number;
+    /** Layout y position (top-left of node) */
+    y: number;
+}
+/** Connector line segment between parent and child */
+export interface OrgChartConnector {
+    /** Parent node ID */
+    fromId: string | number;
+    /** Child node ID */
+    toId: string | number;
+    /** SVG path data string (d attribute) */
+    path: string;
+}
+/** Non-hierarchical connection between any two nodes (e.g., dotted-line reporting) */
+export interface OrgChartConnection {
+    /** Unique identifier for this connection */
+    id: string | number;
+    /** Source node ID */
+    fromId: string | number;
+    /** Target node ID */
+    toId: string | number;
+    /** Optional label displayed on the connection */
+    label?: string;
+    /** Line style @defaultValue 'dashed' */
+    style?: "dashed" | "dotted" | "solid";
+    /** Nuxt UI color for this connection */
+    color?: string;
+    /** Arbitrary metadata passed through to slots */
+    metadata?: Record<string, unknown>;
+}
+/** Computed connection path for rendering */
+export interface OrgChartConnectionPath {
+    /** Original connection data */
+    connection: OrgChartConnection;
+    /** SVG path data string */
+    path: string;
+    /** Label position (midpoint of path) */
+    labelX: number;
+    labelY: number;
+}
+/** Computed layout result */
+export interface OrgChartLayout {
+    /** All visible tree nodes with x, y positions */
+    nodes: OrgChartTreeNode[];
+    /** All connector paths (hierarchical parent-child) */
+    connectors: OrgChartConnector[];
+    /** Non-hierarchical connection paths */
+    connectionPaths: OrgChartConnectionPath[];
+    /** Total width of the layout (px) */
+    width: number;
+    /** Total height of the layout (px) */
+    height: number;
+}
+export interface OrgChartLayoutConfig {
+    /** Horizontal gap between sibling nodes (px) @defaultValue 40 */
+    siblingGap?: number;
+    /** Vertical gap between levels (px) @defaultValue 60 */
+    levelGap?: number;
+    /** Node width (px) @defaultValue 200 */
+    nodeWidth?: number;
+    /** Node height (px) @defaultValue 80 */
+    nodeHeight?: number;
+    /** Corner radius for right-angle connectors (px). Set to 0 for sharp corners. @defaultValue 8 */
+    connectorRadius?: number;
+}
+export type ResolvedLayoutConfig = Required<OrgChartLayoutConfig>;
+export interface OrgChartZoomConfig {
+    /** Enable zoom/pan @defaultValue false */
+    enabled?: boolean;
+    /** Minimum zoom scale @defaultValue 0.25 */
+    min?: number;
+    /** Maximum zoom scale @defaultValue 2 */
+    max?: number;
+    /** Initial zoom scale @defaultValue 1 */
+    initial?: number;
+    /** Zoom step per scroll tick @defaultValue 0.1 */
+    step?: number;
+    /** Show zoom controls overlay @defaultValue true */
+    controls?: boolean;
+}
+export type ResolvedZoomConfig = Required<OrgChartZoomConfig>;
+export interface OrgChartContext {
+    tree: ComputedRef<OrgChartTreeNode | null>;
+    layout: ComputedRef<OrgChartLayout>;
+    flatVisibleNodes: ComputedRef<OrgChartTreeNode[]>;
+    nodeMap: ComputedRef<Map<string | number, OrgChartTreeNode>>;
+    direction: ComputedRef<OrgChartDirection>;
+    connectorStyle: ComputedRef<OrgChartConnectorStyle>;
+    selectionMode: ComputedRef<OrgChartSelectionMode>;
+    compact: ComputedRef<boolean>;
+    animated: ComputedRef<boolean>;
+    draggable: ComputedRef<boolean>;
+    layoutConfig: ComputedRef<ResolvedLayoutConfig>;
+    zoomConfig: ComputedRef<ResolvedZoomConfig>;
+    expandedIds: Ref<Set<string | number>>;
+    selectedIds: Ref<Set<string | number>>;
+    focusedId: Ref<string | number | null>;
+    searchQuery: ComputedRef<string>;
+    matchedIds: ComputedRef<Set<string | number>>;
+    isMatched: (id: string | number) => boolean;
+    isDimmed: (id: string | number) => boolean;
+    isExpanded: (id: string | number) => boolean;
+    isSelected: (id: string | number) => boolean;
+    isFocused: (id: string | number) => boolean;
+    getDescendantCount: (id: string | number) => number;
+    getNode: (id: string | number) => OrgChartTreeNode | undefined;
+    getChildren: (id: string | number) => OrgChartTreeNode[];
+    getAncestors: (id: string | number) => OrgChartTreeNode[];
+    toggleExpand: (id: string | number) => void;
+    expandAll: () => void;
+    collapseAll: () => void;
+    selectNode: (id: string | number) => void;
+    deselectNode: (id: string | number) => void;
+    scrollToNode: (id: string | number) => void;
+    fitToView: () => void;
+    handleNodeClick: (node: OrgChartTreeNode, e: Event) => void;
+    onKeydown: (e: KeyboardEvent) => void;
+    draggedNodeId: Ref<string | number | null>;
+    dropTargetId: Ref<string | number | null>;
+    onDragStart: (nodeId: string | number, e: DragEvent) => void;
+    onDragOver: (nodeId: string | number, e: DragEvent) => void;
+    onDragLeave: (e: DragEvent) => void;
+    onDrop: (nodeId: string | number, e: DragEvent) => void;
+    onDragEnd: (e: DragEvent) => void;
+    connectionPaths: ComputedRef<OrgChartConnectionPath[]>;
+    handleConnectionClick: (connection: OrgChartConnection, e: Event) => void;
+    ui: ComputedRef<any>;
+    propUi: ComputedRef<any>;
+    scale: Ref<number>;
+    translateX: Ref<number>;
+    translateY: Ref<number>;
+    transformStyle: ComputedRef<Record<string, string>>;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    zoomReset: () => void;
+    onWheel: (e: WheelEvent) => void;
+    onPointerDown: (e: PointerEvent) => void;
+}

package/dist/runtime/utils/org-chart.d.ts

@@ -0,0 +1,55 @@
+import type { OrgChartNode, OrgChartTreeNode, OrgChartConnector, OrgChartConnection, OrgChartConnectionPath, OrgChartLayout, OrgChartDirection, OrgChartConnectorStyle, ResolvedLayoutConfig } from "../types/org-chart.js";
+/**
+ * Build a tree from a flat node list.
+ * Validates exactly one root (parentId === null). Returns null for empty input.
+ */
+export declare function buildTree(nodes: OrgChartNode[]): OrgChartTreeNode | null;
+/**
+ * Compute full layout for the tree.
+ * Returns positioned nodes, connector paths, and total dimensions.
+ */
+export declare function computeLayout(root: OrgChartTreeNode, config: ResolvedLayoutConfig, direction: OrgChartDirection, expandedIds: Set<string | number>): OrgChartLayout;
+/** Overloaded layout that also accepts connector style */
+export declare function computeFullLayout(root: OrgChartTreeNode, config: ResolvedLayoutConfig, direction: OrgChartDirection, connectorStyle: OrgChartConnectorStyle, expandedIds: Set<string | number>, connections?: OrgChartConnection[]): OrgChartLayout;
+/**
+ * Compute SVG path data for connectors between parent-child pairs.
+ */
+export declare function computeConnectors(nodes: OrgChartTreeNode[], config: ResolvedLayoutConfig, direction: OrgChartDirection, style: OrgChartConnectorStyle): OrgChartConnector[];
+/**
+ * Compute SVG paths for non-hierarchical connections between arbitrary nodes.
+ * These are rendered as curved bezier paths offset from the straight line to
+ * avoid overlapping with hierarchical connectors.
+ */
+export declare function computeConnectionPaths(nodes: OrgChartTreeNode[], config: ResolvedLayoutConfig, direction: OrgChartDirection, connections: OrgChartConnection[]): OrgChartConnectionPath[];
+/**
+ * Flatten visible tree in DFS order, skipping collapsed subtrees.
+ * The root is always included.
+ */
+export declare function flattenVisibleTree(root: OrgChartTreeNode, expandedIds: Set<string | number>): OrgChartTreeNode[];
+/**
+ * Get ancestors of a node (from immediate parent to root).
+ */
+export declare function getAncestors(nodeId: string | number, nodeMap: Map<string | number, OrgChartTreeNode>): OrgChartTreeNode[];
+/**
+ * Get all descendants of a node (DFS, not including the node itself).
+ */
+export declare function getDescendants(node: OrgChartTreeNode): OrgChartTreeNode[];
+/**
+ * Collect all node IDs in the tree.
+ */
+export declare function getAllNodeIds(root: OrgChartTreeNode): Set<string | number>;
+/**
+ * Build a Map from node ID to OrgChartTreeNode for O(1) lookups.
+ */
+export declare function buildNodeMap(root: OrgChartTreeNode): Map<string | number, OrgChartTreeNode>;
+/** Default layout config values */
+export declare const DEFAULT_LAYOUT_CONFIG: ResolvedLayoutConfig;
+/** Default zoom config values */
+export declare const DEFAULT_ZOOM_CONFIG: {
+    readonly enabled: false;
+    readonly min: 0.25;
+    readonly max: 2;
+    readonly initial: 1;
+    readonly step: 0.1;
+    readonly controls: true;
+};

package/dist/runtime/utils/org-chart.js

@@ -0,0 +1,367 @@
+export function buildTree(nodes) {
+  if (nodes.length === 0) return null;
+  const ROOT_KEY = Symbol("root");
+  const childrenMap = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    const key = node.parentId === null ? ROOT_KEY : node.parentId;
+    const list = childrenMap.get(key);
+    if (list) list.push(node);
+    else childrenMap.set(key, [node]);
+  }
+  const roots = childrenMap.get(ROOT_KEY);
+  if (!roots || roots.length === 0) {
+    throw new Error("[OrgChart] No root node found (parentId === null).");
+  }
+  if (roots.length > 1) {
+    throw new Error(`[OrgChart] Multiple root nodes found: ${roots.map((r) => r.id).join(", ")}. Only one root is supported.`);
+  }
+  function build(data, parent, depth, indexInSiblings, siblingCount) {
+    const node = {
+      data,
+      parent,
+      children: [],
+      depth,
+      indexInSiblings,
+      siblingCount,
+      descendantCount: 0,
+      x: 0,
+      y: 0
+    };
+    const childData = childrenMap.get(data.id) ?? [];
+    node.children = childData.map((child, i) => build(child, node, depth + 1, i, childData.length));
+    node.descendantCount = node.children.reduce((sum, c) => sum + 1 + c.descendantCount, 0);
+    return node;
+  }
+  return build(roots[0], null, 0, 0, 1);
+}
+function buildLayoutTree(root, expandedIds) {
+  const children = expandedIds.has(root.data.id) ? root.children.map((c) => buildLayoutTree(c, expandedIds)) : [];
+  return { treeNode: root, children, prelim: 0, mod: 0, x: 0 };
+}
+function layoutChildren(node, siblingGap, nodeWidth) {
+  if (node.children.length === 0) return;
+  let nextX = 0;
+  for (const child of node.children) {
+    child.prelim = nextX;
+    layoutChildren(child, siblingGap, nodeWidth);
+    nextX = getRightContour(child, child.prelim) + nodeWidth + siblingGap;
+  }
+  const first = node.children[0];
+  const last = node.children[node.children.length - 1];
+  const mid = (first.prelim + last.prelim) / 2;
+  node.mod = mid;
+}
+function getRightContour(node, offset) {
+  let max = offset;
+  for (const child of node.children) {
+    max = Math.max(max, getRightContour(child, offset + child.prelim));
+  }
+  return max;
+}
+function isVerticalFlow(direction) {
+  return direction === "vertical" || direction === "bottom-up";
+}
+function assignPositions(root, config, direction) {
+  const vertical = isVerticalFlow(direction);
+  layoutChildren(root, config.siblingGap, vertical ? config.nodeWidth : config.nodeHeight);
+  function absolutePositions(node, offsetX, depth) {
+    const absX = offsetX + node.prelim;
+    if (vertical) {
+      node.treeNode.x = absX;
+      node.treeNode.y = depth * (config.nodeHeight + config.levelGap);
+    } else {
+      node.treeNode.x = depth * (config.nodeWidth + config.levelGap);
+      node.treeNode.y = absX;
+    }
+    for (const child of node.children) {
+      absolutePositions(child, absX - node.mod, depth + 1);
+    }
+  }
+  absolutePositions(root, 0, 0);
+}
+function normalizePositions(nodes, padding = 20) {
+  if (nodes.length === 0) return;
+  let minX = Infinity;
+  let minY = Infinity;
+  for (const n of nodes) {
+    if (n.x < minX) minX = n.x;
+    if (n.y < minY) minY = n.y;
+  }
+  const dx = padding - minX;
+  const dy = padding - minY;
+  for (const n of nodes) {
+    n.x += dx;
+    n.y += dy;
+  }
+}
+export function computeLayout(root, config, direction, expandedIds) {
+  const layoutRoot = buildLayoutTree(root, expandedIds);
+  assignPositions(layoutRoot, config, direction);
+  const nodes = flattenAll(layoutRoot);
+  const treeNodes = nodes.map((ln) => ln.treeNode);
+  if (direction === "bottom-up") {
+    flipVertical(treeNodes, config);
+  } else if (direction === "right-to-left") {
+    flipHorizontal(treeNodes, config);
+  }
+  normalizePositions(treeNodes);
+  const connectors = computeConnectors(treeNodes, config, direction, "right-angle");
+  const w = config.nodeWidth;
+  const h = config.nodeHeight;
+  let maxX = 0;
+  let maxY = 0;
+  for (const n of treeNodes) {
+    if (n.x + w > maxX) maxX = n.x + w;
+    if (n.y + h > maxY) maxY = n.y + h;
+  }
+  return {
+    nodes: treeNodes,
+    connectors,
+    connectionPaths: [],
+    width: maxX + 20,
+    height: maxY + 20
+  };
+}
+function flipVertical(nodes, config) {
+  if (nodes.length === 0) return;
+  let maxY = 0;
+  for (const n of nodes) {
+    const bottom = n.y + config.nodeHeight;
+    if (bottom > maxY) maxY = bottom;
+  }
+  for (const n of nodes) {
+    n.y = maxY - n.y - config.nodeHeight;
+  }
+}
+function flipHorizontal(nodes, config) {
+  if (nodes.length === 0) return;
+  let maxX = 0;
+  for (const n of nodes) {
+    const right = n.x + config.nodeWidth;
+    if (right > maxX) maxX = right;
+  }
+  for (const n of nodes) {
+    n.x = maxX - n.x - config.nodeWidth;
+  }
+}
+export function computeFullLayout(root, config, direction, connectorStyle, expandedIds, connections) {
+  const layoutRoot = buildLayoutTree(root, expandedIds);
+  assignPositions(layoutRoot, config, direction);
+  const nodes = flattenAll(layoutRoot);
+  const treeNodes = nodes.map((ln) => ln.treeNode);
+  if (direction === "bottom-up") {
+    flipVertical(treeNodes, config);
+  } else if (direction === "right-to-left") {
+    flipHorizontal(treeNodes, config);
+  }
+  normalizePositions(treeNodes);
+  const connectors = computeConnectors(treeNodes, config, direction, connectorStyle);
+  const connectionPaths = connections && connections.length > 0 ? computeConnectionPaths(treeNodes, config, direction, connections) : [];
+  let maxX = 0;
+  let maxY = 0;
+  for (const n of treeNodes) {
+    const right = n.x + config.nodeWidth;
+    const bottom = n.y + config.nodeHeight;
+    if (right > maxX) maxX = right;
+    if (bottom > maxY) maxY = bottom;
+  }
+  return {
+    nodes: treeNodes,
+    connectors,
+    connectionPaths,
+    width: maxX + 20,
+    height: maxY + 20
+  };
+}
+function flattenAll(node) {
+  const result = [node];
+  for (const child of node.children) {
+    result.push(...flattenAll(child));
+  }
+  return result;
+}
+function getConnectorEndpoints(parent, child, config, direction) {
+  switch (direction) {
+    case "vertical":
+      return {
+        px: parent.x + config.nodeWidth / 2,
+        py: parent.y + config.nodeHeight,
+        cx: child.x + config.nodeWidth / 2,
+        cy: child.y
+      };
+    case "bottom-up":
+      return {
+        px: parent.x + config.nodeWidth / 2,
+        py: parent.y,
+        cx: child.x + config.nodeWidth / 2,
+        cy: child.y + config.nodeHeight
+      };
+    case "horizontal":
+      return {
+        px: parent.x + config.nodeWidth,
+        py: parent.y + config.nodeHeight / 2,
+        cx: child.x,
+        cy: child.y + config.nodeHeight / 2
+      };
+    case "right-to-left":
+      return {
+        px: parent.x,
+        py: parent.y + config.nodeHeight / 2,
+        cx: child.x + config.nodeWidth,
+        cy: child.y + config.nodeHeight / 2
+      };
+  }
+}
+export function computeConnectors(nodes, config, direction, style) {
+  const nodeMap = /* @__PURE__ */ new Map();
+  for (const n of nodes) nodeMap.set(n.data.id, n);
+  const connectors = [];
+  for (const node of nodes) {
+    if (!node.parent) continue;
+    const parent = nodeMap.get(node.parent.data.id);
+    if (!parent) continue;
+    const { px, py, cx, cy } = getConnectorEndpoints(parent, node, config, direction);
+    const path = buildConnectorPath(px, py, cx, cy, style, isVerticalFlow(direction), config.connectorRadius);
+    connectors.push({
+      fromId: parent.data.id,
+      toId: node.data.id,
+      path
+    });
+  }
+  return connectors;
+}
+function buildConnectorPath(px, py, cx, cy, style, vertical, radius = 0) {
+  if (style === "straight") {
+    return `M ${px} ${py} L ${cx} ${cy}`;
+  }
+  if (style === "curved") {
+    if (vertical) {
+      const midY = py + (cy - py) / 2;
+      return `M ${px} ${py} C ${px} ${midY}, ${cx} ${midY}, ${cx} ${cy}`;
+    }
+    const midX2 = px + (cx - px) / 2;
+    return `M ${px} ${py} C ${midX2} ${py}, ${midX2} ${cy}, ${cx} ${cy}`;
+  }
+  if (vertical) {
+    const midY = py + (cy - py) / 2;
+    if (radius <= 0 || px === cx) {
+      return `M ${px} ${py} L ${px} ${midY} L ${cx} ${midY} L ${cx} ${cy}`;
+    }
+    const r2 = Math.min(radius, Math.abs(cy - py) / 4, Math.abs(cx - px) / 2);
+    const dx = cx > px ? r2 : -r2;
+    const dy1 = midY > py ? r2 : -r2;
+    const dy2 = cy > midY ? r2 : -r2;
+    return [
+      `M ${px} ${py}`,
+      `L ${px} ${midY - dy1}`,
+      `Q ${px} ${midY}, ${px + dx} ${midY}`,
+      `L ${cx - dx} ${midY}`,
+      `Q ${cx} ${midY}, ${cx} ${midY + dy2}`,
+      `L ${cx} ${cy}`
+    ].join(" ");
+  }
+  const midX = px + (cx - px) / 2;
+  if (radius <= 0 || py === cy) {
+    return `M ${px} ${py} L ${midX} ${py} L ${midX} ${cy} L ${cx} ${cy}`;
+  }
+  const r = Math.min(radius, Math.abs(cx - px) / 4, Math.abs(cy - py) / 2);
+  const dx1 = midX > px ? r : -r;
+  const dx2 = cx > midX ? r : -r;
+  const dy = cy > py ? r : -r;
+  return [
+    `M ${px} ${py}`,
+    `L ${midX - dx1} ${py}`,
+    `Q ${midX} ${py}, ${midX} ${py + dy}`,
+    `L ${midX} ${cy - dy}`,
+    `Q ${midX} ${cy}, ${midX + dx2} ${cy}`,
+    `L ${cx} ${cy}`
+  ].join(" ");
+}
+export function computeConnectionPaths(nodes, config, direction, connections) {
+  const nodeMap = /* @__PURE__ */ new Map();
+  for (const n of nodes) nodeMap.set(n.data.id, n);
+  const result = [];
+  for (const conn of connections) {
+    const from = nodeMap.get(conn.fromId);
+    const to = nodeMap.get(conn.toId);
+    if (!from || !to) continue;
+    const fromCx = from.x + config.nodeWidth / 2;
+    const fromCy = from.y + config.nodeHeight / 2;
+    const toCx = to.x + config.nodeWidth / 2;
+    const toCy = to.y + config.nodeHeight / 2;
+    const dx = toCx - fromCx;
+    const dy = toCy - fromCy;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    const offset = Math.min(dist * 0.3, 80);
+    const nx = dist > 0 ? -dy / dist : 0;
+    const ny = dist > 0 ? dx / dist : 1;
+    const cpX = (fromCx + toCx) / 2 + nx * offset;
+    const cpY = (fromCy + toCy) / 2 + ny * offset;
+    const path = `M ${fromCx} ${fromCy} Q ${cpX} ${cpY}, ${toCx} ${toCy}`;
+    const labelX = (fromCx + 2 * cpX + toCx) / 4;
+    const labelY = (fromCy + 2 * cpY + toCy) / 4;
+    result.push({ connection: conn, path, labelX, labelY });
+  }
+  return result;
+}
+export function flattenVisibleTree(root, expandedIds) {
+  const result = [root];
+  if (expandedIds.has(root.data.id)) {
+    for (const child of root.children) {
+      result.push(...flattenVisibleTree(child, expandedIds));
+    }
+  }
+  return result;
+}
+export function getAncestors(nodeId, nodeMap) {
+  const result = [];
+  let current = nodeMap.get(nodeId);
+  if (!current) return result;
+  current = current.parent ?? void 0;
+  while (current) {
+    result.push(current);
+    current = current.parent ?? void 0;
+  }
+  return result;
+}
+export function getDescendants(node) {
+  const result = [];
+  for (const child of node.children) {
+    result.push(child);
+    result.push(...getDescendants(child));
+  }
+  return result;
+}
+export function getAllNodeIds(root) {
+  const ids = /* @__PURE__ */ new Set();
+  function walk(node) {
+    ids.add(node.data.id);
+    for (const child of node.children) walk(child);
+  }
+  walk(root);
+  return ids;
+}
+export function buildNodeMap(root) {
+  const map = /* @__PURE__ */ new Map();
+  function walk(node) {
+    map.set(node.data.id, node);
+    for (const child of node.children) walk(child);
+  }
+  walk(root);
+  return map;
+}
+export const DEFAULT_LAYOUT_CONFIG = {
+  siblingGap: 40,
+  levelGap: 60,
+  nodeWidth: 200,
+  nodeHeight: 80,
+  connectorRadius: 8
+};
+export const DEFAULT_ZOOM_CONFIG = {
+  enabled: false,
+  min: 0.25,
+  max: 2,
+  initial: 1,
+  step: 0.1,
+  controls: true
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-elements-pro",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Pro components for nuxt-ui-elements",
   "license": "UNLICENSED",
   "files": [

package/dist/runtime/components/EventCalendarHeader.vue

@@ -1,48 +0,0 @@
-<script>
-import { Primitive } from "reka-ui";
-import { useEventCalendarContext } from "../composables/useEventCalendarContext";
-</script>
-
-<script setup>
-const props = defineProps({
-  as: { type: null, required: false }
-});
-defineSlots();
-const ctx = useEventCalendarContext();
-</script>
-
-<template>
-  <Primitive :as="props.as ?? 'div'" data-slot="header" :class="ctx.ui.value.header({ class: ctx.propUi.value?.header })">
-    <slot
-      :title="ctx.headerTitle.value"
-      :prev="ctx.goToPrev"
-      :next="ctx.goToNext"
-      :today="ctx.goToToday"
-      :current-date="ctx.displayDate.value"
-      :view="ctx.view.value"
-      :set-view="ctx.setView">
-      <span data-slot="headerTitle" :class="ctx.ui.value.headerTitle({ class: ctx.propUi.value?.headerTitle })" aria-live="polite" aria-atomic="true">
-        {{ ctx.headerTitle.value }}
-      </span>
-
-      <div data-slot="headerActions" :class="ctx.ui.value.headerActions({ class: ctx.propUi.value?.headerActions })">
-        <div data-slot="viewSwitcher" role="group" aria-label="Calendar view" :class="ctx.ui.value.viewSwitcher({ class: ctx.propUi.value?.viewSwitcher })">
-          <UButton
-            v-for="v in ['month', 'week', 'day', 'list']"
-            :key="v"
-            :label="v"
-            size="xs"
-            :color="ctx.view.value === v ? ctx.color.value : 'neutral'"
-            :variant="ctx.view.value === v ? 'subtle' : 'ghost'"
-            :aria-pressed="ctx.view.value === v"
-            class="capitalize"
-            @click="ctx.setView(v)" />
-        </div>
-
-        <UButton icon="i-lucide-chevron-left" color="neutral" variant="ghost" size="xs" square :aria-label="`Previous ${ctx.view.value}`" @click="ctx.goToPrev" />
-        <UButton label="Today" color="neutral" variant="ghost" size="xs" aria-label="Go to today" @click="ctx.goToToday" />
-        <UButton icon="i-lucide-chevron-right" color="neutral" variant="ghost" size="xs" square :aria-label="`Next ${ctx.view.value}`" @click="ctx.goToNext" />
-      </div>
-    </slot>
-  </Primitive>
-</template>