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

package/dist/nuxt/module.d.ts

@@ -0,0 +1,18 @@
+import type { NuxtModule } from "@nuxt/schema";
+/**
+ * The options of the Nuxt module, set under `uiSdk` in `nuxt.config.ts`.
+ * @experimental
+ */
+interface ModuleOptions {
+    /** Prepended to every component's name, so `"U"` registers `<UDialogTrigger>`. Empty by default. */
+    prefix?: string;
+}
+/**
+ * The Nuxt module: every part of every entry becomes an auto-imported
+ * component, and the controllers and helpers become auto-imports in `<script>`.
+ * Add `"@ui-sdk/vue"` to `modules` in `nuxt.config.ts`.
+ * @experimental
+ */
+declare const uiSdk: NuxtModule<ModuleOptions>;
+export type { ModuleOptions };
+export default uiSdk;

package/dist/nuxt/module.js

@@ -0,0 +1,31 @@
+// nuxt/module.ts
+import { existsSync, readFileSync } from "node:fs";
+import { addComponent, addImportsSources, defineNuxtModule } from "@nuxt/kit";
+import { nuxtRegistrations } from "./registrations.js";
+var uiSdk = defineNuxtModule({
+  meta: {
+    name: "@ui-sdk/vue",
+    configKey: "uiSdk",
+    compatibility: { nuxt: "^4.0.0 || ^5.0.0-0" }
+  },
+  defaults: { prefix: "" },
+  setup(options) {
+    const { components, imports } = nuxtRegistrations(
+      readEntries(),
+      options.prefix ?? ""
+    );
+    for (const component of components) {
+      addComponent(component);
+    }
+    addImportsSources(imports);
+  }
+});
+function readEntries() {
+  const built = new URL("./entries.json", import.meta.url);
+  const file = existsSync(built) ? built : new URL("../dist/nuxt/entries.json", import.meta.url);
+  return JSON.parse(readFileSync(file, "utf8"));
+}
+var module_default = uiSdk;
+export {
+  module_default as default
+};

package/dist/nuxt/registrations.d.ts

@@ -0,0 +1,22 @@
+/** What one entry of `@ui-sdk/vue` gives a Nuxt app, as the build lists it in `entries.json`. */
+interface NuxtEntry {
+    /** The entry's specifier, like `@ui-sdk/vue/dialog`. */
+    from: string;
+    /** The components the entry exports, like `DialogTrigger`. */
+    components: string[];
+    /** The other values the entry exports, like `createDialogController`. */
+    imports: string[];
+}
+declare function nuxtRegistrations(entries: NuxtEntry[], prefix: string): {
+    components: {
+        name: string;
+        export: string;
+        filePath: string;
+    }[];
+    imports: {
+        from: string;
+        imports: string[];
+        priority: number;
+    }[];
+};
+export { type NuxtEntry, nuxtRegistrations };

package/dist/nuxt/registrations.js

@@ -0,0 +1,22 @@
+// nuxt/registrations.ts
+function nuxtRegistrations(entries, prefix) {
+  return {
+    components: entries.flatMap(
+      ({ from, components }) => components.map((name) => ({
+        name: `${prefix}${name}`,
+        export: name,
+        filePath: from
+      }))
+    ),
+    // Below the app's own imports and every layer's (0, -1, -2…), so their
+    // `utils/` win over a ui-sdk name like `clamp` instead of losing silently.
+    imports: entries.filter(({ imports }) => imports.length).map(({ from, imports }) => ({
+      from,
+      imports,
+      priority: Number.MIN_SAFE_INTEGER
+    }))
+  };
+}
+export {
+  nuxtRegistrations
+};

package/dist/observe.d.ts

@@ -0,0 +1,2 @@
+export { elementOf, observe, withSource } from "@ui-sdk/core/observe";
+export type { ObservedChange } from "@ui-sdk/core/observe";

package/dist/observe.js

@@ -0,0 +1,7 @@
+// src/observe.ts
+import { elementOf, observe, withSource } from "@ui-sdk/core/observe";
+export {
+  elementOf,
+  observe,
+  withSource
+};

package/dist/otp-input.d.ts

