orio-ui 1.19.0 → 1.23.2

package/dist/runtime/components/Canvas/tools/transformTool.js

@@ -0,0 +1,210 @@
+import { defineCanvasTool } from "../types.js";
+import {
+  findTopNode,
+  getNodeBounds,
+  hitTestNode,
+  renderHighlightRect,
+  toLocalPoint
+} from "./hitTest.js";
+import {
+  computeResizePatch,
+  cursorForHandle,
+  hitHandle,
+  normalizeAngleDelta,
+  renderResizeHandles,
+  renderRotationHandle
+} from "./transformHandles.js";
+import TransformTooltip from "./tooltips/Transform.vue";
+const RESIZE_HANDLES = [
+  "n",
+  "s",
+  "e",
+  "w",
+  "nw",
+  "ne",
+  "sw",
+  "se"
+];
+const ALL_HANDLES = [...RESIZE_HANDLES, "rotate"];
+export function transformTool(options = {}) {
+  let selectedNodeId = null;
+  let mode = null;
+  let hoveredHandle = null;
+  let activeHandle = null;
+  let dragCtx = null;
+  let prevAngle = 0;
+  let accumulatedRotation = 0;
+  let lastX = 0;
+  let lastY = 0;
+  function reset() {
+    mode = null;
+    activeHandle = null;
+    dragCtx = null;
+  }
+  function clearSelection(api) {
+    if (selectedNodeId) {
+      selectedNodeId = null;
+      hoveredHandle = null;
+      api.setCursor(null);
+      api.requestRender();
+    }
+  }
+  return defineCanvasTool({
+    id: "transform",
+    label: "Transform",
+    icon: "transform",
+    cursor: "default",
+    tooltip: TransformTooltip,
+    defaultOptions: {
+      radius: 10,
+      minSize: 8,
+      ...options
+    },
+    onPointerDown(e, api) {
+      if (selectedNodeId) {
+        const node2 = api.getNode(selectedNodeId);
+        if (node2) {
+          const handle = hitHandle(node2, e, { handles: ALL_HANDLES });
+          const bounds = getNodeBounds(node2);
+          const center = {
+            x: bounds.x + bounds.width / 2,
+            y: bounds.y + bounds.height / 2
+          };
+          if (handle === "rotate") {
+            mode = "rotate";
+            accumulatedRotation = node2.rotation ?? 0;
+            prevAngle = Math.atan2(e.y - center.y, e.x - center.x);
+            api.setCursor("none");
+            return;
+          }
+          if (handle && handle !== "rotate") {
+            mode = "resize";
+            activeHandle = handle;
+            dragCtx = {
+              original: {
+                ...node2,
+                data: JSON.parse(JSON.stringify(node2.data))
+              },
+              originalBounds: bounds,
+              startLocal: toLocalPoint(node2, e)
+            };
+            api.setCursor("none");
+            return;
+          }
+          const tools = api.getTools();
+          const toolMap = new Map(tools.map((t) => [t.id, t]));
+          if (hitTestNode(node2, e, api.options.radius, toolMap)) {
+            mode = "move";
+            lastX = e.x;
+            lastY = e.y;
+            api.setCursor("grabbing");
+            return;
+          }
+        }
+      }
+      const node = findTopNode(e, api, api.options.radius);
+      selectedNodeId = node ? node.id : null;
+      hoveredHandle = null;
+      api.requestRender();
+    },
+    onPointerMove(e, api) {
+      if (mode && selectedNodeId && e.buttons !== 0) {
+        const node = api.getNode(selectedNodeId);
+        if (!node) return;
+        if (mode === "resize" && activeHandle && dragCtx) {
+          const local = toLocalPoint(dragCtx.original, e);
+          const patch = computeResizePatch(activeHandle, local, dragCtx, {
+            minSize: api.options.minSize
+          });
+          if (patch) api.updateNode(selectedNodeId, patch);
+          api.setCursor("none");
+          return;
+        }
+        if (mode === "rotate") {
+          const b = getNodeBounds(node);
+          const angle = Math.atan2(
+            e.y - (b.y + b.height / 2),
+            e.x - (b.x + b.width / 2)
+          );
+          accumulatedRotation += normalizeAngleDelta(angle - prevAngle);
+          prevAngle = angle;
+          api.updateNode(selectedNodeId, { rotation: accumulatedRotation });
+          api.setCursor("none");
+          return;
+        }
+        if (mode === "move") {
+          const dx = e.x - lastX;
+          const dy = e.y - lastY;
+          lastX = e.x;
+          lastY = e.y;
+          const patch = {
+            x: node.x + dx,
+            y: node.y + dy
+          };
+          if (Array.isArray(node.data?.points)) {
+            const data = node.data;
+            patch.data = {
+              ...node.data,
+              points: data.points.map((p) => ({ x: p.x + dx, y: p.y + dy }))
+            };
+          }
+          api.updateNode(selectedNodeId, patch);
+          api.setCursor("grabbing");
+          return;
+        }
+      }
+      if (selectedNodeId) {
+        const node = api.getNode(selectedNodeId);
+        if (node) {
+          const handle = hitHandle(node, e, { handles: ALL_HANDLES });
+          if (handle !== hoveredHandle) {
+            hoveredHandle = handle;
+            api.requestRender();
+          }
+          if (handle) {
+            api.setCursor(cursorForHandle(handle, node.rotation));
+            return;
+          }
+          const tools = api.getTools();
+          const toolMap = new Map(tools.map((t) => [t.id, t]));
+          if (hitTestNode(node, e, api.options.radius, toolMap)) {
+            api.setCursor("grab");
+            return;
+          }
+        }
+      }
+      api.setCursor(null);
+    },
+    onPointerUp(_e, api) {
+      reset();
+      api.setCursor(null);
+    },
+    onDeactivate(api) {
+      reset();
+      api.setCursor(null);
+      clearSelection(api);
+    },
+    onKeyDown(e, api) {
+      if (e.key === "Escape" && selectedNodeId) {
+        clearSelection(api);
+        e.preventDefault();
+      }
+    },
+    renderOverlay(ctx, api) {
+      if (!selectedNodeId) return;
+      const node = api.getNode(selectedNodeId);
+      if (!node) {
+        selectedNodeId = null;
+        return;
+      }
+      renderHighlightRect(ctx, node);
+      renderResizeHandles(ctx, node, {
+        handles: RESIZE_HANDLES,
+        hovered: mode === "resize" ? activeHandle : hoveredHandle && hoveredHandle !== "rotate" ? hoveredHandle : null
+      });
+      renderRotationHandle(ctx, node, {
+        hovered: mode === "rotate" || hoveredHandle === "rotate"
+      });
+    }
+  });
+}

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

