@mittwald/flow-remote-vue-components 0.0.0-stage → 1.5.0-next.35

package/dist/types/overlays/overlayController.d.ts

@@ -0,0 +1,125 @@
+import { ComputedRef, Raw, Ref } from 'vue';
+/**
+ * The Vue counterpart of Flow's `OverlayController`.
+ *
+ * Flow's version is a MobX model shared through React context; here the state
+ * is a `ref` and the sharing is `provide`/`inject`. Same contract: a trigger
+ * opens it, the overlay reads it, and anything inside can close it.
+ */
+export type OverlayOpenHandler = () => unknown;
+export type OverlayCloseHandler = () => unknown;
+export type OverlayOpenStateHandler = (isOpen: boolean) => unknown;
+export interface OverlayCloseOptions {
+    /** Close without asking, even when the overlay requires confirmation. */
+    bypassConfirmation?: boolean;
+}
+export interface OverlayController extends Raw<Record<never, never>> {
+    isOpen: Ref<boolean>;
+    /**
+     * Whether closing has to be confirmed first. Set by a `<Modal
+     * confirm-on-close>`, not by the app.
+     */
+    confirmOnClose: Ref<boolean>;
+    /** Whether the confirmation is on screen right now. */
+    isConfirmingClose: Ref<boolean>;
+    open: () => void;
+    /**
+     * Closes — or asks first, when the overlay requires confirmation and
+     * `bypassConfirmation` is not set. Flow's `close(options)`.
+     */
+    close: (options?: OverlayCloseOptions) => void;
+    toggle: () => void;
+    setOpen: (isOpen: boolean, options?: OverlayCloseOptions) => void;
+    /**
+     * Sets the state without running a handler — to mirror a controlled `isOpen`,
+     * whose change came from the app.
+     */
+    syncOpen: (isOpen: boolean) => void;
+    /** `close()` without options: asks first, when the overlay requires it. */
+    requestClose: () => void;
+    /** Answers a pending confirmation with yes: the overlay closes. */
+    confirmClose: () => void;
+    /** Answers a pending confirmation with no: the overlay stays open. */
+    cancelClose: () => void;
+    /** Flow's name for `cancelClose`. */
+    cancelConfirmation: () => void;
+    addOnOpen: (handler: OverlayOpenHandler) => () => void;
+    addOnClose: (handler: OverlayCloseHandler) => () => void;
+    addOnOpenChange: (handler: OverlayOpenStateHandler) => () => void;
+}
+export interface CreateOverlayControllerOptions {
+    /** Whether the overlay starts open. @default false */
+    isDefaultOpen?: boolean;
+}
+export interface UseOverlayControllerOptions extends CreateOverlayControllerOptions {
+    /**
+     * Hand back the controller of the surrounding overlay of the requested type,
+     * when there is one, instead of a new one — as in Flow. @default true
+     */
+    reuseControllerFromContext?: boolean;
+}
+/** Whether a value is a controller, rather than options naming one. */
+export declare const isOverlayController: (value: unknown) => value is OverlayController;
+/**
+ * Builds a controller around an existing `isOpen`, so a second controller can
+ * drive the same state — which is how the confirmation modal is bound to its
+ * parent's `isConfirmingClose`.
+ */
+export declare const createOverlayControllerFor: (isOpen: Ref<boolean>) => OverlayController;
+/**
+ * Registers an overlay's `onOpen`/`onClose`/`onOpenChange` props on its
+ * controller for as long as it is mounted — Flow's `useUpdateOptions`.
+ */
+export declare const useOverlayHandlers: (controller: () => OverlayController, handlers: {
+    onOpen?: () => OverlayOpenHandler | undefined;
+    onClose?: () => OverlayCloseHandler | undefined;
+    onOpenChange?: () => OverlayOpenStateHandler | undefined;
+}) => void;
+export declare const createOverlayController: (options?: CreateOverlayControllerOptions) => OverlayController;
+/**
+ * A controller an app can hold itself, to open an overlay from anywhere —
+ * Flow's `useOverlayController(type, options)`. Given a type, it hands back the
+ * surrounding overlay's controller of that type when there is one, as Flow
+ * does; `reuseControllerFromContext: false` asks for a new one regardless.
+ *
+ * Also takes the options alone, for a controller that belongs to no type. Call
+ * it in `setup()`: the surrounding overlay is found through `inject`.
+ */
+export declare function useOverlayController(type: OverlayType, options?: UseOverlayControllerOptions): OverlayController;
+export declare function useOverlayController(options?: CreateOverlayControllerOptions): OverlayController;
+/**
+ * Flow's `useModalController(options)`: `useOverlayController("Modal",
+ * options)`.
+ */
+export declare const useModalController: (options?: UseOverlayControllerOptions) => OverlayController;
+/** The overlays a controller can be registered for, by Flow component name. */
+export type OverlayType = "Modal" | "Popover" | "LightBox";
+/**
+ * Flow's `OverlayContext`: the surrounding overlays' controllers by component
+ * name, and the one whose content this subtree is. A trigger registers its
+ * controller by name only — its button is not inside the overlay it opens.
+ */
+export interface OverlayContext {
+    byType: Partial<Record<OverlayType, OverlayController>>;
+    nearest?: OverlayController;
+}
+export declare const injectOverlayContext: () => OverlayContext;
+/**
+ * Provides the context for a subtree. The controller may be a getter: an
+ * overlay whose `controller` prop changes hands its subtree the new one, and
+ * the context reads it when it is asked rather than when it was provided.
+ */
+export declare const provideOverlayContext: (type: OverlayType, controller: OverlayController | (() => OverlayController), options?: {
+    isOverlayContent?: boolean;
+}) => void;
+/**
+ * The controller an overlay or trigger drives, in Flow's order of precedence:
+ * the one the app passes, the one of a surrounding trigger of that type, or one
+ * of its own. It follows the prop — Flow reads it on every render.
+ */
+export declare const useOwnController: (fromProp: () => OverlayController | undefined, inheritFrom: OverlayType | undefined, options?: () => CreateOverlayControllerOptions) => ComputedRef<OverlayController>;
+/**
+ * The controller of the surrounding overlay of that type — or, without a type,
+ * of the overlay this component is inside.
+ */
+export declare const injectOverlayController: (type?: OverlayType) => OverlayController | undefined;

