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

package/dist/drawer.js

@@ -0,0 +1,373 @@
+// src/drawer.ts
+import {
+  drawer as drawerPrimitive
+} from "@ui-sdk/core/drawer";
+import {
+  defineComponent,
+  h,
+  inject,
+  onMounted,
+  provide,
+  ref,
+  useId
+} from "vue";
+import { slotContent } from "./children.js";
+import {
+  containerProp,
+  renderPopup,
+  renderUnbound,
+  sheetViewport,
+  useConnectedPart,
+  useControllerEntry,
+  useControllerTarget,
+  usePopupContainer,
+  withPayload
+} from "./popup.js";
+import { createParts, withElement } from "./create-parts.js";
+import {
+  optionalBoolean,
+  orModel,
+  useHandle,
+  usePart,
+  usePrimitive,
+  useScope
+} from "./use-primitive.js";
+import { renderless } from "./renderless.js";
+import { createDrawerController, sheetPhysics } from "@ui-sdk/core/drawer";
+var ContainerKey = /* @__PURE__ */ Symbol("Drawer-container");
+var TriggerKey = /* @__PURE__ */ Symbol("drawer-trigger");
+var useDrawer = () => useHandle(drawerPrimitive);
+var parts = createParts(drawerPrimitive, {
+  handle: "button",
+  title: "h2",
+  description: "p"
+});
+var snapPointProp = {
+  type: [Number, String],
+  default: void 0
+};
+var Drawer = /* @__PURE__ */ renderless(
+  defineComponent({
+    name: "Drawer",
+    props: {
+      open: optionalBoolean,
+      modelValue: optionalBoolean,
+      defaultOpen: optionalBoolean,
+      modal: {
+        type: [Boolean, String],
+        default: void 0
+      },
+      closeOnOutsidePress: optionalBoolean,
+      controller: Object,
+      dismissible: optionalBoolean,
+      persistentElements: [Array, Function],
+      pendingAnnouncement: String,
+      debug: optionalBoolean,
+      container: containerProp,
+      snapPoints: Array,
+      snapPoint: snapPointProp,
+      defaultSnapPoint: {
+        type: [Number, String],
+        default: void 0
+      },
+      side: String,
+      modalAbove: {
+        type: [Number, String],
+        default: void 0
+      },
+      driver: String,
+      expandOnScroll: optionalBoolean,
+      physics: Object,
+      themeColor: optionalBoolean,
+      preventEdgeSwipe: optionalBoolean
+    },
+    emits: {
+      "update:open": (_open) => true,
+      "update:modelValue": (_open) => true,
+      openChange: (_open, _details) => true,
+      openChangeComplete: (_open) => true,
+      payloadChange: (_payload, _details) => true,
+      dismissAttempt: (_details) => true,
+      "update:snapPoint": (_snapPoint) => true,
+      snapPointChange: (_snapPoint, _details) => true
+    },
+    setup(props, { slots, emit }) {
+      provide(ContainerKey, () => props.container);
+      const drawer = usePrimitive(drawerPrimitive, () => ({
+        ...props,
+        open: orModel(props.open, props.modelValue),
+        container: void 0,
+        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),
+        onSnapPointChange: (snapPoint, details) => {
+          emit("snapPointChange", snapPoint, details);
+          if (!details.canceled) {
+            emit("update:snapPoint", snapPoint);
+          }
+        }
+      }));
+      useControllerEntry(() => props.controller, drawer);
+      return () => slots.default?.();
+    }
+  })
+);
+var DrawerTrigger = withElement(
+  "button",
+  defineComponent({
+    name: "DrawerTrigger",
+    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 drawer to the drawer with this controller.
+      controller: Object
+    },
+    slots: Object,
+    setup(props, { slots, attrs }) {
+      const connected = useControllerTarget(
+        drawerPrimitive,
+        () => props.controller
+      );
+      provide(TriggerKey, { shortcut: () => props.shortcut, drawer: connected });
+      const id = useId();
+      const part = () => ({
+        id,
+        disabled: props.disabled,
+        focusableWhenDisabled: props.focusableWhenDisabled,
+        payload: props.payload,
+        shortcut: props.shortcut
+      });
+      return useConnectedPart(
+        connected,
+        (drawer) => usePart(drawer, "trigger", part, void 0, "button"),
+        // Until the drawer it names mounts, a trigger outside the drawer 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 } }
+        )
+      );
+    }
+  })
+);
+var DrawerBackdrop = withElement(
+  "div",
+  defineComponent({
+    name: "DrawerBackdrop",
+    inheritAttrs: false,
+    slots: Object,
+    setup() {
+      const target = usePopupContainer(inject(ContainerKey, () => void 0));
+      const part = usePart(useDrawer(), "backdrop");
+      return () => {
+        const element = part();
+        return element && renderPopup(element, target());
+      };
+    }
+  })
+);
+var DrawerContent = withPayload(
+  withElement(
+    "div",
+    defineComponent({
+      name: "DrawerContent",
+      inheritAttrs: false,
+      props: {
+        initialFocus: [
+          String,
+          Object,
+          Function
+        ],
+        finalFocus: [String, Object, Function],
+        keepMounted: optionalBoolean,
+        // Renders the drawer into this element instead of in place.
+        container: containerProp
+      },
+      slots: Object,
+      setup(props) {
+        const drawer = useDrawer();
+        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(drawer, "content", content);
+        return () => {
+          const element = part();
+          if (!element) {
+            return null;
+          }
+          return renderPopup(sheetViewport(drawer, element), target());
+        };
+      }
+    })
+  )
+);
+var DrawerHandle = parts.Handle;
+var DrawerTitle = parts.Title;
+var DrawerDescription = parts.Description;
+var DrawerClose = withElement(
+  "button",
+  defineComponent({
+    name: "DrawerClose",
+    inheritAttrs: false,
+    props: {
+      // Reported as `returnValue` when this closes the drawer.
+      value: String,
+      // Runs before the drawer 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(useDrawer(), "close", part, void 0, "button");
+    }
+  })
+);
+var ShortcutBinding = defineComponent({
+  name: "DrawerShortcutBinding",
+  inheritAttrs: false,
+  props: {
+    drawer: { type: Object, required: true },
+    shortcut: String
+  },
+  setup(props, { slots }) {
+    return usePart(
+      props.drawer,
+      "shortcut",
+      () => ({ shortcut: props.shortcut }),
+      void 0,
+      {
+        tag: "span",
+        children: (state) => slotContent(slots.default, { state }) ?? state.text
+      }
+    );
+  }
+});
+var DrawerShortcut = withElement(
+  "span",
+  defineComponent({
+    name: "DrawerShortcut",
+    inheritAttrs: false,
+    props: {
+      // The keys to show. Inside a trigger, its shortcut.
+      shortcut: String
+    },
+    slots: Object,
+    setup(props, { slots, attrs }) {
+      const context = useScope(drawerPrimitive)?.handle;
+      const trigger = inject(TriggerKey, null);
+      if (!context && !trigger) {
+        throw new Error("Drawer parts must be used inside <Drawer>.");
+      }
+      const mounted = ref(!!context);
+      onMounted(() => mounted.value = true);
+      return () => {
+        const drawer = context ?? (mounted.value ? trigger?.drawer() : void 0);
+        if (!drawer) {
+          return null;
+        }
+        const shortcut = props.shortcut ?? trigger?.shortcut();
+        return h(
+          ShortcutBinding,
+          { ...attrs, key: drawer.instance.id, drawer, shortcut },
+          slots
+        );
+      };
+    }
+  })
+);
+var OutletBinding = defineComponent({
+  name: "DrawerOutletBinding",
+  inheritAttrs: false,
+  props: {
+    drawer: { type: Object, required: true },
+    keyframes: Object
+  },
+  setup(props) {
+    const id = useId();
+    return usePart(props.drawer, "outlet", () => ({
+      id,
+      keyframes: props.keyframes
+    }));
+  }
+});
+var DrawerOutlet = withElement(
+  "div",
+  defineComponent({
+    name: "DrawerOutlet",
+    inheritAttrs: false,
+    props: {
+      // Keyframes it plays as the drawer expands, like `{ scale: [1, 0.94] }`.
+      keyframes: Object,
+      controller: Object
+    },
+    slots: Object,
+    setup(props, { slots, attrs }) {
+      const connected = useControllerTarget(
+        drawerPrimitive,
+        () => props.controller
+      );
+      return () => {
+        const drawer = connected();
+        if (!drawer) {
+          return renderUnbound(
+            "div",
+            { ...attrs },
+            { slots, state: { open: false } }
+          );
+        }
+        return h(
+          OutletBinding,
+          {
+            ...attrs,
+            key: drawer.instance.id,
+            drawer,
+            keyframes: props.keyframes
+          },
+          slots
+        );
+      };
+    }
+  })
+);
+export {
+  Drawer,
+  DrawerBackdrop,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHandle,
+  DrawerOutlet,
+  DrawerShortcut,
+  DrawerTitle,
+  DrawerTrigger,
+  createDrawerController,
+  sheetPhysics
+};