@@ -0,0 +1 @@
+export declare function undoTool(): import("../types.js").CanvasTool<unknown, Record<string, unknown>>;

package/dist/runtime/components/Canvas/tools/undoTool.js

@@ -0,0 +1,17 @@
+import { defineCanvasTool } from "../types.js";
+import UndoTooltip from "./tooltips/Undo.vue";
+export function undoTool() {
+  return defineCanvasTool({
+    id: "undo",
+    label: "Undo",
+    icon: "undo",
+    kind: "action",
+    tooltip: UndoTooltip,
+    action(api) {
+      api.undo();
+    },
+    disabled(api) {
+      return !api.canUndo.value;
+    }
+  });
+}

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

@@ -0,0 +1,125 @@
+import type { Component, ComputedRef, Ref } from "vue";
+import type { IconName } from "../../utils/icon-registry.js";
+export interface CanvasPoint {
+    x: number;
+    y: number;
+}
+export interface CanvasNode<TData = unknown> {
+    id: string;
+    /** Matches the id of the tool that owns (renders) this node. */
+    type: string;
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    rotation?: number;
+    /** When true, future interaction tools should skip this node. */
+    frozen?: boolean;
+    zIndex?: number;
+    data: TData;
+}
+export interface CanvasPointerEvent {
+    /** Canvas-space x (origin is the top-left of the stage). */
+    x: number;
+    /** Canvas-space y. */
+    y: number;
+    /** Viewport-space x — useful for positioning HTML overlays. */
+    clientX: number;
+    /** Viewport-space y. */
+    clientY: number;
+    /** Pressed buttons bitmask from the underlying PointerEvent. */
+    buttons: number;
+    originalEvent: PointerEvent;
+}
+export interface CanvasToolApi<TOptions extends Record<string, unknown> = Record<string, unknown>> {
+    /** Reactive, mutable options bag for this tool. */
+    options: TOptions;
+    /** All current nodes — treat as read-only; use helpers to mutate. */
+    nodes: Ref<CanvasNode[]>;
+    addNode: (node: Omit<CanvasNode, "id"> & {
+        id?: string;
+    }) => CanvasNode;
+    updateNode: (id: string, patch: Partial<Omit<CanvasNode, "id">>) => void;
+    removeNode: (id: string) => void;
+    getNode: (id: string) => CanvasNode | undefined;
+    clear: () => void;
+    /** Schedule a redraw on the next animation frame. */
+    requestRender: () => void;
+    /** The stage's root element — mount overlay DOM here. */
+    stageEl: () => HTMLElement | null;
+    /** Current canvas size in CSS pixels. */
+    size: () => {
+        width: number;
+        height: number;
+    };
+    /** Undo the last action. */
+    undo: () => void;
+    /** Redo the last undone action. */
+    redo: () => void;
+    /** Whether there's anything to undo. */
+    canUndo: ComputedRef<boolean>;
+    /** Whether there's anything to redo. */
+    canRedo: ComputedRef<boolean>;
+    /** Read/write another tool's reactive options. */
+    getToolOptions: <T extends Record<string, unknown>>(id: string) => T;
+    /** All registered tools — useful for hit-testing across tool types. */
+    getTools: () => CanvasTool[];
+    /**
+     * Override the stage cursor — pass `null` to fall back to the active tool's
+     * static `cursor`. Use for hover-state feedback (resize handles, rotation
+     * handle, etc.).
+     */
+    setCursor: (cursor: string | null) => void;
+}
+/**
+ * Tool kind determines how the toolbar renders the tool:
+ * - `"interaction"` (default) — activates on click, receives pointer events on the stage.
+ * - `"action"` — fires `action()` on click, never becomes the active tool.
+ * - `"widget"` — renders a custom `toolbar` component instead of a button.
+ */
+export type CanvasToolKind = "interaction" | "action" | "widget";
+export interface CanvasTool<TNodeData = unknown, TOptions extends Record<string, unknown> = Record<string, unknown>> {
+    /** Stable id — also used as `node.type` for nodes produced by this tool. */
+    id: string;
+    label?: string;
+    /** Icon name from the Orio icon registry. */
+    icon?: IconName | (string & {});
+    /** CSS cursor applied to the stage while this tool is active. */
+    cursor?: string;
+    tooltip?: Component;
+    /**
+     * Tool kind. Defaults to `"interaction"`.
+     * - `"interaction"` — standard pointer tool (draw, text, etc.)
+     * - `"action"` — one-shot action (undo, redo, clear)
+     * - `"widget"` — renders a custom component in the toolbar
+     */
+    kind?: CanvasToolKind;
+    /** For action tools: callback fired when the button is clicked. */
+    action?: (api: CanvasToolApi<TOptions>) => void;
+    /** For action tools: reactive disabled state. */
+    disabled?: (api: CanvasToolApi<TOptions>) => boolean;
+    /** For widget tools: Vue component rendered in the toolbar instead of a button. */
+    toolbar?: Component;
+    defaultOptions?: TOptions;
+    onPointerDown?: (e: CanvasPointerEvent, api: CanvasToolApi<TOptions>) => void;
+    onPointerMove?: (e: CanvasPointerEvent, api: CanvasToolApi<TOptions>) => void;
+    onPointerUp?: (e: CanvasPointerEvent, api: CanvasToolApi<TOptions>) => void;
+    onActivate?: (api: CanvasToolApi<TOptions>) => void;
+    onDeactivate?: (api: CanvasToolApi<TOptions>) => void;
+    onKeyDown?: (e: KeyboardEvent, api: CanvasToolApi<TOptions>) => void;
+    render?: (ctx: CanvasRenderingContext2D, node: CanvasNode<TNodeData>) => void;
+    /** Draw overlay graphics after all nodes have been rendered. */
+    renderOverlay?: (ctx: CanvasRenderingContext2D, api: CanvasToolApi<TOptions>) => void;
+    /**
+     * Hit-test a node against a point. Used by the erase tool (and future
+     * selection tools) to determine if a pointer intersects this node.
+     * Return `true` if the node is "hit".
+     *
+     * @param node    The node to test.
+     * @param point   The pointer position in canvas-space.
+     * @param radius  The eraser/selection radius in CSS pixels.
+     */
+    hitTest?: (node: CanvasNode<TNodeData>, point: CanvasPoint, radius: number) => boolean;
+}
+/** Author-facing helper that preserves generics on a tool definition. */
+export declare function defineCanvasTool<TNodeData = unknown, TOptions extends Record<string, unknown> = Record<string, unknown>>(tool: CanvasTool<TNodeData, TOptions>): CanvasTool<TNodeData, TOptions>;

