@ui-sdk/vue 0.0.0-stage → 0.1.0-beta.1

package/dist/alert-dialog.d.ts

@@ -0,0 +1,231 @@
+/**
+ * A modal dialog that interrupts the user with something important and waits for an answer.
+ * It takes none of the props only Dialog has, like `modal`.
+ * @stable
+ */
+declare const AlertDialog: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    controller: import("vue").PropType<import("@ui-sdk/core/dialog").DialogController<any, any> | import("@ui-sdk/core/dialog").AlertDialogController<any, any>>;
+    dismissible: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    persistentElements: import("vue").PropType<(Element | string)[] | (() => Element[])>;
+    pendingAnnouncement: StringConstructor;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    container: import("vue").PropType<Element | DocumentFragment | null>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (_open: boolean) => boolean;
+    "update:modelValue": (_open: boolean) => boolean;
+    openChange: (_open: boolean, _details: import("@ui-sdk/core").ChangeDetails<import("@ui-sdk/core/dialog").DialogOpenChangeReason> & {
+        returnValue?: string;
+    }) => boolean;
+    openChangeComplete: (_open: boolean) => boolean;
+    payloadChange: (_payload: unknown, _details: {
+        reason: "trigger-press";
+        event?: MouseEvent | KeyboardEvent | TouchEvent | undefined;
+        source: import("@ui-sdk/core").ChangeSource;
+        cancel: () => void;
+        readonly canceled: boolean;
+    } | {
+        reason: "imperative";
+        event?: undefined;
+        source: import("@ui-sdk/core").ChangeSource;
+        cancel: () => void;
+        readonly canceled: boolean;
+    } | {
+        reason: "shortcut";
+        event?: KeyboardEvent | undefined;
+        source: import("@ui-sdk/core").ChangeSource;
+        cancel: () => void;
+        readonly canceled: boolean;
+    }) => boolean;
+    dismissAttempt: (_details: import("@ui-sdk/core/dialog").DialogDismissAttemptDetails) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    controller: import("vue").PropType<import("@ui-sdk/core/dialog").DialogController<any, any> | import("@ui-sdk/core/dialog").AlertDialogController<any, any>>;
+    dismissible: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    persistentElements: import("vue").PropType<(Element | string)[] | (() => Element[])>;
+    pendingAnnouncement: StringConstructor;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    container: import("vue").PropType<Element | DocumentFragment | null>;
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_open: boolean) => any) | undefined;
+    "onUpdate:open"?: ((_open: boolean) => any) | undefined;
+    onOpenChange?: ((_open: boolean, _details: import("@ui-sdk/core").ChangeDetails<import("@ui-sdk/core/dialog").DialogOpenChangeReason> & {
+        returnValue?: string;
+    }) => any) | undefined;
+    onOpenChangeComplete?: ((_open: boolean) => any) | undefined;
+    onPayloadChange?: ((_payload: unknown, _details: {
+        reason: "trigger-press";
+        event?: MouseEvent | KeyboardEvent | TouchEvent | undefined;
+        source: import("@ui-sdk/core").ChangeSource;
+        cancel: () => void;
+        readonly canceled: boolean;
+    } | {
+        reason: "imperative";
+        event?: undefined;
+        source: import("@ui-sdk/core").ChangeSource;
+        cancel: () => void;
+        readonly canceled: boolean;
+    } | {
+        reason: "shortcut";
+        event?: KeyboardEvent | undefined;
+        source: import("@ui-sdk/core").ChangeSource;
+        cancel: () => void;
+        readonly canceled: boolean;
+    }) => any) | undefined;
+    onDismissAttempt?: ((_details: import("@ui-sdk/core/dialog").DialogDismissAttemptDetails) => any) | undefined;
+}>, {
+    open: boolean;
+    debug: boolean;
+    defaultOpen: boolean;
+    dismissible: boolean;
+    modelValue: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * The button that opens the alert dialog. A trigger outside the alert dialog connects through `controller`.
+ * @stable
+ */
+declare const AlertDialogTrigger: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    focusableWhenDisabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    payload: import("vue").PropType<unknown>;
+    shortcut: StringConstructor;
+    controller: import("vue").PropType<import("@ui-sdk/core/dialog").DialogController<any, any> | import("@ui-sdk/core/dialog").AlertDialogController<any, any>>;
+}>, () => unknown, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    focusableWhenDisabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    payload: import("vue").PropType<unknown>;
+    shortcut: StringConstructor;
+    controller: import("vue").PropType<import("@ui-sdk/core/dialog").DialogController<any, any> | import("@ui-sdk/core/dialog").AlertDialogController<any, any>>;
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    focusableWhenDisabled: boolean;
+}, import("./use-primitive.js").PartSlots<import("@ui-sdk/core/dialog").DialogPrimitive, "trigger">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "button">;
+/**
+ * A dim behind the alert dialog. Pressing it does nothing.
+ * @stable
+ */
+declare const AlertDialogBackdrop: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, import("./use-primitive.js").PartSlots<import("@ui-sdk/core/dialog").DialogPrimitive, "backdrop">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * The alert dialog itself, with the `alertdialog` role, named by its title. Put the title, the description
+ * and the buttons that answer it inside.
+ * @stable
+ */
+declare const AlertDialogContent: import("./popup.js").PayloadPart<import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    initialFocus: import("vue").PropType<import("@ui-sdk/core/dialog").DialogInitialFocus>;
+    finalFocus: import("vue").PropType<import("@ui-sdk/core/dialog").DialogFinalFocus>;
+    keepMounted: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    container: import("vue").PropType<Element | DocumentFragment | null>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    initialFocus: import("vue").PropType<import("@ui-sdk/core/dialog").DialogInitialFocus>;
+    finalFocus: import("vue").PropType<import("@ui-sdk/core/dialog").DialogFinalFocus>;
+    keepMounted: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    container: import("vue").PropType<Element | DocumentFragment | null>;
+}>> & Readonly<{}>, {
+    keepMounted: boolean;
+}, import("./use-primitive.js").PartSlots<import("@ui-sdk/core/dialog").DialogPrimitive, "content">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">>;
+/**
+ * The alert dialog's title, which names it. A level 2 heading by default.
+ * @stable
+ */
+declare const AlertDialogTitle: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, "h2">;
+/**
+ * Describes the alert dialog while it's rendered. A paragraph by default.
+ * @stable
+ */
+declare const AlertDialogDescription: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, "p">;
+/**
+ * A button that closes the alert dialog, like Cancel or Delete. An `action` runs first, and a Promise it
+ * returns keeps the alert dialog open until it settles.
+ * @stable
+ */
+declare const AlertDialogClose: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: StringConstructor;
+    action: import("vue").PropType<(event: Event | undefined, details: import("@ui-sdk/core").ActionDetails) => unknown>;
+    onAction: import("vue").PropType<(event: Event | undefined, details: import("@ui-sdk/core").ActionDetails) => unknown>;
+}>, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/dialog").DialogCloseState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: StringConstructor;
+    action: import("vue").PropType<(event: Event | undefined, details: import("@ui-sdk/core").ActionDetails) => unknown>;
+    onAction: import("vue").PropType<(event: Event | undefined, details: import("@ui-sdk/core").ActionDetails) => unknown>;
+}>> & Readonly<{}>, {}, import("./use-primitive.js").PartSlots<import("@ui-sdk/core/dialog").DialogPrimitive, "close">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "button">;
+/**
+ * Shows a trigger's shortcut inside the trigger.
+ * @stable
+ */
+declare const AlertDialogShortcut: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    shortcut: StringConstructor;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    shortcut: StringConstructor;
+}>> & Readonly<{}>, {}, import("./use-primitive.js").PartSlots<import("@ui-sdk/core/dialog").DialogPrimitive, "shortcut">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "span">;
+export { confirm, createAlertDialogController, createConfirm, } from "@ui-sdk/core/alert-dialog";
+export type { AlertDialogBackdropState, AlertDialogCloseActionDetails, AlertDialogCloseProps, AlertDialogCloseState, AlertDialogContentProps, AlertDialogContentState, AlertDialogController, AlertDialogOpenChangeReason, AlertDialogOptions, AlertDialogPayloadChangeReason, AlertDialogPrimitive, AlertDialogShortcutProps, AlertDialogShortcutState, AlertDialogTriggerProps, AlertDialogTriggerState, ConfirmEntry, ConfirmOptions, } from "@ui-sdk/core/alert-dialog";
+export { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogShortcut, AlertDialogTitle, AlertDialogTrigger, };