@@ -0,0 +1,142 @@
+import type { ChangeDetails, CommitDetails } from "@ui-sdk/core";
+import { type OTPInputController, type OTPInputOptions, type OTPInputPattern, type OTPInputValueChangeReason } from "@ui-sdk/core/otp-input";
+import { type PropType } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+/**
+ * The root: the slots, and the one real input over them. `id`, `autofocus`
+ * and the `aria-*` naming attributes go to that input.
+ * @stable
+ */
+declare const OTPInput: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    maxLength: NumberConstructor;
+    pattern: PropType<OTPInputPattern>;
+    inputMode: PropType<OTPInputOptions["inputMode"]>;
+    textAlign: PropType<OTPInputOptions["textAlign"]>;
+    autoComplete: StringConstructor;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    name: StringConstructor;
+    form: StringConstructor;
+    controller: PropType<OTPInputController>;
+    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/otp-input").OTPInputState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (_value: string) => true;
+    "update:modelValue": (_value: string) => true;
+    valueChange: (_value: string, _details: ChangeDetails<OTPInputValueChangeReason>) => true;
+    valueCommit: (_value: string, _details: CommitDetails<OTPInputValueChangeReason>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    maxLength: NumberConstructor;
+    pattern: PropType<OTPInputPattern>;
+    inputMode: PropType<OTPInputOptions["inputMode"]>;
+    textAlign: PropType<OTPInputOptions["textAlign"]>;
+    autoComplete: StringConstructor;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    name: StringConstructor;
+    form: StringConstructor;
+    controller: PropType<OTPInputController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
+    "onUpdate:value"?: ((_value: string) => any) | undefined;
+    onValueChange?: ((_value: string, _details: ChangeDetails<OTPInputValueChangeReason>) => any) | undefined;
+    onValueCommit?: ((_value: string, _details: CommitDetails<OTPInputValueChangeReason>) => any) | undefined;
+}>, {
+    value: string;
+    disabled: boolean;
+    debug: boolean;
+    defaultValue: string;
+    required: boolean;
+    readOnly: boolean;
+    modelValue: string;
+}, PartSlots<import("@ui-sdk/core/otp-input").OtpInputPrimitive, "root">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * Lays out a run of slots.
+ * @stable
+ */
+declare const OTPInputGroup: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/otp-input").OTPInputState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/otp-input").OTPInputState>>>, "div">;
+/**
+ * Drawn between groups, like a dash.
+ * @stable
+ */
+declare const OTPInputSeparator: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/otp-input").OTPInputState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/otp-input").OTPInputState>>>, "div">;
+/**
+ * One character of the code. Without content, it shows the character.
+ * @stable
+ */
+declare const OTPInputSlot: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>, (() => 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/otp-input").OTPInputSlotState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/otp-input").OtpInputPrimitive, "slot">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+export { createOTPInputController } from "@ui-sdk/core/otp-input";
+export type { OTPInputApi, OTPInputChangeOptions, OTPInputController, OTPInputOptions, OTPInputPattern, OTPInputSlotData, OTPInputSlotProps, OTPInputSlotState, OTPInputState, OTPInputValueChangeReason, OtpInputPrimitive, } from "@ui-sdk/core/otp-input";
+export { OTPInput, OTPInputGroup, OTPInputSeparator, OTPInputSlot };

package/dist/otp-input.js

