orio-ui 1.23.2 → 1.24.0

package/README.md

@@ -8,7 +8,7 @@ A delightful, lightweight component library for Nuxt 3+ applications. Built with
 
 ## Features
 
-✨ **56 Components** - Beautiful, accessible components ready to use
+✨ **58 Components** - Beautiful, accessible components ready to use
 🎨 **Themeable** - 5 built-in accent themes with light/dark mode support
 🚀 **Auto-imported** - Works seamlessly with Nuxt's auto-import system
 📦 **Tree-shakeable** - Only bundle what you use
@@ -67,7 +67,7 @@ function handleClick() {
 
 ## What's Included
 
-### Components (56)
+### Components (58)
 
 #### Form Controls
 
@@ -194,7 +194,7 @@ npm run docs:dev
 orio-ui/
 ├── src/
 │   ├── runtime/
-│   │   ├── components/   # 56 Vue components
+│   │   ├── components/   # 58 Vue components
 │   │   ├── composables/  # 13 composables
 │   │   ├── assets/css/   # Theme CSS files
 │   │   └── utils/        # Icon registry

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "1.23.2",
+  "version": "1.24.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/canvas.d.ts

@@ -18,4 +18,4 @@ export { rotateTool, type RotateToolOptions, } from "./components/Canvas/tools/r
 export { resizeTool, type ResizeToolOptions, } from "./components/Canvas/tools/resizeTool.js";
 export { transformTool, type TransformToolOptions, } from "./components/Canvas/tools/transformTool.js";
 export { imageTool, type ImageToolOptions, type ImageNodeData, } from "./components/Canvas/tools/imageTool.js";
-export { exportTool, type ExportToolOptions, type ExportFormat, } from "./components/Canvas/tools/exportTool.js";
+export { exportTool, performExport, renderCanvasSnapshot, DEFAULT_EXPORT_OPTIONS, type ExportToolOptions, type ExportOptions, type ExportResult, type ExportFormat, type CanvasSnapshot, } from "./components/Canvas/tools/exportTool.js";

package/dist/runtime/canvas.js

@@ -45,5 +45,8 @@ export {
   imageTool
 } from "./components/Canvas/tools/imageTool.js";
 export {
-  exportTool
+  exportTool,
+  performExport,
+  renderCanvasSnapshot,
+  DEFAULT_EXPORT_OPTIONS
 } from "./components/Canvas/tools/exportTool.js";

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

@@ -0,0 +1,33 @@
+export type MarkerVariant = "accent" | "success" | "alert" | "danger" | "muted";
+export interface CalendarMarker {
+    variant: MarkerVariant;
+    start: string;
+    end: string;
+}
+export interface CalendarProps {
+    selected?: string | null;
+    markers?: CalendarMarker[];
+    getMarker?: (iso: string) => CalendarMarker | null;
+    isDisabled?: (iso: string) => boolean;
+    weekStartsOn?: 0 | 1;
+}
+type __VLS_Props = CalendarProps;
+type __VLS_ModelProps = {
+    "anchor"?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (iso: string) => any;
+    dayEnter: (iso: string) => any;
+    "update:anchor": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((iso: string) => any) | undefined;
+    onDayEnter?: ((iso: string) => any) | undefined;
+    "onUpdate:anchor"?: ((value: string | null) => any) | undefined;
+}>, {
+    selected: string | null;
+    markers: CalendarMarker[];
+    weekStartsOn: 0 | 1;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Calendar.vue

@@ -0,0 +1,251 @@
+<script setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import {
+  addMonths,
+  formatISO,
+  isSameDay,
+  parseISO,
+  startOfMonth
+} from "../utils/date";
+const props = defineProps({
+  selected: { type: [String, null], required: false, default: null },
+  markers: { type: Array, required: false, default: () => [] },
+  getMarker: { type: Function, required: false },
+  isDisabled: { type: Function, required: false },
+  weekStartsOn: { type: Number, required: false, default: 1 }
+});
+const anchor = defineModel("anchor", { type: [String, null], ...{ default: null } });
+const emit = defineEmits(["select", "dayEnter"]);
+const { locale, t } = useI18n();
+const today = /* @__PURE__ */ new Date();
+const visibleMonth = computed(
+  () => startOfMonth(parseISO(anchor.value) ?? /* @__PURE__ */ new Date())
+);
+function shift(delta) {
+  anchor.value = formatISO(addMonths(visibleMonth.value, delta));
+}
+const monthLabel = computed(
+  () => new Intl.DateTimeFormat(locale.value, {
+    month: "long",
+    year: "numeric"
+  }).format(visibleMonth.value)
+);
+const weekdayLabels = computed(() => {
+  const sunday = new Date(2024, 0, 7);
+  return Array.from({ length: 7 }, (_, i) => {
+    const d = new Date(sunday);
+    d.setDate(sunday.getDate() + (i + props.weekStartsOn) % 7);
+    return new Intl.DateTimeFormat(locale.value, { weekday: "short" }).format(
+      d
+    );
+  });
+});
+function resolveMarker(iso) {
+  if (props.getMarker) {
+    const m = props.getMarker(iso);
+    if (m) {
+      return {
+        variant: m.variant,
+        isStart: iso === m.start,
+        isEnd: iso === m.end
+      };
+    }
+  }
+  for (let i = props.markers.length - 1; i >= 0; i--) {
+    const m = props.markers[i];
+    if (iso >= m.start && iso <= m.end) {
+      return {
+        variant: m.variant,
+        isStart: iso === m.start,
+        isEnd: iso === m.end
+      };
+    }
+  }
+  return null;
+}
+const days = computed(() => {
+  const first = visibleMonth.value;
+  const startWeekday = first.getDay();
+  const offset = (startWeekday - props.weekStartsOn + 7) % 7;
+  const gridStart = new Date(first);
+  gridStart.setDate(gridStart.getDate() - offset);
+  const sel = parseISO(props.selected);
+  const result = [];
+  for (let i = 0; i < 42; i++) {
+    const d = new Date(gridStart);
+    d.setDate(gridStart.getDate() + i);
+    const iso = formatISO(d);
+    result.push({
+      iso,
+      label: d.getDate(),
+      inMonth: d.getMonth() === first.getMonth(),
+      isToday: isSameDay(d, today),
+      isSelected: !!sel && isSameDay(d, sel),
+      isDisabled: props.isDisabled?.(iso) ?? false,
+      marker: resolveMarker(iso)
+    });
+  }
+  return result;
+});
+function onSelect(day) {
+  if (day.isDisabled) return;
+  emit("select", day.iso);
+}
+function onEnter(day) {
+  emit("dayEnter", day.iso);
+}
+</script>
+
+<template>
+  <div class="calendar">
+    <div class="calendar-nav">
+      <orio-button
+        variant="subdued"
+        icon="chevron-left"
+        :aria-label="t('calendar.previousMonth')"
+        @click="shift(-1)"
+      />
+      <span class="calendar-month-title">{{ monthLabel }}</span>
+      <orio-button
+        variant="subdued"
+        icon="chevron-right"
+        :aria-label="t('calendar.nextMonth')"
+        @click="shift(1)"
+      />
+    </div>
+    <div class="calendar-weekdays">
+      <span v-for="w in weekdayLabels" :key="w" class="calendar-weekday">
+        {{ w }}
+      </span>
+    </div>
+    <div class="calendar-grid">
+      <button
+        v-for="day in days"
+        :key="day.iso"
+        type="button"
+        class="calendar-day"
+        :class="{
+  'out-of-month': !day.inMonth,
+  today: day.isToday,
+  selected: day.isSelected,
+  'has-marker': !!day.marker,
+  [`marker-${day.marker?.variant}`]: !!day.marker,
+  'marker-start': day.marker?.isStart,
+  'marker-end': day.marker?.isEnd
+}"
+        :disabled="day.isDisabled"
+        @click="onSelect(day)"
+        @mouseenter="onEnter(day)"
+      >
+        <orio-badge v-if="day.isSelected" pill variant="primary">
+          {{ day.label }}
+        </orio-badge>
+        <template v-else>{{ day.label }}</template>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.calendar {
+  display: inline-block;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  padding: 0.75rem;
+  user-select: none;
+  font-size: var(--control-font-size, var(--font-md));
+  color: var(--color-text);
+  min-width: 17rem;
+}
+
+.calendar-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.calendar-month-title {
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.calendar-weekdays,
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.calendar-weekday {
+  text-align: center;
+  font-size: var(--font-xs);
+  color: var(--color-muted);
+  padding: 0.25rem 0;
+  text-transform: uppercase;
+}
+
+.calendar-day {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  border-radius: var(--border-radius-sm);
+  font-size: inherit;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.calendar-day:hover:not(:disabled):not(.has-marker):not(.selected) {
+  background-color: var(--color-surface);
+}
+.calendar-day.out-of-month {
+  color: var(--color-muted);
+  opacity: 0.45;
+}
+.calendar-day.today {
+  box-shadow: inset 0 0 0 1px var(--color-accent);
+}
+.calendar-day.has-marker {
+  background-color: var(--marker-bg);
+  color: var(--marker-color);
+  border-radius: 0;
+}
+.calendar-day.has-marker.marker-start {
+  border-top-left-radius: var(--border-radius-sm);
+  border-bottom-left-radius: var(--border-radius-sm);
+}
+.calendar-day.has-marker.marker-end {
+  border-top-right-radius: var(--border-radius-sm);
+  border-bottom-right-radius: var(--border-radius-sm);
+}
+.calendar-day.marker-accent {
+  --marker-bg: var(--color-accent-soft);
+  --marker-color: var(--color-accent);
+}
+.calendar-day.marker-success {
+  --marker-bg: var(--color-success-soft);
+  --marker-color: var(--color-success);
+}
+.calendar-day.marker-alert {
+  --marker-bg: var(--color-alert-soft);
+  --marker-color: var(--color-alert);
+}
+.calendar-day.marker-danger {
+  --marker-bg: var(--color-danger-soft);
+  --marker-color: var(--color-danger);
+}
+.calendar-day.marker-muted {
+  --marker-bg: var(--color-surface);
+  --marker-color: var(--color-muted);
+}
+.calendar-day:disabled {
+  color: var(--color-muted);
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+</style>

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

@@ -0,0 +1,33 @@
+export type MarkerVariant = "accent" | "success" | "alert" | "danger" | "muted";
+export interface CalendarMarker {
+    variant: MarkerVariant;
+    start: string;
+    end: string;
+}
+export interface CalendarProps {
+    selected?: string | null;
+    markers?: CalendarMarker[];
+    getMarker?: (iso: string) => CalendarMarker | null;
+    isDisabled?: (iso: string) => boolean;
+    weekStartsOn?: 0 | 1;
+}
+type __VLS_Props = CalendarProps;
+type __VLS_ModelProps = {
+    "anchor"?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (iso: string) => any;
+    dayEnter: (iso: string) => any;
+    "update:anchor": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((iso: string) => any) | undefined;
+    onDayEnter?: ((iso: string) => any) | undefined;
+    "onUpdate:anchor"?: ((value: string | null) => any) | undefined;
+}>, {
+    selected: string | null;
+    markers: CalendarMarker[];
+    weekStartsOn: 0 | 1;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/context.d.ts

@@ -1,5 +1,6 @@
 import { type ComputedRef, type InjectionKey, type Ref } from "vue";
 import type { CanvasNode, CanvasTool, CanvasToolApi } from "./types.js";
+import type { ExportOptions, ExportResult } from "./tools/exportTool.js";
 export interface CanvasContext {
     tools: Ref<CanvasTool[]>;
     activeToolId: Ref<string | null>;
@@ -33,6 +34,14 @@ export interface CanvasContext {
     endAction: () => void;
     /** Keyboard handler for undo/redo shortcuts. Attach to the stage element. */
     onKeyDown: (e: KeyboardEvent) => void;
+    /**
+     * Export the current canvas as an image. Overrides merge over the registered
+     * `exportTool` options (if any) and the built-in defaults. Without
+     * `onExport`/`download` overrides the call triggers a browser download for
+     * backwards compatibility; pass `{ download: false }` or supply `onExport`
+     * to consume the result instead (e.g. push to a cart, upload to a backend).
+     */
+    exportCanvas: (overrides?: ExportOptions) => Promise<ExportResult>;
 }
 export declare const CANVAS_CONTEXT: InjectionKey<CanvasContext>;
 export declare function useCanvasContext(): CanvasContext;

package/dist/runtime/components/Canvas/index.d.vue.ts

@@ -1,4 +1,5 @@
 import type { CanvasNode, CanvasTool, CanvasToolApi } from "./types.js";
+import { type ExportOptions, type ExportResult } from "./tools/exportTool.js";
 export interface CanvasProps {
     /**
      * Unique name for this canvas instance. Required so detached toolbars and
@@ -31,6 +32,7 @@ export interface CanvasProps {
 type __VLS_Props = CanvasProps;
 declare function getToolOptions<T extends Record<string, unknown>>(id: string): T;
 declare function setActiveTool(id: string | null): void;
+declare function exportCanvas(overrides?: ExportOptions): Promise<ExportResult>;
 type __VLS_ModelProps = {
     "nodes"?: CanvasNode[];
 };
@@ -54,6 +56,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     redo: () => void;
     canUndo: import("vue").ComputedRef<boolean>;
     canRedo: import("vue").ComputedRef<boolean>;
+    exportCanvas: typeof exportCanvas;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:nodes": (value: CanvasNode<unknown>[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{

package/dist/runtime/components/Canvas/index.vue

@@ -15,6 +15,9 @@ import { useCanvasNodes } from "./composables/useCanvasNodes";
 import { useCanvasSetup } from "./composables/useCanvasSetup";
 import Stage from "./components/Stage.vue";
 import Toolbar from "./components/Toolbar.vue";
+import {
+  performExport
+} from "./tools/exportTool";
 const props = defineProps({
   name: { type: String, required: true },
   tools: { type: Array, required: false, default: () => [] },
@@ -122,6 +125,18 @@ function handleKeyDown(e) {
   }
   onKeyDown(e);
 }
+function exportCanvas(overrides = {}) {
+  const toolOpts = getToolOptions("export");
+  return performExport(
+    {
+      nodes: nodes.value,
+      tools: props.tools,
+      width: props.width,
+      height: props.height
+    },
+    { ...toolOpts, ...overrides }
+  );
+}
 const context = {
   tools: toolsRef,
   activeToolId,
@@ -146,7 +161,8 @@ const context = {
   endAction,
   onKeyDown: handleKeyDown,
   cursorOverride,
-  setCursor
+  setCursor,
+  exportCanvas
 };
 provide(CANVAS_CONTEXT, context);
 let registeredName = null;
@@ -190,7 +206,8 @@ defineExpose({
   undo,
   redo,
   canUndo,
-  canRedo
+  canRedo,
+  exportCanvas
 });
 </script>
 

package/dist/runtime/components/Canvas/index.vue.d.ts

@@ -1,4 +1,5 @@
 import type { CanvasNode, CanvasTool, CanvasToolApi } from "./types.js";
+import { type ExportOptions, type ExportResult } from "./tools/exportTool.js";
 export interface CanvasProps {
     /**
      * Unique name for this canvas instance. Required so detached toolbars and
@@ -31,6 +32,7 @@ export interface CanvasProps {
 type __VLS_Props = CanvasProps;
 declare function getToolOptions<T extends Record<string, unknown>>(id: string): T;
 declare function setActiveTool(id: string | null): void;
+declare function exportCanvas(overrides?: ExportOptions): Promise<ExportResult>;
 type __VLS_ModelProps = {
     "nodes"?: CanvasNode[];
 };
@@ -54,6 +56,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     redo: () => void;
     canUndo: import("vue").ComputedRef<boolean>;
     canRedo: import("vue").ComputedRef<boolean>;
+    exportCanvas: typeof exportCanvas;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:nodes": (value: CanvasNode<unknown>[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{

package/dist/runtime/components/Canvas/tools/exportTool.d.ts

@@ -1,18 +1,65 @@
-import type { CanvasTool } from "../types.js";
+import type { CanvasNode, CanvasTool } from "../types.js";
 /**
  * Image formats Canvas2D's `toBlob`/`toDataURL` natively supports across
  * modern browsers. Anything else (e.g. AVIF, TIFF) is encoder-dependent and
  * not guaranteed to round-trip.
  */
 export type ExportFormat = "png" | "jpeg" | "webp";
-export interface ExportToolOptions extends Record<string, unknown> {
-    /** Output format. Defaults to PNG. */
+export interface ExportResult {
+    blob: Blob;
+    dataURL: string;
+    /** Same bytes as `blob`, wrapped as a `File` with the configured filename. */
+    file: File;
     format: ExportFormat;
+    /** Output pixel width (already multiplied by `scale`). */
+    width: number;
+    /** Output pixel height (already multiplied by `scale`). */
+    height: number;
+    filename: string;
+}
+export interface ExportOptions {
+    /** Output format. Defaults to PNG. */
+    format?: ExportFormat;
     /** Quality for lossy formats (jpeg, webp), 0–1. Ignored for PNG. */
-    quality: number;
+    quality?: number;
     /** File name without extension. */
-    filename: string;
+    filename?: string;
     /** Pixel scale relative to the visible canvas (1 = same size). */
-    scale: number;
+    scale?: number;
+    /**
+     * If provided, receives the export result instead of (or alongside) the
+     * download. Use to push the image into application state (e.g. a cart) or
+     * upload to a backend. Async — the canvas awaits the returned Promise.
+     */
+    onExport?: (result: ExportResult) => void | Promise<void>;
+    /**
+     * Trigger a browser download. Defaults to `true` when `onExport` is not
+     * provided, `false` when it is.
+     */
+    download?: boolean;
+}
+export interface ExportToolOptions extends Required<Pick<ExportOptions, "format" | "quality" | "filename" | "scale">>, Pick<ExportOptions, "onExport" | "download">, Record<string, unknown> {
 }
+export declare const DEFAULT_EXPORT_OPTIONS: ExportToolOptions;
+export interface CanvasSnapshot {
+    nodes: CanvasNode[];
+    tools: CanvasTool[];
+    width: number;
+    height: number;
+}
+/**
+ * Render the snapshot to an offscreen canvas and produce a Blob/dataURL/File.
+ * Pure: does not download or invoke callbacks.
+ *
+ * The offscreen canvas is sized exactly to `snapshot.width × snapshot.height`
+ * (× `scale`), so any node geometry outside the canvas is naturally clipped —
+ * the result captures only what would be visible on the live canvas.
+ */
+export declare function renderCanvasSnapshot(snapshot: CanvasSnapshot, options?: ExportOptions): Promise<ExportResult>;
+/**
+ * Render the snapshot, then optionally hand the result to `onExport` and/or
+ * trigger a browser download. Resolves with the result so callers can chain
+ * additional work (uploads, state updates).
+ */
+export declare function performExport(snapshot: CanvasSnapshot, options?: ExportOptions): Promise<ExportResult>;
 export declare function exportTool(options?: Partial<ExportToolOptions>): CanvasTool<never, ExportToolOptions>;