package/dist/runtime/components/Canvas/types.js

@@ -0,0 +1,3 @@
+export function defineCanvasTool(tool) {
+  return tool;
+}

package/dist/runtime/components/CheckBox.vue

@@ -9,12 +9,13 @@ const props = defineProps({
   id: { type: String, required: false },
   label: { type: String, required: false },
   layout: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 </script>
 
 <template>
-  <orio-control-element v-bind="props" class="checkbox">
+  <orio-control-element v-bind="props" class="checkbox" fill>
     <label class="checkbox-label">
       <input
         v-model="modelValue"
@@ -47,6 +48,9 @@ const props = defineProps({
 .checkbox {
   --box-size: var(--control-icon-size, 1rem);
 }
+.checkbox .checkbox-label {
+  vertical-align: baseline;
+}
 .checkbox-label {
   position: relative;
   user-select: none;
@@ -60,7 +64,6 @@ const props = defineProps({
   position: absolute;
   inset: 0;
   width: var(--box-size);
-  height: 1rem;
   margin: 0;
   opacity: 0;
 }

package/dist/runtime/components/CheckboxGroup.vue

@@ -5,7 +5,8 @@ const props = defineProps({
   error: { type: [String, null], required: false, default: null },
   label: { type: String, required: false },
   layout: { type: String, required: false, default: "vertical" },
-  size: { type: String, required: false, default: "md" }
+  size: { type: String, required: false, default: "md" },
+  fill: { type: Boolean, required: false }
 });
 const modelValue = defineModel({ type: Array, ...{ default: () => [] } });
 function isChecked(value) {

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

@@ -31,6 +31,10 @@ export interface ControlProps {
      * Size of the control and its inner elements
      */
     size?: ControlSize;
+    /**
+     * Whether element should fill the container
+     */
+    fill?: boolean;
 }
 declare var __VLS_7: {
     id: string;
@@ -45,6 +49,7 @@ declare const __VLS_base: import("vue").DefineComponent<ControlProps, {}, {}, {}
     id: string;
     layout: ControlLayout;
     size: ControlSize;
+    fill: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ControlElement.vue

@@ -9,7 +9,8 @@ const props = defineProps({
   id: { type: String, required: false, default: () => useId() },
   label: { type: String, required: false },
   layout: { type: String, required: false, default: "vertical" },
-  size: { type: String, required: false, default: "md" }
+  size: { type: String, required: false, default: "md" },
+  fill: { type: Boolean, required: false, default: false }
 });
 provideControlSize(toRef(props, "size"));
 const sizeStyle = computed(() => sizeTokens[props.size]);
@@ -18,7 +19,12 @@ const sizeStyle = computed(() => sizeTokens[props.size]);
 <template>
   <div
     class="control"
-    :class="[appearance, layout, `size-${size}`, { 'has-error': error, group }]"
+    :class="[
+  appearance,
+  layout,
+  `size-${size}`,
+  { 'has-error': error, group, fill }
+]"
     :style="sizeStyle"
     v-bind="{
   ...$attrs,
@@ -48,6 +54,7 @@ const sizeStyle = computed(() => sizeTokens[props.size]);
   display: flex;
   flex-direction: column;
   gap: 0.1rem;
+  border-radius: var(--control-radius);
 }
 .control .control-label {
   font-size: var(--control-label-font-size);
@@ -60,10 +67,19 @@ const sizeStyle = computed(() => sizeTokens[props.size]);
   color: var(--color-danger);
   font-size: var(--control-label-font-size);
 }
+.control.fill .slot-wrapper {
+  display: flex;
+}
+.control.fill .slot-wrapper > * {
+  flex: 1;
+}
 .control .slot-wrapper :deep(*) {
   font-size: var(--control-font-size);
 }
-.control.has-error .slot-wrapper {
+.control.has-error .slot-wrapper:not(:has(:deep(.error-fields))) {
+  border: 1px solid var(--color-danger);
+}
+.control.has-error .slot-wrapper :deep(.error-fields .slot-wrapper > *) {
   border: 1px solid var(--color-danger);
 }
 .control.has-error .slot-wrapper :deep(*) {

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

@@ -31,6 +31,10 @@ export interface ControlProps {
      * Size of the control and its inner elements
      */
     size?: ControlSize;
+    /**
+     * Whether element should fill the container
+     */
+    fill?: boolean;
 }
 declare var __VLS_7: {
     id: string;
@@ -45,6 +49,7 @@ declare const __VLS_base: import("vue").DefineComponent<ControlProps, {}, {}, {}
     id: string;
     layout: ControlLayout;
     size: ControlSize;
+    fill: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/DateRangePicker.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { ref, watch, computed } from "vue";
+import { useI18n } from "vue-i18n";
 defineProps({
   month: { type: Boolean, required: false }
 });
+const { t } = useI18n();
 const dates = defineModel("dates", { type: Object, ...{ required: true } });
 const present = ref(dates.value.endDate !== "" && !dates.value.endDate);
 watch(present, (value) => {
@@ -24,12 +26,22 @@ defineExpose({ dateIsCorrect });
 <template>
   <orio-control-element
     v-bind="$attrs"
-    :error="!dateIsCorrect && 'Start date must be before end date.'"
+    :error="!dateIsCorrect ? t('dateRangePicker.startBeforeEnd') : null"
   >
     <div class="date-range-picker">
-      <orio-date-picker v-model:date="dates.startDate" :month />
-      <orio-date-picker v-model:date="dates.endDate" :month />
-      <orio-check-box v-model="present"> Present </orio-check-box>
+      <orio-date-picker
+        v-model:date="dates.startDate"
+        class="error-fields"
+        :month
+      />
+      <orio-date-picker
+        v-model:date="dates.endDate"
+        class="error-fields"
+        :month
+      />
+      <orio-check-box v-model="present">
+        {{ t("dateRangePicker.present") }}
+      </orio-check-box>
     </div>
   </orio-control-element>
 </template>

package/dist/runtime/components/Icon.vue

@@ -15,12 +15,12 @@ const sizeValue = computed(() => {
 
 <template>
   <span
-    class="orio-icon"
+    class="icon"
     :style="{ color, width: sizeValue, height: sizeValue }"
     v-html="iconSvg"
   />
 </template>
 
 <style scoped>
-.orio-icon{align-items:center;display:inline-flex;flex-shrink:0;height:var(--control-icon-size,1.5em);justify-content:center;width:var(--control-icon-size,1.5em)}.orio-icon :deep(svg){fill:currentColor;height:100%;width:100%}
+.icon{align-items:center;display:inline-flex;flex-shrink:0;height:var(--control-icon-size,1.5em);justify-content:center;width:var(--control-icon-size,1.5em)}.icon :deep(svg){fill:currentColor;height:100%;width:100%}
 </style>

package/dist/runtime/components/Input.vue

@@ -6,7 +6,8 @@ const props = defineProps({
   group: { type: Boolean, required: false },
   id: { type: String, required: false },
   label: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const modelValue = defineModel({ type: String, ...{ default: "" } });
 </script>

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

@@ -0,0 +1,29 @@
+export interface ListItemProps {
+    selectable?: boolean;
+}
+type __VLS_Props = ListItemProps;
+type __VLS_ModelProps = {
+    "selected"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    start?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    end?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selected"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ListItem.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { useSlots } from "vue";
+const { selectable = false } = defineProps({
+  selectable: { type: Boolean, required: false }
+});
+const slots = useSlots();
+const selected = defineModel("selected", { type: Boolean });
+function toggle() {
+  if (!selectable) return;
+  selected.value = !selected.value;
+}
+function onKeydown(event) {
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    toggle();
+  }
+}
+</script>
+
+<template>
+  <li
+    class="list-item"
+    :class="{ selectable, selected }"
+    :tabindex="selectable ? 0 : void 0"
+    :role="selectable ? 'checkbox' : void 0"
+    :aria-checked="selectable ? selected : void 0"
+    @click="toggle"
+    @keydown="onKeydown"
+  >
+    <div v-if="!!slots.start || selectable" class="boundary">
+      <slot name="start">
+        <orio-check-box :model-value="selected" />
+      </slot>
+    </div>
+    <div class="content">
+      <slot />
+    </div>
+    <div v-if="!!slots.end" class="boundary">
+      <slot name="end" />
+    </div>
+  </li>
+</template>
+
+<style scoped>
+.list-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  user-select: none;
+}
+.list-item.selectable {
+  cursor: pointer;
+}
+.list-item {
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.list-item.selected {
+  background-color: var(--color-accent);
+  color: var(--color-accent-soft-darker);
+}
+.list-item:hover:not(.selected) {
+  background-color: var(--color-surface);
+}
+.list-item .content {
+  flex-grow: 1;
+}
+.list-item .boundary {
+  display: flex;
+}
+</style>