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

package/dist/types/list/types.d.ts

@@ -0,0 +1,112 @@
+import { ListAsyncDataLoader, ListData, ListDataLoaderOptions, ListDataLoaderResult, ListFilterShape, ListSearchShape, ListSettingsPort, ListSortingShape, ListViewModeValue, PropertyName } from '../_bundled/flow-components-base/index';
+import { MaybeRefOrGetter, VNodeChild } from 'vue';
+/** What a filter's value renders to here. */
+export type ListRendered = VNodeChild;
+export type VueListFilterShape<T> = ListFilterShape<T, PropertyName<T>, never, ListRendered> & {
+    /** Only for `mode: "dateRange"` — handed to the calendar. */
+    dateRangeOptions?: Record<string, unknown>;
+};
+/**
+ * A loader written as a composable.
+ *
+ * The counterpart of React's `ListLoaderHooks`, which is called during render
+ * and may therefore use hooks. A composable has the same requirement and a
+ * stricter one: it runs in `setup()`, once. So it is handed the query as a
+ * **getter** rather than as a value — reading it inside a `computed`, a `watch`
+ * or a query library's key subscribes to it, and a changed filter, sorting or
+ * search reaches the loader without it being called again.
+ *
+ * What it returns may be a plain result, a ref or a getter; `undefined` means
+ * "not there yet" and leaves the batch loading.
+ */
+export type ListComposableDataLoader<T> = (options: () => ListDataLoaderOptions<T>) => MaybeRefOrGetter<ListDataLoaderResult<T> | undefined>;
+export interface ListDataSourceShape<T> {
+    /** All the data, already loaded. Paged, filtered and sorted by the table. */
+    staticData?: ListData<T>;
+    /** Loads one batch. What it is asked for depends on the three flags below. */
+    asyncLoader?: ListAsyncDataLoader<T>;
+    /**
+     * What the async loader reads besides the query — a route parameter, a
+     * selected project. A change loads every batch again, like React's
+     * `dependencies`.
+     */
+    dependencies?: readonly unknown[];
+    /** Loads one batch with composables. One source per list: this or the above. */
+    composableLoader?: ListComposableDataLoader<T>;
+    manualPagination?: boolean;
+    manualFiltering?: boolean;
+    manualSorting?: boolean;
+}
+export interface ListItemViewShape<T> {
+    render?: (data: T) => VNodeChild;
+    textValue?: (data: T) => string;
+    href?: (data: T) => string;
+    target?: string;
+    /** Whether this item starts expanded. Only read in accordion mode. */
+    defaultExpanded?: (data: T) => boolean;
+    showList?: boolean;
+    showTiles?: boolean;
+    tileMaxWidth?: number;
+}
+export interface ListTableCellShape<T> {
+    render?: (data: T) => VNodeChild;
+    props: Record<string, unknown>;
+}
+export interface ListTableColumnShape {
+    props: Record<string, unknown>;
+    /** The column's label, rendered as the element's children. */
+    render?: () => VNodeChild;
+}
+export interface ListTableShape<T> {
+    props: Record<string, unknown>;
+    headerProps: Record<string, unknown>;
+    bodyProps: Record<string, unknown>;
+    rowProps: Record<string, unknown>;
+    columns: ListTableColumnShape[];
+    cells: ListTableCellShape<T>[];
+}
+/**
+ * What the list hands straight to the grid list and the table.
+ *
+ * Selection is theirs, not the list's: the host's `ItemsGridList` and `Table`
+ * own the keys, the keyboard and the checkboxes, and Flow's React list does
+ * nothing with these either — it spreads them through.
+ */
+export interface ListSelectionProps {
+    selectionMode?: "none" | "single" | "multiple";
+    /** Whether selecting replaces the selection or adds to it. */
+    selectionBehavior?: "toggle" | "replace";
+    selectedKeys?: "all" | readonly (string | number)[];
+    defaultSelectedKeys?: "all" | readonly (string | number)[];
+    disabledKeys?: readonly (string | number)[];
+    disallowEmptySelection?: boolean;
+    onSelectionChange?: (keys: unknown) => void;
+}
+export interface VueListShape<T> extends ListDataSourceShape<T> {
+    /** Passed on to the grid list and the table, untouched. */
+    componentProps?: ListSelectionProps;
+    /**
+     * Makes the items expandable. What they expand to is the item's `Content
+     * slot="bottom"`.
+     */
+    accordion?: boolean;
+    /** The table view mode. Without columns there is no table to switch to. */
+    table?: ListTableShape<T>;
+    /** Where the view settings are persisted. Without it, nothing is. */
+    settings?: ListSettingsPort;
+    filters?: VueListFilterShape<T>[];
+    sorting?: ListSortingShape<T>[];
+    /** Plus React's `ListSearch` field props: `autoSubmit`, `autoFocus`. */
+    search?: ListSearchShape & {
+        autoSubmit?: boolean;
+        autoFocus?: boolean;
+    };
+    itemView?: ListItemViewShape<T>;
+    batchSize?: number;
+    loadingItemsCount?: number;
+    getItemId?: (data: T) => string;
+    defaultViewMode?: ListViewModeValue;
+    onAction?: (data: T) => void;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+}

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

