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

package/dist/date.js

@@ -0,0 +1,59 @@
+// src/date.ts
+import {
+  addDays,
+  addMonths,
+  addYears,
+  clampDate,
+  dateFormatter,
+  dateParts,
+  datePattern,
+  daysBetween,
+  daysInMonth,
+  endOfMonth,
+  endOfWeek,
+  firstDayOfWeek,
+  formatDate,
+  formatDateRange,
+  formatDateToParts,
+  isISODate,
+  isSameMonth,
+  isoDate,
+  monthGrid,
+  monthNames,
+  parseDate,
+  startOfMonth,
+  startOfWeek,
+  toISODate,
+  todayDate,
+  weekday,
+  weekdayNames
+} from "@ui-sdk/core/date";
+export {
+  addDays,
+  addMonths,
+  addYears,
+  clampDate,
+  dateFormatter,
+  dateParts,
+  datePattern,
+  daysBetween,
+  daysInMonth,
+  endOfMonth,
+  endOfWeek,
+  firstDayOfWeek,
+  formatDate,
+  formatDateRange,
+  formatDateToParts,
+  isISODate,
+  isSameMonth,
+  isoDate,
+  monthGrid,
+  monthNames,
+  parseDate,
+  startOfMonth,
+  startOfWeek,
+  toISODate,
+  todayDate,
+  weekday,
+  weekdayNames
+};

package/dist/dialog-parts.d.ts