package/dist/types/overlays/overlayRegistry.d.ts

@@ -0,0 +1,3 @@
+import { Component, VNode } from 'vue';
+export declare const markAsOverlay: <T extends Component>(component: T) => T;
+export declare const isOverlay: (child: VNode) => boolean;

package/dist/types/overlays/triggers.d.ts

@@ -0,0 +1,75 @@
+/** Opens a `Modal`. */
+export declare const ModalTrigger: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    isDefaultOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    controller: {
+        type: import('vue').PropType<import('./overlayController').OverlayController>;
+        default: undefined;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    isDefaultOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    controller: {
+        type: import('vue').PropType<import('./overlayController').OverlayController>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    controller: import('./overlayController').OverlayController;
+    isDefaultOpen: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+/** Opens a `Popover`. */
+export declare const PopoverTrigger: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    isDefaultOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    controller: {
+        type: import('vue').PropType<import('./overlayController').OverlayController>;
+        default: undefined;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    isDefaultOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    controller: {
+        type: import('vue').PropType<import('./overlayController').OverlayController>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    controller: import('./overlayController').OverlayController;
+    isDefaultOpen: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+/** Opens a `LightBox`. */
+export declare const LightBoxTrigger: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    isDefaultOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    controller: {
+        type: import('vue').PropType<import('./overlayController').OverlayController>;
+        default: undefined;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    isDefaultOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    controller: {
+        type: import('vue').PropType<import('./overlayController').OverlayController>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    controller: import('./overlayController').OverlayController;
+    isDefaultOpen: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/types/version.d.ts

@@ -0,0 +1,4 @@
+import { Version } from '@mittwald/flow-remote-core';
+export declare const communicationVersion = Version.v5;
+export declare const packageVersion: string;
+export declare const version = Version.v5;

package/package.json

@@ -1,6 +1,90 @@
 {
   "name": "@mittwald/flow-remote-vue-components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.5.0-next.35",
+  "type": "module",
+  "description": "Vue components that can be used in a remote environment",
+  "homepage": "https://flow.mittwald.de",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mittwald/flow"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/js/index.mjs"
+    },
+    "./RemoteRoot": {
+      "types": "./dist/types/components/RemoteRoot.d.ts",
+      "default": "./dist/js/RemoteRoot.mjs"
+    }
+  },
+  "files": [
+    "USAGE.md",
+    "dist"
+  ],
+  "engines": {
+    "node": ">=24.0.0"
+  },
+  "dependencies": {
+    "@internationalized/date": "^3.12.3",
+    "@tanstack/table-core": "^8.21.3",
+    "country-codes-list": "^2.0.0",
+    "dot-prop": "^10.2.0",
+    "luxon": "^3.7.2",
+    "mobx": "^6.16.1",
+    "object-code": "^2.0.0",
+    "remeda": "^2.43.0",
+    "@mittwald/flow-remote-core": "1.5.0-next.35",
+    "@mittwald/flow-remote-elements": "1.5.0-next.35"
+  },
+  "devDependencies": {
+    "@quilted/threads": "^3.3.1",
+    "@types/node": "^25.9.3",
+    "@types/react": "^19.2",
+    "@types/react-dom": "^19.2",
+    "@vitest/browser": "^4.1.11",
+    "@vitest/browser-playwright": "^4.1.11",
+    "nx": "^22.7.5",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "rimraf": "^6.1.3",
+    "tsx": "^4.23.12",
+    "typescript": "^6.0.3",
+    "unplugin-dts": "^1.0.3",
+    "vite": "^8.2.2",
+    "vite-plugin-externalize-deps": "^0.10.0",
+    "vitest": "^4.1.11",
+    "vue": "~3.5.38",
+    "@mittwald/ext-bridge": "1.5.0-next.35",
+    "@mittwald/flow-components-base": "1.5.0-next.35",
+    "@mittwald/flow-core": "1.5.0-next.35",
+    "@mittwald/flow-icons-base": "1.5.0-next.35",
+    "@mittwald/flow-react-components": "1.5.0-next.35",
+    "@mittwald/flow-remote-react-renderer": "1.5.0-next.35",
+    "@mittwald/flow-remote-react-components": "1.5.0-next.35",
+    "@mittwald/typescript-config": "1.5.0-next.35"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "@mittwald/ext-bridge": "1.5.0-next.35",
+    "@mittwald/flow-react-components": "1.5.0-next.35"
+  },
+  "flowStatus": "beta",
+  "scripts": {
+    "build": "vite build --config vite.build.config.ts",
+    "build:icons": "tsx dev/icons/generate.ts",
+    "clean": "rimraf dist src/icons/components/*",
+    "test:browser": "vitest run --project=browser --browser.headless",
+    "test:browser:dev": "vitest dev --project=browser",
+    "test:browser:prepare": "if [ -z \"$CI\" ]; then playwright install firefox webkit; fi",
+    "test:compile": "tsc --noEmit && tsc --noEmit -p tsconfig.vite.json",
+    "test:parity": "tsx dev/react-parity/run.ts",
+    "test:parity:dev": "tsx dev/react-parity/dev.ts",
+    "test:parity:list": "vitest run --config e2e/list-parity/vitest.config.ts --browser.headless",
+    "test:parity:list:dev": "vitest dev --config e2e/list-parity/vitest.config.ts",
+    "test:unit": "vitest run --project=unit*",
+    "test:unit:dev": "vitest dev --project=unit*"
+  }
 }