package/dist/alert-dialog.js

@@ -0,0 +1,33 @@
+// src/alert-dialog.ts
+import { alertDialog as alertDialogPrimitive } from "@ui-sdk/core/alert-dialog";
+import { defineDialogParts } from "./dialog-parts.js";
+import {
+  confirm,
+  createAlertDialogController,
+  createConfirm
+} from "@ui-sdk/core/alert-dialog";
+var alertParts = defineDialogParts(
+  alertDialogPrimitive,
+  "AlertDialog"
+);
+var AlertDialog = alertParts.AlertRoot;
+var AlertDialogTrigger = alertParts.Trigger;
+var AlertDialogBackdrop = alertParts.Backdrop;
+var AlertDialogContent = alertParts.Content;
+var AlertDialogTitle = alertParts.Title;
+var AlertDialogDescription = alertParts.Description;
+var AlertDialogClose = alertParts.Close;
+var AlertDialogShortcut = alertParts.Shortcut;
+export {
+  AlertDialog,
+  AlertDialogBackdrop,
+  AlertDialogClose,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogShortcut,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  confirm,
+  createAlertDialogController,
+  createConfirm
+};

package/dist/async-options.d.ts

@@ -0,0 +1,18 @@
+import { type AsyncOptionsContext, type AsyncOptionsOptions, type AsyncOptionsState } from "@ui-sdk/core/async-options";
+/**
+ * Options loaded for what the user types, latest first. Returns reactive state
+ * and `setQuery`, for a combobox with `:filter="false"`.
+ * @stable
+ */
+declare function useAsyncOptions<Item>(load: (query: string, context: AsyncOptionsContext) => Promise<Item[] | {
+    items: Item[];
+    hasMore?: boolean;
+}>, options?: AsyncOptionsOptions): {
+    state: import("vue").ShallowRef<AsyncOptionsState<Item>, AsyncOptionsState<Item>>;
+    setQuery: (next: string) => void;
+    reload: () => void;
+    loadMore: () => void;
+};
+export { createAsyncOptions } from "@ui-sdk/core/async-options";
+export type { AsyncOptions, AsyncOptionsContext, AsyncOptionsOptions, AsyncOptionsState, AsyncOptionsStatus, } from "@ui-sdk/core/async-options";
+export { useAsyncOptions };