@@ -0,0 +1,80 @@
+import { OverlayCloseHandler, OverlayController, OverlayOpenHandler, OverlayOpenStateHandler } from './overlayController';
+import { PropType, VNode } from 'vue';
+export declare const LightBox: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** Whether content may exceed the available screen space. @default true */
+    fitScreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** A controller to open and close the light box from anywhere. */
+    controller: {
+        type: PropType<OverlayController>;
+        default: undefined;
+    };
+    /** Whether a click outside closes the light box. @default true */
+    isDismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Whether the light box is open. Use it to control its state. */
+    isOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    onOpen: {
+        type: PropType<OverlayOpenHandler>;
+        default: undefined;
+    };
+    onClose: {
+        type: PropType<OverlayCloseHandler>;
+        default: undefined;
+    };
+    onOpenChange: {
+        type: PropType<OverlayOpenStateHandler>;
+        default: undefined;
+    };
+}>, () => VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** Whether content may exceed the available screen space. @default true */
+    fitScreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** A controller to open and close the light box from anywhere. */
+    controller: {
+        type: PropType<OverlayController>;
+        default: undefined;
+    };
+    /** Whether a click outside closes the light box. @default true */
+    isDismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Whether the light box is open. Use it to control its state. */
+    isOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    onOpen: {
+        type: PropType<OverlayOpenHandler>;
+        default: undefined;
+    };
+    onClose: {
+        type: PropType<OverlayCloseHandler>;
+        default: undefined;
+    };
+    onOpenChange: {
+        type: PropType<OverlayOpenStateHandler>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    onClose: OverlayCloseHandler;
+    isOpen: boolean;
+    onOpenChange: OverlayOpenStateHandler;
+    controller: OverlayController;
+    isDismissable: boolean;
+    onOpen: OverlayOpenHandler;
+    fitScreen: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default LightBox;

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

@@ -0,0 +1,166 @@
+import { OverlayCloseHandler, OverlayController, OverlayOpenHandler, OverlayOpenStateHandler } from './overlayController';
+import { PropType, VNode } from 'vue';
+export type ModalSize = "s" | "m" | "l";
+export declare const Modal: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** The size of the modal. @default "s" */
+    size: {
+        type: PropType<ModalSize>;
+        default: string;
+    };
+    /** Whether the modal is displayed as an off canvas. */
+    offCanvas: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Which side the off canvas comes from. @default "right" */
+    offCanvasOrientation: {
+        type: PropType<"left" | "right">;
+        default: string;
+    };
+    /** Whether a click outside closes the modal. @default true */
+    isDismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether the close button is always visible (`true`) or always hidden
+     * (`false`). By default Flow decides by screen size.
+     */
+    showCloseButton: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /**
+     * Whether closing the modal has to be confirmed — use it to protect unsaved
+     * changes.
+     */
+    confirmOnClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** A controller to open and close the modal from anywhere. */
+    controller: {
+        type: PropType<OverlayController>;
+        default: undefined;
+    };
+    /** Whether the modal is open. Use it to control the modal state. */
+    isOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /**
+     * Whether the modal is open initially, when it has a controller of its own
+     * — not one from a trigger or the `controller` prop. @default false
+     */
+    isDefaultOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /** Called when the modal opens. Returning `false` keeps it closed. */
+    onOpen: {
+        type: PropType<OverlayOpenHandler>;
+        default: undefined;
+    };
+    /** Called when the modal closes. Returning `false` keeps it open. */
+    onClose: {
+        type: PropType<OverlayCloseHandler>;
+        default: undefined;
+    };
+    /**
+     * Called with the new state whenever the modal opens or closes. Returning
+     * `false` aborts the change.
+     */
+    onOpenChange: {
+        type: PropType<OverlayOpenStateHandler>;
+        default: undefined;
+    };
+}>, () => VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** The size of the modal. @default "s" */
+    size: {
+        type: PropType<ModalSize>;
+        default: string;
+    };
+    /** Whether the modal is displayed as an off canvas. */
+    offCanvas: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Which side the off canvas comes from. @default "right" */
+    offCanvasOrientation: {
+        type: PropType<"left" | "right">;
+        default: string;
+    };
+    /** Whether a click outside closes the modal. @default true */
+    isDismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether the close button is always visible (`true`) or always hidden
+     * (`false`). By default Flow decides by screen size.
+     */
+    showCloseButton: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /**
+     * Whether closing the modal has to be confirmed — use it to protect unsaved
+     * changes.
+     */
+    confirmOnClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** A controller to open and close the modal from anywhere. */
+    controller: {
+        type: PropType<OverlayController>;
+        default: undefined;
+    };
+    /** Whether the modal is open. Use it to control the modal state. */
+    isOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /**
+     * Whether the modal is open initially, when it has a controller of its own
+     * — not one from a trigger or the `controller` prop. @default false
+     */
+    isDefaultOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /** Called when the modal opens. Returning `false` keeps it closed. */
+    onOpen: {
+        type: PropType<OverlayOpenHandler>;
+        default: undefined;
+    };
+    /** Called when the modal closes. Returning `false` keeps it open. */
+    onClose: {
+        type: PropType<OverlayCloseHandler>;
+        default: undefined;
+    };
+    /**
+     * Called with the new state whenever the modal opens or closes. Returning
+     * `false` aborts the change.
+     */
+    onOpenChange: {
+        type: PropType<OverlayOpenStateHandler>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    size: ModalSize;
+    onClose: OverlayCloseHandler;
+    isOpen: boolean;
+    onOpenChange: OverlayOpenStateHandler;
+    controller: OverlayController;
+    isDefaultOpen: boolean;
+    isDismissable: boolean;
+    confirmOnClose: boolean;
+    offCanvas: boolean;
+    offCanvasOrientation: "left" | "right";
+    showCloseButton: boolean;
+    onOpen: OverlayOpenHandler;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default Modal;

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

@@ -0,0 +1,104 @@
+import { OverlayController } from './overlayController';
+import { PropType } from 'vue';
+export declare const Popover: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** Whether the popover shows a tip pointing at its trigger. */
+    withTip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Whether the popover holds a dialog. */
+    isDialogContent: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /** A fixed width. */
+    width: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    /** A controller to open and close the popover from anywhere. */
+    controller: {
+        type: PropType<OverlayController>;
+        default: undefined;
+    };
+    /**
+     * Whether the popover is open. Use it to control its state — then
+     * `onOpenChange` must update the state this value comes from.
+     */
+    isOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /**
+     * Whether the popover is open initially, when it has a controller of its
+     * own. @default false
+     */
+    isDefaultOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /**
+     * Called with the new state whenever the popover opens or closes. It only
+     * reports the change; it never performs or suppresses it.
+     */
+    onOpenChange: {
+        type: PropType<(isOpen: boolean) => void>;
+        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<{
+    /** Whether the popover shows a tip pointing at its trigger. */
+    withTip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Whether the popover holds a dialog. */
+    isDialogContent: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /** A fixed width. */
+    width: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    /** A controller to open and close the popover from anywhere. */
+    controller: {
+        type: PropType<OverlayController>;
+        default: undefined;
+    };
+    /**
+     * Whether the popover is open. Use it to control its state — then
+     * `onOpenChange` must update the state this value comes from.
+     */
+    isOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /**
+     * Whether the popover is open initially, when it has a controller of its
+     * own. @default false
+     */
+    isDefaultOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /**
+     * Called with the new state whenever the popover opens or closes. It only
+     * reports the change; it never performs or suppresses it.
+     */
+    onOpenChange: {
+        type: PropType<(isOpen: boolean) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    width: string | number;
+    withTip: boolean;
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    isDialogContent: boolean;
+    controller: OverlayController;
+    isDefaultOpen: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default Popover;

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

@@ -0,0 +1,86 @@
+import { VNode } from 'vue';
+import { AnyRecord } from '../lib/types';
+declare class DynamicProp {
+    readonly value: unknown;
+    constructor(value: unknown);
+}
+/**
+ * A prop that wins over the child's own, and a handler that runs after the
+ * child's — what `dynamic()` does in Flow's props context. The value is usually
+ * derived from the child's props (`Modal`'s `closeModal` rule).
+ */
+export declare const dynamic: (value: unknown) => DynamicProp;
+/**
+ * Merges props into a child the way Flow's props context merges them: the
+ * child's own value wins unless the rule is `dynamic`, classes are joined, and
+ * handlers are chained — the context's, the child's, then the dynamic ones.
+ *
+ * `cloneVNode` alone merges the other way round (the added props win), so the
+ * props are rebuilt here. A template may write a key kebab-case; both spellings
+ * count as the child's own.
+ */
+export declare const withContextProps: (child: VNode, contextProps: AnyRecord) => VNode;
+/**
+ * Vue's stand-in for Flow's `PropsContext`.
+ *
+ * Flow configures the components inside a composite — the `Heading` of a
+ * `Modal`, the `Button` of an `Action` — through a React context every
+ * `flowComponent` reads. There is no such context on the Vue side, so the
+ * composite reaches its children directly, merging the way the context does
+ * (`withContextProps`).
+ *
+ * The difference that matters: this only reaches the children the composite was
+ * handed, not arbitrary descendants. A `Heading` nested one component deeper
+ * than the composite expects is left alone.
+ */
+export declare const mapChildren: (children: VNode[] | undefined, decide: (child: VNode) => AnyRecord | undefined) => VNode[];
+/**
+ * Slots hand back fragments wherever the author wrote a list or a `v-for`, and
+ * comments wherever a `v-if` did not match. Both have to be seen through, or a
+ * composite's rules miss every child inside them. A render function may also
+ * hand back `null`, a boolean, a nested array or a bare string, which Vue
+ * normalizes only later.
+ */
+export declare const flattenChildren: (children: unknown) => VNode[];
+/** Whether a node renders text rather than a component. */
+export declare const isTextChild: (child: VNode) => boolean;
+/**
+ * The default slot of a node, whatever form its children took.
+ *
+ * A template and `h(X, null, () => …)` hand a component a slot object.
+ * `vue/jsx-runtime` and `h(X, null, [ … ])` hand it a string or an array, which
+ * Vue turns into a default slot only when the component mounts — as it does a
+ * slot object whose `default` is a value rather than a function.
+ */
+export declare const defaultSlotOf: (children: unknown) => ((...args: unknown[]) => unknown) | undefined;
+/**
+ * Rebuilds a child around new default-slot content.
+ *
+ * This replaces what a child was handed outright — which is what a composite
+ * needs when it does not configure a child but _wraps_ it. Flow's `Modal` does
+ * exactly that to its heading: the title goes into a container and the close
+ * button is appended beside it.
+ *
+ * Rebuilt rather than cloned: `cloneVNode` merges props and leaves children
+ * alone. The slot is called raw, the way the vnode carries it, and Vue only
+ * normalizes a slot's result when the component itself reads it — so the result
+ * goes through `flattenChildren`: a slot written `() => h(X)` hands back one
+ * vnode, not a list.
+ */
+export declare const withSlotContent: (node: VNode, build: (rendered: VNode[]) => VNode[]) => VNode;
+/**
+ * What a composite writes for one kind of child: the props it merges in, and
+ * the rules for what that child renders — Flow's nested props context entries
+ * (`Content: { Heading: { level: 3 } }`).
+ */
+export interface ChildRule {
+    props?: AnyRecord;
+    children?: ChildRules;
+}
+export type ChildRules = (child: VNode) => ChildRule | undefined;
+/**
+ * Applies nested rules, each level to the children of the one above — as far
+ * down as the rules go, where `mapChildren` reaches one level.
+ */
+export declare const applyChildRules: (children: VNode[] | undefined, rules: ChildRules) => VNode[];
+export {};

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

@@ -0,0 +1,43 @@
+import { OverlayController, OverlayType } from './overlayController';
+import { PropType } from 'vue';
+/**
+ * Builds `ModalTrigger`, `PopoverTrigger` and `LightBoxTrigger`.
+ *
+ * In Flow all three are the same component with a different overlay type — a
+ * `DialogTrigger` around a trigger element and an overlay, with a props context
+ * that gives the trigger's `Button` its `onPress`. Here that is merged into the
+ * `Button` directly.
+ *
+ * `reportsUsage`: whether Flow's React trigger is a `flowComponent`, which
+ * reports itself.
+ */
+export declare const createOverlayTrigger: (name: string, overlayType: OverlayType, { reportsUsage }: {
+    reportsUsage: boolean;
+}) => import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** Whether the overlay starts open. */
+    isDefaultOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** A controller to open and close the overlay from anywhere. */
+    controller: {
+        type: PropType<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<{
+    /** Whether the overlay starts open. */
+    isDefaultOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** A controller to open and close the overlay from anywhere. */
+    controller: {
+        type: PropType<OverlayController>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    controller: OverlayController;
+    isDefaultOpen: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,27 @@
+/**
+ * `Modal confirmOnClose`, from
+ * `packages/components/src/components/Modal/locales/*.locale.json`. `close`
+ * also labels the modal's own close button, as Flow's `close` key does.
+ */
+export declare const confirmCloseTexts: {
+    "en-US": {
+        heading: string;
+        text: string;
+        close: string;
+        keepOpen: string;
+    };
+    "de-DE": {
+        heading: string;
+        text: string;
+        close: string;
+        keepOpen: string;
+    };
+};
+/**
+ * The `LightBox` close button's label, from
+ * `packages/components/src/components/LightBox/locales/*.locale.json`.
+ */
+export declare const lightBoxCloseTexts: {
+    "de-DE": string;
+    "en-US": string;
+};