@@ -0,0 +1,130 @@
+// src/otp-input.ts
+import {
+  otpInput as otpInputPrimitive
+} from "@ui-sdk/core/otp-input";
+import { defineComponent, h } from "vue";
+import { slotContent } from "./children.js";
+import { useFieldControl } from "./field-context.js";
+import { createParts, withElement } from "./create-parts.js";
+import {
+  optionalBoolean,
+  orModel,
+  useHandle,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { readOnlyOf } from "./text-control.js";
+import { createOTPInputController } from "@ui-sdk/core/otp-input";
+var parts = createParts(otpInputPrimitive, { group: "div", separator: "div" });
+var inputAttributes = [
+  "id",
+  "autofocus",
+  "aria-label",
+  "aria-labelledby",
+  "aria-describedby",
+  "aria-invalid"
+];
+var OTPInput = withElement(
+  "div",
+  defineComponent({
+    name: "OTPInput",
+    inheritAttrs: false,
+    props: {
+      value: { type: String, default: void 0 },
+      modelValue: { type: String, default: void 0 },
+      defaultValue: { type: String, default: void 0 },
+      maxLength: Number,
+      pattern: [String, RegExp],
+      inputMode: String,
+      textAlign: String,
+      autoComplete: String,
+      disabled: optionalBoolean,
+      readOnly: optionalBoolean,
+      required: optionalBoolean,
+      name: String,
+      form: String,
+      controller: Object,
+      debug: optionalBoolean
+    },
+    emits: {
+      "update:value": (_value) => true,
+      "update:modelValue": (_value) => true,
+      valueChange: (_value, _details) => true,
+      valueCommit: (_value, _details) => true
+    },
+    slots: Object,
+    setup(props, { slots, attrs, emit }) {
+      const field = useFieldControl();
+      const otp = usePrimitive(otpInputPrimitive, () => ({
+        value: orModel(props.value, props.modelValue),
+        defaultValue: props.defaultValue,
+        maxLength: props.maxLength,
+        pattern: props.pattern,
+        inputMode: props.inputMode,
+        textAlign: props.textAlign,
+        autoComplete: props.autoComplete,
+        disabled: props.disabled || field?.disabled(),
+        readOnly: readOnlyOf(props, attrs),
+        required: props.required,
+        name: props.name ?? field?.name(),
+        form: props.form,
+        controller: props.controller,
+        debug: props.debug,
+        onValueChange: (value, details) => {
+          emit("valueChange", value, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:value", value);
+          emit("update:modelValue", value);
+        },
+        onValueCommit: (value, details) => emit("valueCommit", value, details)
+      }));
+      let named = {};
+      const own = () => {
+        const rest = {};
+        named = {};
+        for (const [key, value] of Object.entries(attrs)) {
+          ;
+          (inputAttributes.includes(key) ? named : rest)[key] = value;
+        }
+        return rest;
+      };
+      return usePart(otp, "root", void 0, own, {
+        tag: "div",
+        children: (state) => {
+          const input = otp.slot("control", {}, named);
+          return [
+            slots.default?.({ state }),
+            h("input", field ? field.props(input) : input)
+          ];
+        }
+      });
+    }
+  })
+);
+var OTPInputGroup = parts.Group;
+var OTPInputSeparator = parts.Separator;
+var OTPInputSlot = withElement(
+  "div",
+  defineComponent({
+    name: "OTPInputSlot",
+    inheritAttrs: false,
+    props: { index: { type: Number, required: true } },
+    slots: Object,
+    setup(props, { slots }) {
+      const part = () => ({ index: props.index, id: String(props.index) });
+      return usePart(useHandle(otpInputPrimitive), "slot", part, void 0, {
+        tag: "div",
+        children: (state) => slotContent(slots.default, { state }) ?? state.char
+      });
+    }
+  })
+);
+export {
+  OTPInput,
+  OTPInputGroup,
+  OTPInputSeparator,
+  OTPInputSlot,
+  createOTPInputController
+};

package/dist/overlays.d.ts

@@ -0,0 +1,40 @@
+import { type Overlays } from "@ui-sdk/core/overlays";
+import type { ToastItem } from "@ui-sdk/core/toast";
+import { type PropType, type SlotsType, type VNode } from "vue";
+import { type ToastContent } from "./toast-parts.js";
+/**
+ * Props for the toast regions the overlay host renders: the region's props and attributes, like `class`.
+ * @stable
+ */
+type OverlayHostToastProps = {
+    side?: "top" | "bottom";
+    align?: "start" | "center" | "end";
+    max?: number;
+    expanded?: boolean;
+    shortcut?: string | null;
+    [attribute: string]: unknown;
+};
+/**
+ * Renders what `toast()` and `confirm()` open, from anywhere in the app.
+ * Mount it once, near the root. A `ToastRegion` you place yourself takes over
+ * its toaster.
+ * @stable
+ */
+declare const OverlayHost: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    overlays: PropType<Overlays>;
+    toast: PropType<OverlayHostToastProps>;
+}>, () => (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<{
+    overlays: PropType<Overlays>;
+    toast: PropType<OverlayHostToastProps>;
+}>> & Readonly<{}>, {}, SlotsType<{
+    /** Renders each toast of the regions it renders, like a `ToastRegion`'s default slot: `#toast="{ toast }"`. */
+    toast?: (scope: {
+        toast: ToastItem<ToastContent>["toast"];
+        item: ToastItem<ToastContent>;
+    }) => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export { createOverlays, overlays } from "@ui-sdk/core/overlays";
+export type { OverlayEntry, Overlays } from "@ui-sdk/core/overlays";
+export { OverlayHost, type OverlayHostToastProps };

package/dist/overlays.js

@@ -0,0 +1,118 @@
+// src/overlays.ts
+import { toasterInternals } from "@ui-sdk/core/renderer";
+import {
+  overlays as sharedOverlays
+} from "@ui-sdk/core/overlays";
+import {
+  defineComponent,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  onScopeDispose,
+  shallowRef
+} from "vue";
+import {
+  AlertDialog,
+  AlertDialogClose,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle
+} from "./alert-dialog.js";
+import { HostedToastRegion } from "./toast-parts.js";
+import { createOverlays, overlays } from "@ui-sdk/core/overlays";
+var HostedToaster = defineComponent({
+  name: "HostedToaster",
+  props: {
+    toaster: { type: Function, required: true },
+    regionProps: Object,
+    renderToast: Function
+  },
+  setup(props) {
+    const placed = shallowRef(toasterInternals(props.toaster).hasPlacedRegion());
+    onScopeDispose(
+      props.toaster.subscribe(
+        () => placed.value = toasterInternals(props.toaster).hasPlacedRegion()
+      )
+    );
+    return () => placed.value ? null : h(
+      HostedToastRegion,
+      { ...props.regionProps, toaster: props.toaster },
+      props.renderToast && { default: props.renderToast }
+    );
+  }
+});
+var HostedConfirm = defineComponent({
+  name: "HostedConfirm",
+  props: {
+    entry: { type: Object, required: true }
+  },
+  setup(props) {
+    onMounted(() => props.entry.open());
+    return () => {
+      const { entry } = props;
+      const question = entry.payload ?? {};
+      return h(
+        AlertDialog,
+        {
+          controller: entry.controller,
+          onOpenChangeComplete: (open) => !open && entry.done()
+        },
+        () => h(AlertDialogContent, null, () => [
+          h(AlertDialogTitle, null, () => question.title),
+          question.description ? h(AlertDialogDescription, null, () => question.description) : null,
+          h("div", [
+            h(AlertDialogClose, null, () => question.cancelLabel ?? "Cancel"),
+            h(
+              AlertDialogClose,
+              { value: "confirm" },
+              () => question.confirmLabel ?? "Continue"
+            )
+          ])
+        ])
+      );
+    };
+  }
+});
+var OverlayHost = defineComponent({
+  name: "OverlayHost",
+  props: {
+    // The registry it renders. Defaults to the shared `overlays`, which toast() and confirm() open into.
+    overlays: Object,
+    // Props for the toast regions it renders, like `side` and `class`.
+    toast: Object
+  },
+  slots: Object,
+  setup(props, { slots }) {
+    const registry = props.overlays ?? sharedOverlays;
+    const entries = shallowRef(registry.entries());
+    onScopeDispose(
+      registry.subscribe(() => entries.value = registry.entries())
+    );
+    let release = () => {
+    };
+    onMounted(() => release = registry.attachHost());
+    onBeforeUnmount(() => release());
+    return () => entries.value.map((entry) => {
+      if (entry.type === "toaster") {
+        return h(HostedToaster, {
+          key: entry.id,
+          toaster: entry.data.toaster,
+          regionProps: props.toast,
+          renderToast: slots.toast
+        });
+      }
+      if (entry.type === "confirm") {
+        return h(HostedConfirm, {
+          key: entry.id,
+          entry: entry.data
+        });
+      }
+      return null;
+    });
+  }
+});
+export {
+  OverlayHost,
+  createOverlays,
+  overlays
+};