orio-ui 1.20.0 → 1.23.3

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

@@ -0,0 +1,191 @@
+import { getNodeBounds, toLocalPoint } from "./hitTest.js";
+const DEFAULT_STYLE = {
+  size: 10,
+  fill: "transparent",
+  stroke: "rgba(31, 122, 236, 1)",
+  lineWidth: 1.5,
+  rotateOffset: 28
+};
+const HOVER_ALPHA = 0.4;
+export const HANDLE_CURSORS = {
+  n: "ns-resize",
+  s: "ns-resize",
+  e: "ew-resize",
+  w: "ew-resize",
+  nw: "nwse-resize",
+  se: "nwse-resize",
+  ne: "nesw-resize",
+  sw: "nesw-resize"
+};
+export function cursorForHandle(handle, rotation = 0) {
+  if (handle === "rotate") return "grab";
+  if (!rotation) return HANDLE_CURSORS[handle];
+  const order = ["n", "ne", "e", "se", "s", "sw", "w", "nw"];
+  const idx = order.indexOf(handle);
+  const step = Math.round(rotation * 4 / Math.PI);
+  return HANDLE_CURSORS[order[((idx + step) % 8 + 8) % 8]];
+}
+export function getResizeHandles(b) {
+  const cx = b.x + b.width / 2;
+  const cy = b.y + b.height / 2;
+  return {
+    nw: { x: b.x, y: b.y },
+    n: { x: cx, y: b.y },
+    ne: { x: b.x + b.width, y: b.y },
+    e: { x: b.x + b.width, y: cy },
+    se: { x: b.x + b.width, y: b.y + b.height },
+    s: { x: cx, y: b.y + b.height },
+    sw: { x: b.x, y: b.y + b.height },
+    w: { x: b.x, y: cy }
+  };
+}
+export function getRotationHandle(b, offset = DEFAULT_STYLE.rotateOffset) {
+  return { x: b.x + b.width / 2, y: b.y - offset };
+}
+export function hitHandle(node, point, opts = {}) {
+  const style = { ...DEFAULT_STYLE, ...opts.style };
+  const allowed = new Set(
+    opts.handles ?? ["n", "s", "e", "w", "nw", "ne", "sw", "se", "rotate"]
+  );
+  const bounds = getNodeBounds(node);
+  const local = toLocalPoint(node, point);
+  const r = style.size / 2 + 2;
+  if (allowed.has("rotate")) {
+    const h = getRotationHandle(bounds, style.rotateOffset);
+    if ((local.x - h.x) ** 2 + (local.y - h.y) ** 2 <= (r + 2) ** 2) {
+      return "rotate";
+    }
+  }
+  const resize = getResizeHandles(bounds);
+  for (const key of Object.keys(resize)) {
+    if (!allowed.has(key)) continue;
+    const h = resize[key];
+    if (Math.abs(local.x - h.x) <= r && Math.abs(local.y - h.y) <= r) {
+      return key;
+    }
+  }
+  return null;
+}
+export function renderResizeHandles(ctx, node, opts = {}) {
+  const style = { ...DEFAULT_STYLE, ...opts.style };
+  const bounds = getNodeBounds(node);
+  const all = getResizeHandles(bounds);
+  const list = opts.handles ?? Object.keys(all);
+  ctx.save();
+  if (node.rotation) {
+    const cx = bounds.x + bounds.width / 2;
+    const cy = bounds.y + bounds.height / 2;
+    ctx.translate(cx, cy);
+    ctx.rotate(node.rotation);
+    ctx.translate(-cx, -cy);
+  }
+  ctx.fillStyle = style.fill;
+  ctx.strokeStyle = style.stroke;
+  ctx.lineWidth = style.lineWidth;
+  for (const key of list) {
+    const p = all[key];
+    const half = style.size / 2;
+    const hovered = opts.hovered === key;
+    if (hovered) {
+      ctx.save();
+      ctx.globalAlpha = HOVER_ALPHA;
+    }
+    ctx.beginPath();
+    ctx.rect(p.x - half, p.y - half, style.size, style.size);
+    ctx.fill();
+    ctx.stroke();
+    if (hovered) ctx.restore();
+  }
+  ctx.restore();
+}
+export function renderRotationHandle(ctx, node, opts = {}) {
+  const style = { ...DEFAULT_STYLE, ...opts.style };
+  const bounds = getNodeBounds(node);
+  const top = { x: bounds.x + bounds.width / 2, y: bounds.y };
+  const handle = getRotationHandle(bounds, style.rotateOffset);
+  const r = style.size / 2 + 1;
+  ctx.save();
+  if (node.rotation) {
+    const cx = bounds.x + bounds.width / 2;
+    const cy = bounds.y + bounds.height / 2;
+    ctx.translate(cx, cy);
+    ctx.rotate(node.rotation);
+    ctx.translate(-cx, -cy);
+  }
+  ctx.strokeStyle = style.stroke;
+  ctx.fillStyle = style.fill;
+  ctx.lineWidth = style.lineWidth;
+  if (opts.hovered) ctx.globalAlpha = HOVER_ALPHA;
+  ctx.beginPath();
+  ctx.moveTo(top.x, top.y);
+  ctx.lineTo(handle.x, handle.y);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(handle.x, handle.y, r, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.stroke();
+  ctx.restore();
+}
+export function normalizeAngleDelta(delta) {
+  const TAU = Math.PI * 2;
+  return ((delta + Math.PI) % TAU + TAU) % TAU - Math.PI;
+}
+export function rotationFromPoint(node, point) {
+  const b = getNodeBounds(node);
+  const cx = b.x + b.width / 2;
+  const cy = b.y + b.height / 2;
+  return Math.atan2(point.y - cy, point.x - cx) + Math.PI / 2;
+}
+export function computeResizePatch(handle, pointerLocal, ctx, opts = {}) {
+  const minSize = opts.minSize ?? 8;
+  const ob = ctx.originalBounds;
+  let nx = ob.x;
+  let ny = ob.y;
+  let nw = ob.width;
+  let nh = ob.height;
+  if (handle.includes("e")) nw = Math.max(minSize, pointerLocal.x - ob.x);
+  if (handle.includes("s")) nh = Math.max(minSize, pointerLocal.y - ob.y);
+  if (handle.includes("w")) {
+    const right = ob.x + ob.width;
+    nx = Math.min(pointerLocal.x, right - minSize);
+    nw = right - nx;
+  }
+  if (handle.includes("n")) {
+    const bottom = ob.y + ob.height;
+    ny = Math.min(pointerLocal.y, bottom - minSize);
+    nh = bottom - ny;
+  }
+  const data = ctx.original.data;
+  if (ctx.original.width != null && ctx.original.height != null) {
+    return { x: nx, y: ny, width: nw, height: nh };
+  }
+  if (Array.isArray(data?.points)) {
+    const points = data.points;
+    const sx = ob.width === 0 ? 1 : nw / ob.width;
+    const sy = ob.height === 0 ? 1 : nh / ob.height;
+    return {
+      x: ctx.original.x,
+      y: ctx.original.y,
+      data: {
+        ...data,
+        points: points.map((p) => ({
+          x: nx + (p.x - ob.x) * sx,
+          y: ny + (p.y - ob.y) * sy
+        }))
+      }
+    };
+  }
+  if (typeof data?.text === "string" && typeof data?.fontSize === "number") {
+    if (!["nw", "ne", "sw", "se"].includes(handle)) return null;
+    const sx = ob.width === 0 ? 1 : nw / ob.width;
+    const sy = ob.height === 0 ? 1 : nh / ob.height;
+    const scale = Math.max(sx, sy);
+    const newFont = Math.max(minSize, data.fontSize * scale);
+    return {
+      x: nx,
+      y: ny + (newFont - data.fontSize) / 2,
+      data: { ...data, fontSize: newFont }
+    };
+  }
+  return null;
+}

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

@@ -0,0 +1,7 @@
+export interface TransformToolOptions extends Record<string, unknown> {
+    /** Hit-test radius in CSS pixels for picking a node to select. */
+    radius: number;
+    /** Minimum side length when resizing. */
+    minSize: number;
+}
+export declare function transformTool(options?: Partial<TransformToolOptions>): import("../types.js").CanvasTool<never, TransformToolOptions>;

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/ControlElement.vue

@@ -54,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);
@@ -75,7 +76,10 @@ const sizeStyle = computed(() => sizeTokens[props.size]);
 .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/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/LocaleSwitcher.d.vue.ts

@@ -0,0 +1,13 @@
+export interface LocaleOption {
+    code: string;
+    flag: string;
+    label: string;
+}
+interface Props {
+    locales?: LocaleOption[];
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    locales: LocaleOption[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;