@@ -0,0 +1,259 @@
+import type { ChangeDetails } from "@ui-sdk/core";
+import type { AlertDialogController, dialog as dialogPrimitive, DialogCloseProps, DialogController, DialogDismissAttemptDetails, DialogFinalFocus, DialogInitialFocus, DialogOpenChangeReason, DialogPayloadChangeReason } from "@ui-sdk/core/dialog";
+import { type PropType } from "vue";
+import { type sheetViewport } from "./popup.js";
+import { type PartSlots } from "./use-primitive.js";
+type OpenDetails = ChangeDetails<DialogOpenChangeReason> & {
+    returnValue?: string;
+};
+type PayloadDetails = ChangeDetails<DialogPayloadChangeReason>;
+type CloseAction = NonNullable<DialogCloseProps["action"]>;
+declare function defineDialogParts(primitive: typeof dialogPrimitive, name: string, viewport?: typeof sheetViewport): {
+    Root: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        modal: {
+            type: PropType<boolean | "trap-focus">;
+            default: undefined;
+        };
+        closeOnOutsidePress: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        presentation: PropType<"auto" | "dialog" | "sheet">;
+        open: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        modelValue: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        defaultOpen: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        controller: PropType<DialogController<any, any> | AlertDialogController<any, any>>;
+        dismissible: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        persistentElements: PropType<(Element | string)[] | (() => Element[])>;
+        pendingAnnouncement: StringConstructor;
+        debug: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        container: 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: OpenDetails) => boolean;
+        openChangeComplete: (_open: boolean) => boolean;
+        payloadChange: (_payload: unknown, _details: PayloadDetails) => boolean;
+        dismissAttempt: (_details: DialogDismissAttemptDetails) => boolean;
+    }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        modal: {
+            type: PropType<boolean | "trap-focus">;
+            default: undefined;
+        };
+        closeOnOutsidePress: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        presentation: PropType<"auto" | "dialog" | "sheet">;
+        open: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        modelValue: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        defaultOpen: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        controller: PropType<DialogController<any, any> | AlertDialogController<any, any>>;
+        dismissible: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        persistentElements: PropType<(Element | string)[] | (() => Element[])>;
+        pendingAnnouncement: StringConstructor;
+        debug: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        container: PropType<Element | DocumentFragment | null>;
+    }>> & Readonly<{
+        "onUpdate:modelValue"?: ((_open: boolean) => any) | undefined;
+        "onUpdate:open"?: ((_open: boolean) => any) | undefined;
+        onOpenChange?: ((_open: boolean, _details: OpenDetails) => any) | undefined;
+        onOpenChangeComplete?: ((_open: boolean) => any) | undefined;
+        onPayloadChange?: ((_payload: unknown, _details: PayloadDetails) => any) | undefined;
+        onDismissAttempt?: ((_details: DialogDismissAttemptDetails) => any) | undefined;
+    }>, {
+        open: boolean;
+        debug: boolean;
+        defaultOpen: boolean;
+        modal: boolean | "trap-focus";
+        dismissible: boolean;
+        modelValue: boolean;
+        closeOnOutsidePress: boolean;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    AlertRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        open: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        modelValue: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        defaultOpen: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        controller: PropType<DialogController<any, any> | AlertDialogController<any, any>>;
+        dismissible: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        persistentElements: PropType<(Element | string)[] | (() => Element[])>;
+        pendingAnnouncement: StringConstructor;
+        debug: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        container: 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: OpenDetails) => boolean;
+        openChangeComplete: (_open: boolean) => boolean;
+        payloadChange: (_payload: unknown, _details: PayloadDetails) => boolean;
+        dismissAttempt: (_details: 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: PropType<DialogController<any, any> | AlertDialogController<any, any>>;
+        dismissible: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        persistentElements: PropType<(Element | string)[] | (() => Element[])>;
+        pendingAnnouncement: StringConstructor;
+        debug: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        container: PropType<Element | DocumentFragment | null>;
+    }>> & Readonly<{
+        "onUpdate:modelValue"?: ((_open: boolean) => any) | undefined;
+        "onUpdate:open"?: ((_open: boolean) => any) | undefined;
+        onOpenChange?: ((_open: boolean, _details: OpenDetails) => any) | undefined;
+        onOpenChangeComplete?: ((_open: boolean) => any) | undefined;
+        onPayloadChange?: ((_payload: unknown, _details: PayloadDetails) => any) | undefined;
+        onDismissAttempt?: ((_details: DialogDismissAttemptDetails) => any) | undefined;
+    }>, {
+        open: boolean;
+        debug: boolean;
+        defaultOpen: boolean;
+        dismissible: boolean;
+        modelValue: boolean;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Trigger: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        disabled: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        focusableWhenDisabled: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        payload: PropType<unknown>;
+        shortcut: StringConstructor;
+        controller: PropType<DialogController<any, any> | 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: PropType<unknown>;
+        shortcut: StringConstructor;
+        controller: PropType<DialogController<any, any> | AlertDialogController<any, any>>;
+    }>> & Readonly<{}>, {
+        disabled: boolean;
+        focusableWhenDisabled: boolean;
+    }, PartSlots<import("@ui-sdk/core/dialog").DialogPrimitive, "trigger">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "button">;
+    Backdrop: 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<{}>, {}, PartSlots<import("@ui-sdk/core/dialog").DialogPrimitive, "backdrop">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+    Content: import("./popup.js").PayloadPart<import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        initialFocus: PropType<DialogInitialFocus>;
+        finalFocus: PropType<DialogFinalFocus>;
+        keepMounted: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        container: 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: PropType<DialogInitialFocus>;
+        finalFocus: PropType<DialogFinalFocus>;
+        keepMounted: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        container: PropType<Element | DocumentFragment | null>;
+    }>> & Readonly<{}>, {
+        keepMounted: boolean;
+    }, PartSlots<import("@ui-sdk/core/dialog").DialogPrimitive, "content">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">>;
+    Title: 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">;
+    Description: 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">;
+    Close: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        value: StringConstructor;
+        action: PropType<CloseAction>;
+        onAction: PropType<CloseAction>;
+    }>, (() => 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: PropType<CloseAction>;
+        onAction: PropType<CloseAction>;
+    }>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/dialog").DialogPrimitive, "close">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "button">;
+    Shortcut: 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<{}>, {}, PartSlots<import("@ui-sdk/core/dialog").DialogPrimitive, "shortcut">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "span">;
+};
+export { defineDialogParts };

package/dist/dialog-parts.js