package/dist/editor-context.d.ts

@@ -0,0 +1,4 @@
+import type { TextEditorAdapter } from "@ui-sdk/core/trigger-menu";
+import type { InjectionKey } from "vue";
+declare const EditorKey: InjectionKey<() => TextEditorAdapter | undefined>;
+export { EditorKey };

package/dist/editor-context.js

@@ -0,0 +1,5 @@
+// src/editor-context.ts
+var EditorKey = /* @__PURE__ */ Symbol("text-editor");
+export {
+  EditorKey
+};

package/dist/field-context.d.ts

@@ -0,0 +1,26 @@
+import type { field } from "@ui-sdk/core/field";
+import { type InjectionKey } from "vue";
+import type { PrimitiveHandle } from "./use-primitive.js";
+type FieldContext = PrimitiveHandle<typeof field> & {
+    name: () => string | undefined;
+    disabled: () => boolean | undefined;
+};
+declare const FieldKey: InjectionKey<FieldContext>;
+/**
+ * Controls inside a field take its name and disabled state, and its ids and
+ * validity through the field's control slot. Null outside a field. The
+ * control takes the field's id, so the label points at it from the server's
+ * HTML on, unless its own props give one. A control whose component makes the
+ * id it renders, like a select's trigger, passes its attributes as `own`.
+ * @stable
+ */
+declare function useFieldControl(own?: Record<string, unknown>): {
+    name: () => string | undefined;
+    disabled: () => boolean | undefined;
+    props: (props: Record<string, any>) => {
+        "aria-labelledby": any;
+        "data-slot": any;
+    };
+} | null;
+declare function useFieldControlId(): string | undefined;
+export { type FieldContext, FieldKey, useFieldControl, useFieldControlId };