package/dist/async-options.js

@@ -0,0 +1,40 @@
+// src/async-options.ts
+import {
+  createAsyncOptions
+} from "@ui-sdk/core/async-options";
+import { getCurrentInstance, onMounted, onScopeDispose, shallowRef } from "vue";
+import { createAsyncOptions as createAsyncOptions2 } from "@ui-sdk/core/async-options";
+function useAsyncOptions(load, options) {
+  const helper = createAsyncOptions(load, {
+    ...options,
+    immediate: false
+  });
+  const immediate = !!options?.immediate;
+  const initial = helper.getState();
+  const state = shallowRef(
+    immediate ? { ...initial, status: "loading" } : initial
+  );
+  onScopeDispose(helper.subscribe(() => state.value = helper.getState()));
+  const start = () => {
+    if (immediate && helper.getState() === initial) {
+      helper.reload();
+    }
+  };
+  const instance = getCurrentInstance();
+  if (instance && !instance.isMounted) {
+    onMounted(start);
+  } else if (typeof document !== "undefined") {
+    start();
+  }
+  onScopeDispose(() => helper.cancel());
+  return {
+    state,
+    setQuery: helper.setQuery,
+    reload: helper.reload,
+    loadMore: helper.loadMore
+  };
+}
+export {
+  createAsyncOptions2 as createAsyncOptions,
+  useAsyncOptions
+};