@@ -0,0 +1,300 @@
+// src/dialog-parts.ts
+import {
+  defineComponent,
+  h,
+  inject,
+  onMounted,
+  provide,
+  ref,
+  useId
+} from "vue";
+import { slotContent } from "./children.js";
+import {
+  containerProp,
+  renderPopup,
+  renderUnbound,
+  useConnectedPart,
+  useControllerEntry,
+  useControllerTarget,
+  usePopupContainer,
+  withPayload
+} from "./popup.js";
+import { createParts, withElement } from "./create-parts.js";
+import {
+  optionalBoolean,
+  useHandle,
+  usePart,
+  usePrimitive,
+  useScope
+} from "./use-primitive.js";
+import { renderless } from "./renderless.js";
+var TriggerKey = /* @__PURE__ */ Symbol("dialog-trigger");
+function defineDialogParts(primitive, name, viewport) {
+  const ContainerKey = /* @__PURE__ */ Symbol(
+    `${name}-container`
+  );
+  const parts = createParts(primitive, { title: "h2", description: "p" });
+  const sharedProps = {
+    open: optionalBoolean,
+    modelValue: optionalBoolean,
+    defaultOpen: optionalBoolean,
+    controller: Object,
+    dismissible: optionalBoolean,
+    persistentElements: [Array, Function],
+    pendingAnnouncement: String,
+    debug: optionalBoolean,
+    container: containerProp
+  };
+  const emits = {
+    "update:open": (_open) => true,
+    "update:modelValue": (_open) => true,
+    openChange: (_open, _details) => true,
+    openChangeComplete: (_open) => true,
+    payloadChange: (_payload, _details) => true,
+    dismissAttempt: (_details) => true
+  };
+  const setup = (props, { slots, emit }) => {
+    provide(ContainerKey, () => props.container);
+    const dialog = usePrimitive(primitive, () => ({
+      ...props,
+      container: void 0,
+      open: props.open ?? props.modelValue,
+      onOpenChange: (open, details) => {
+        emit("openChange", open, details);
+        if (details.canceled) {
+          return;
+        }
+        emit("update:open", open);
+        emit("update:modelValue", open);
+      },
+      onOpenChangeComplete: (open) => emit("openChangeComplete", open),
+      onPayloadChange: (payload, details) => emit("payloadChange", payload, details),
+      onDismissAttempt: (details) => emit("dismissAttempt", details)
+    }));
+    useControllerEntry(() => props.controller, dialog);
+    return () => slots.default?.();
+  };
+  const AlertRoot = renderless(
+    defineComponent({
+      name,
+      props: sharedProps,
+      emits,
+      setup: (props, context) => setup(props, context)
+    })
+  );
+  const Root = renderless(
+    defineComponent({
+      name,
+      props: {
+        ...sharedProps,
+        modal: {
+          type: [Boolean, String],
+          default: void 0
+        },
+        closeOnOutsidePress: optionalBoolean,
+        presentation: String
+      },
+      emits,
+      setup: (props, context) => setup(props, context)
+    })
+  );
+  const Trigger = withElement(
+    "button",
+    defineComponent({
+      name: `${name}Trigger`,
+      inheritAttrs: false,
+      props: {
+        disabled: optionalBoolean,
+        focusableWhenDisabled: optionalBoolean,
+        payload: null,
+        // A keyboard shortcut that presses the trigger, like "mod+k".
+        shortcut: String,
+        // Connects a trigger outside the dialog to the dialog with this controller.
+        controller: Object
+      },
+      slots: Object,
+      setup(props, { slots, attrs }) {
+        const connected = useControllerTarget(primitive, () => props.controller);
+        provide(TriggerKey, {
+          shortcut: () => props.shortcut,
+          dialog: connected
+        });
+        const id = useId();
+        const part = () => ({
+          id,
+          disabled: props.disabled,
+          focusableWhenDisabled: props.focusableWhenDisabled,
+          payload: props.payload,
+          shortcut: props.shortcut
+        });
+        return useConnectedPart(
+          connected,
+          (dialog) => usePart(dialog, "trigger", part, void 0, "button"),
+          // Until the dialog it names mounts, a trigger outside the dialog is a plain button.
+          () => renderUnbound(
+            "button",
+            {
+              type: "button",
+              disabled: props.disabled && !props.focusableWhenDisabled,
+              "aria-disabled": props.disabled && props.focusableWhenDisabled || void 0,
+              ...attrs
+            },
+            { slots, state: { open: false, disabled: !!props.disabled } }
+          )
+        );
+      }
+    })
+  );
+  const Backdrop = withElement(
+    "div",
+    defineComponent({
+      name: `${name}Backdrop`,
+      inheritAttrs: false,
+      slots: Object,
+      setup() {
+        const dialog = useHandle(primitive);
+        const fromRoot = inject(ContainerKey, () => void 0);
+        const backdropTarget = usePopupContainer(fromRoot);
+        const part = usePart(dialog, "backdrop");
+        return () => {
+          const element = part();
+          return element && renderPopup(element, backdropTarget());
+        };
+      }
+    })
+  );
+  const Content = withPayload(
+    withElement(
+      "div",
+      defineComponent({
+        name: `${name}Content`,
+        inheritAttrs: false,
+        props: {
+          initialFocus: [
+            String,
+            Object,
+            Function
+          ],
+          finalFocus: [String, Object, Function],
+          keepMounted: optionalBoolean,
+          // Renders the popup into this element instead of in place.
+          container: containerProp
+        },
+        slots: Object,
+        setup(props) {
+          const dialog = useHandle(primitive);
+          const fromRoot = inject(ContainerKey, () => void 0);
+          const target = usePopupContainer(() => props.container ?? fromRoot());
+          const content = () => ({
+            initialFocus: props.initialFocus,
+            finalFocus: props.finalFocus,
+            keepMounted: props.keepMounted
+          });
+          const part = usePart(dialog, "content", content);
+          return () => {
+            const element = part();
+            if (!element) {
+              return null;
+            }
+            return renderPopup(
+              viewport ? viewport(dialog, element) : element,
+              target()
+            );
+          };
+        }
+      })
+    )
+  );
+  const Close = withElement(
+    "button",
+    defineComponent({
+      name: `${name}Close`,
+      inheritAttrs: false,
+      props: {
+        // Reported as `returnValue` when this closes the dialog.
+        value: String,
+        // Runs before the dialog closes. A returned Promise keeps it open and pending until it settles.
+        action: Function,
+        // `@action="save"` binds here, so the part gets the handler's Promise.
+        onAction: Function
+      },
+      slots: Object,
+      setup(props) {
+        const id = useId();
+        const part = () => ({
+          id,
+          value: props.value,
+          action: props.action ?? props.onAction
+        });
+        return usePart(useHandle(primitive), "close", part, void 0, "button");
+      }
+    })
+  );
+  const ShortcutBinding = defineComponent({
+    name: `${name}ShortcutBinding`,
+    inheritAttrs: false,
+    props: {
+      dialog: { type: Object, required: true },
+      shortcut: String
+    },
+    setup(props, { slots }) {
+      return usePart(
+        props.dialog,
+        "shortcut",
+        () => ({ shortcut: props.shortcut }),
+        void 0,
+        {
+          tag: "span",
+          children: (state) => slotContent(slots.default, { state }) ?? state.text
+        }
+      );
+    }
+  });
+  const Shortcut = withElement(
+    "span",
+    defineComponent({
+      name: `${name}Shortcut`,
+      inheritAttrs: false,
+      props: {
+        // The keys to show. Inside a trigger, its shortcut.
+        shortcut: String
+      },
+      slots: Object,
+      setup(props, { slots, attrs }) {
+        const context = useScope(primitive)?.handle;
+        const trigger = inject(TriggerKey, null);
+        if (!context && !trigger) {
+          throw new Error(`${name} parts must be used inside <${name}>.`);
+        }
+        const mounted = ref(!!context);
+        onMounted(() => mounted.value = true);
+        return () => {
+          const dialog = context ?? (mounted.value ? trigger?.dialog() : void 0);
+          if (!dialog) {
+            return null;
+          }
+          const shortcut = props.shortcut ?? trigger?.shortcut();
+          return h(
+            ShortcutBinding,
+            { ...attrs, key: dialog.instance.id, dialog, shortcut },
+            slots
+          );
+        };
+      }
+    })
+  );
+  return {
+    Root,
+    AlertRoot,
+    Trigger,
+    Backdrop,
+    Content,
+    Title: parts.Title,
+    Description: parts.Description,
+    Close,
+    Shortcut
+  };
+}
+export {
+  defineDialogParts
+};