package/dist/field-context.js

@@ -0,0 +1,44 @@
+// src/field-context.ts
+import { fieldControlId, madeLabel } from "@ui-sdk/core/renderer";
+import { inject } from "vue";
+var FieldKey = /* @__PURE__ */ Symbol("field");
+function useFieldControl(own) {
+  const field = inject(FieldKey, null);
+  if (!field) {
+    return null;
+  }
+  return {
+    name: field.name,
+    disabled: field.disabled,
+    // Merges the field's attributes for its control into the control's props,
+    // keeping the control's own description ahead of the field's. The field
+    // decides the id.
+    props: (props) => {
+      const id = (own ?? props).id;
+      const label = props["aria-labelledby"];
+      const merged = field.slot(
+        "control",
+        { id, describedBy: props["aria-describedby"] },
+        {
+          ...props,
+          id: void 0,
+          "aria-labelledby": madeLabel(label) ? void 0 : label
+        }
+      );
+      return {
+        ...merged,
+        "aria-labelledby": merged["aria-labelledby"] ?? label,
+        "data-slot": props["data-slot"]
+      };
+    }
+  };
+}
+function useFieldControlId() {
+  const field = inject(FieldKey, null);
+  return field ? fieldControlId(field.api.id) : void 0;
+}
+export {
+  FieldKey,
+  useFieldControl,
+  useFieldControlId
+};

package/dist/field.d.ts

@@ -0,0 +1,154 @@
+import { type FieldDescriptionState, type ValidityKey } from "@ui-sdk/core/field";
+import { type PropType } from "vue";
+import { type PartSlots, type StateSlots } from "./use-primitive.js";
+/**
+ * Ties a form control to its label, description and error messages.
+ * @stable
+ */
+declare const Field: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    name: StringConstructor;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, (() => 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/field").FieldState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: StringConstructor;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    invalid: boolean;
+    disabled: boolean;
+    debug: boolean;
+}, PartSlots<import("@ui-sdk/core/field").FieldPrimitive, "root">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * The field's label, which names its control. Outside a Field it's a plain
+ * <label>, which labels the control inside it, like a card around a whole Field.
+ * @stable
+ */
+declare const FieldLabel: 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/field").FieldPrimitive, "label">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "label">;
+/**
+ * Describes its Field. Right inside a FieldSet, outside any Field, it describes
+ * the group, so screen readers say it as focus enters the group.
+ * @stable
+ */
+declare const FieldDescription: 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<{}>, {}, StateSlots<FieldDescriptionState>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "p">;
+/**
+ * Shows while the field shows as invalid. Without content, it shows the
+ * browser's message for the current problem.
+ * @stable
+ */
+declare const FieldError: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    match: {
+        type: PropType<boolean | ValidityKey>;
+        default: undefined;
+    };
+}>, () => 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<{
+    match: {
+        type: PropType<boolean | ValidityKey>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    match: boolean | ValidityKey;
+}, PartSlots<import("@ui-sdk/core/field").FieldPrimitive, "error">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * A native control: an <input> by default, or anything through the `render` slot.
+ * @stable
+ */
+declare const FieldControl: 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/field").FieldPrimitive, "control">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "input">;
+/**
+ * A native <fieldset>, so `disabled` disables every control inside it.
+ * @stable
+ */
+declare const FieldSet: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, (() => 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/field").FieldSetState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    debug: boolean;
+}, PartSlots<import("@ui-sdk/core/field").FieldSetPrimitive, "set">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "fieldset">;
+/**
+ * Names the field set. Keep it the set's first child, where a <legend> names it natively.
+ * @stable
+ */
+declare const FieldLegend: 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) & {
+    state: NoInfer<import("@ui-sdk/core/field").FieldSetState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/field").FieldSetPrimitive, "legend">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "legend">;
+/**
+ * Lays fields out. It has no role: a FieldSet is what names and disables a group.
+ * @stable
+ */
+declare const FieldGroup: 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) & {
+    state: {};
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/field").FieldGroupPrimitive, "group">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+export { useFieldControl } from "./field-context.js";
+export { Field, FieldControl, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSet, };
+export type { FieldApi, FieldDescriptionState, FieldErrorProps, FieldErrorState, FieldGroupPrimitive, FieldOptions, FieldPrimitive, FieldSetOptions, FieldSetPrimitive, FieldSetState, FieldState, ValidityKey, } from "@ui-sdk/core/field";