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

package/dist/input.d.ts

@@ -0,0 +1,120 @@
+import { type PartSlots } from "./use-primitive.js";
+/**
+ * A native <input>, wired to the Field it's in.
+ * @stable
+ */
+declare const Input: 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;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    controller: import("vue").PropType<import("@ui-sdk/core/input").InputController>;
+    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/input").InputState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (_value: string) => boolean;
+    "update:modelValue": (_value: string) => boolean;
+    valueChange: (_value: string, _details: import("@ui-sdk/core").ChangeDetails<import("@ui-sdk/core/input").InputValueChangeReason>) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    controller: import("vue").PropType<import("@ui-sdk/core/input").InputController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
+    "onUpdate:value"?: ((_value: string) => any) | undefined;
+    onValueChange?: ((_value: string, _details: import("@ui-sdk/core").ChangeDetails<import("@ui-sdk/core/input").InputValueChangeReason>) => any) | undefined;
+}>, {
+    value: string;
+    disabled: boolean;
+    debug: boolean;
+    defaultValue: string;
+    required: boolean;
+    readOnly: boolean;
+    modelValue: string;
+}, PartSlots<import("@ui-sdk/core/input").InputPrimitive, "root">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "input">;
+/**
+ * Holds an Input or Textarea with icons, text and buttons around it. Presses
+ * on its text and icons focus the field.
+ * @stable
+ */
+declare const InputGroup: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    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/input").InputGroupState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    debug: boolean;
+}, PartSlots<import("@ui-sdk/core/input").InputGroupPrimitive, "group">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * Empties the field in its group and focuses it. Shown while there's text to clear.
+ * @stable
+ */
+declare const InputClear: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/input").InputGroupState>>>, 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/input").InputGroupState>>>, "button">;
+export { createInputController } from "@ui-sdk/core/input";
+export type { InputController, InputGroupOptions, InputGroupPrimitive, InputGroupState, InputOptions, InputPrimitive, InputProps, InputState, InputValueChangeReason, TextareaOptions, TextareaPrimitive, TextareaProps, TextareaState, TextareaSubmitDetails, } from "@ui-sdk/core/input";
+export { Input, InputClear, InputGroup };

package/dist/input.js

@@ -0,0 +1,73 @@
+// src/input.ts
+import {
+  input as inputPrimitive,
+  inputGroup as inputGroupPrimitive
+} from "@ui-sdk/core/input";
+import { defineComponent } from "vue";
+import { useFieldControl } from "./field-context.js";
+import {
+  elementProps,
+  readOnlyOf,
+  textEmits,
+  textOptions,
+  textProps
+} from "./text-control.js";
+import { createParts, withElement } from "./create-parts.js";
+import {
+  optionalBoolean,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { createInputController } from "@ui-sdk/core/input";
+var groupParts = createParts(inputGroupPrimitive, { clear: "button" });
+var Input = withElement(
+  "input",
+  defineComponent({
+    name: "Input",
+    inheritAttrs: false,
+    props: textProps,
+    emits: textEmits,
+    slots: Object,
+    setup(props, { attrs, emit }) {
+      const field = useFieldControl();
+      const input = usePrimitive(inputPrimitive, textOptions(props, emit));
+      const part = () => ({
+        disabled: props.disabled || field?.disabled(),
+        readOnly: readOnlyOf(props, attrs),
+        required: props.required
+      });
+      return usePart(
+        input,
+        "root",
+        part,
+        () => elementProps(props, field, attrs, "input"),
+        {
+          tag: "input",
+          extend: field?.props
+        }
+      );
+    }
+  })
+);
+var InputGroup = withElement(
+  "div",
+  defineComponent({
+    name: "InputGroup",
+    inheritAttrs: false,
+    props: { debug: optionalBoolean },
+    slots: Object,
+    setup(props) {
+      const group = usePrimitive(inputGroupPrimitive, () => ({
+        debug: props.debug
+      }));
+      return usePart(group, "group");
+    }
+  })
+);
+var InputClear = groupParts.Clear;
+export {
+  Input,
+  InputClear,
+  InputGroup,
+  createInputController
+};

package/dist/item-icon.d.ts

@@ -0,0 +1,34 @@
+import type { Primitive, SlotName } from "@ui-sdk/core";
+import type { Feature } from "@ui-sdk/core/renderer";
+import { type PartSlots } from "./use-primitive.js";
+/**
+ * An icon part of `primitive`'s `slot`, registering `feature`, which ships the
+ * part. Its item is the item part it's inside, for a list whose value shows
+ * the selected item's icon.
+ */
+declare function defineItemIcon<P extends Primitive, S extends SlotName<P>>(name: string, primitive: P, slot: S, feature: Feature): import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    mirror: {
+        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: import("@ui-sdk/core").TypesOf<P>["slots"][S] extends infer T ? T extends import("@ui-sdk/core").TypesOf<P>["slots"][S] ? T extends import("@ui-sdk/core").SlotDefinition<any, any, any, infer Public> ? Public : never : never : never;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    mirror: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    mirror: boolean;
+}, PartSlots<P, S>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "span">;
+/**
+ * The selected item's icon, copied from its item's icon part. Rendered while
+ * one item is selected and it has an icon. Its content is the copy the core
+ * writes, so it takes no children.
+ */
+declare function defineValueIcon<P extends Primitive>(name: string, primitive: P, feature: Feature): import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, () => unknown, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<P, "value-icon" & keyof import("@ui-sdk/core").TypesOf<P>["slots"]>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "span">;
+export { defineItemIcon, defineValueIcon };

package/dist/item-icon.js

@@ -0,0 +1,63 @@
+// src/item-icon.ts
+import { defineComponent, useId } from "vue";
+import { useConnectedHandle, useConnectedPart } from "./controller-target.js";
+import { withElement } from "./create-parts.js";
+import {
+  optionalBoolean,
+  useHandle,
+  usePart,
+  useScope
+} from "./use-primitive.js";
+function defineItemIcon(name, primitive, slot, feature) {
+  return withElement(
+    "span",
+    defineComponent({
+      name,
+      inheritAttrs: false,
+      props: { mirror: optionalBoolean },
+      slots: Object,
+      setup(props) {
+        const handle = useHandle(primitive);
+        handle.instance.use(feature);
+        const item = useScope(primitive)?.around.item;
+        const id = useId();
+        const part = () => ({ id, mirror: props.mirror, item: item?.().value });
+        return usePart(handle, slot, part, void 0, "span");
+      }
+    })
+  );
+}
+function defineValueIcon(name, primitive, feature) {
+  return withElement(
+    "span",
+    defineComponent({
+      name,
+      inheritAttrs: false,
+      slots: Object,
+      setup() {
+        return useConnectedPart(
+          useConnectedHandle(primitive),
+          (handle) => {
+            handle.instance.use(feature);
+            return usePart(
+              handle,
+              "value-icon",
+              void 0,
+              void 0,
+              {
+                tag: "span",
+                children: () => void 0
+              }
+            );
+          },
+          // Inside a trigger outside its root, nothing until the root mounts.
+          () => null
+        );
+      }
+    })
+  );
+}
+export {
+  defineItemIcon,
+  defineValueIcon
+};

package/dist/label.d.ts

@@ -0,0 +1,16 @@
+/**
+ * A native <label> that names any control, by `for` or by wrapping it. A
+ * control a <label> can't reach, like a radio group or a slider, takes it as
+ * its name, and a press on the label activates it.
+ * @experimental
+ */
+declare const Label: import("./create-parts.js").ElementPart<new (props: Omit<import("@ui-sdk/core").OptionsOf<import("@ui-sdk/core/label").LabelPrimitive> & import("@ui-sdk/core/renderer").BaseSlotProps, never> & {} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps) => import("vue").CreateComponentPublicInstanceWithMixins<Omit<import("@ui-sdk/core").OptionsOf<import("@ui-sdk/core/label").LabelPrimitive> & import("@ui-sdk/core/renderer").BaseSlotProps, never> & {}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {}, import("vue").PublicProps, {}, false, {}, import("./use-primitive.js").StateSlots<{}>, {}, {}, string, {}, any, import("vue").ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+}, Omit<import("@ui-sdk/core").OptionsOf<import("@ui-sdk/core/label").LabelPrimitive> & import("@ui-sdk/core/renderer").BaseSlotProps, never> & {}, {}, {}, {}, {}, {}>, "label">;
+export { Label };
+export type { LabelOptions, LabelPrimitive } from "@ui-sdk/core/label";

package/dist/label.js

@@ -0,0 +1,8 @@
+// src/label.ts
+import { label } from "@ui-sdk/core/label";
+import { createParts } from "./create-parts.js";
+var parts = createParts(label, { root: "label" });
+var Label = parts.Root;
+export {
+  Label
+};

package/dist/lifecycle.d.ts

@@ -0,0 +1,11 @@
+/** Whether a `<KeepAlive>` keeps the component's page away, as a ref. Call in `setup`. */
+declare function useKeptAway(): import("vue").ShallowRef<boolean, boolean>;
+type PartRef = (el: HTMLElement | null) => void;
+/**
+ * Binds an instance's parts to their elements as Vue hands them over, and
+ * lets go of the page while a `<KeepAlive>` keeps the component away, so a
+ * cached open dialog stops locking scroll, then binds them again, its state
+ * kept. Returns the ref to give each part's element.
+ */
+declare function useBindings(): (ref: PartRef, slot: string) => (el: unknown) => void;
+export { useBindings, useKeptAway };

package/dist/lifecycle.js

@@ -0,0 +1,91 @@
+// src/lifecycle.ts
+import {
+  getCurrentInstance,
+  onActivated,
+  onDeactivated,
+  shallowRef,
+  watch
+} from "vue";
+function inDeactivatedPage(instance) {
+  for (let current = instance; current; current = current.parent) {
+    if (current.isDeactivated) {
+      return true;
+    }
+  }
+  return false;
+}
+function useKeptAway() {
+  const isAway = shallowRef(inDeactivatedPage(getCurrentInstance()));
+  onDeactivated(() => isAway.value = true);
+  onActivated(() => isAway.value = false);
+  return isAway;
+}
+function useBindings() {
+  const bound = /* @__PURE__ */ new Map();
+  const isAway = useKeptAway();
+  let isReleased = isAway.value;
+  watch(
+    isAway,
+    () => {
+      isReleased = isAway.value;
+      bound.forEach((el, ref) => ref(isReleased ? null : el));
+    },
+    { flush: "post" }
+  );
+  const refs = /* @__PURE__ */ new WeakMap();
+  const held = /* @__PURE__ */ new WeakMap();
+  const outside = {};
+  return (ref, slot) => {
+    const owner = getCurrentInstance() ?? outside;
+    let own = refs.get(owner);
+    if (!own) {
+      refs.set(owner, own = /* @__PURE__ */ new WeakMap());
+    }
+    let wrapped = own.get(ref);
+    if (wrapped) {
+      return wrapped;
+    }
+    const suspense = owner.suspense;
+    let mine = null;
+    wrapped = (value) => {
+      const el = value && typeof value === "object" && "$el" in value ? value.$el : value;
+      if (!el) {
+        const last = mine;
+        mine = null;
+        if (bound.get(ref) !== last) {
+          return;
+        }
+        bound.delete(ref);
+        return ref(null);
+      }
+      let slots = held.get(el);
+      if (!slots) {
+        held.set(el, slots = /* @__PURE__ */ new Map());
+      }
+      const previous = slots.get(slot);
+      slots.set(slot, ref);
+      if (previous && previous !== ref && bound.get(previous) === el) {
+        bound.delete(previous);
+        if (!isReleased) {
+          previous(null);
+        }
+      }
+      mine = el;
+      bound.set(ref, el);
+      if (isReleased) {
+        return;
+      }
+      if (suspense?.pendingBranch) {
+        suspense.effects.push(() => bound.get(ref) === el && ref(el));
+      } else {
+        ref(el);
+      }
+    };
+    own.set(ref, wrapped);
+    return wrapped;
+  };
+}
+export {
+  useBindings,
+  useKeptAway
+};

package/dist/list-items.d.ts

@@ -0,0 +1,38 @@
+import type { ListData } from "@ui-sdk/core/select";
+import { type Component, type PropType, type VNode } from "vue";
+type ListParts = {
+    Item: Component;
+    Group: Component;
+    GroupLabel: Component;
+    Separator: Component;
+};
+declare const ListItems: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    items: {
+        type: PropType<readonly ListData<any>[number][]>;
+        required: true;
+    };
+    parts: {
+        type: PropType<ListParts>;
+        required: true;
+    };
+    keyOf: {
+        type: PropType<(value: unknown) => string>;
+        required: true;
+    };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: PropType<readonly ListData<any>[number][]>;
+        required: true;
+    };
+    parts: {
+        type: PropType<ListParts>;
+        required: true;
+    };
+    keyOf: {
+        type: PropType<(value: unknown) => string>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export { ListItems, type ListParts };

package/dist/list-items.js

@@ -0,0 +1,59 @@
+// src/list-items.ts
+import {
+  defineComponent,
+  Fragment,
+  h
+} from "vue";
+var ListItems = defineComponent({
+  name: "ListItems",
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    parts: { type: Object, required: true },
+    keyOf: {
+      type: Function,
+      required: true
+    }
+  },
+  setup(props) {
+    const render = (items) => {
+      const groupsByLabel = /* @__PURE__ */ new Map();
+      return items.map((entry, index) => {
+        const { Item, Group, GroupLabel, Separator } = props.parts;
+        if (typeof entry === "string") {
+          return h(Item, { key: entry, value: entry }, () => entry);
+        }
+        if ("type" in entry && entry.type === "separator") {
+          return h(Separator, { key: `separator-${index}` });
+        }
+        if ("type" in entry && entry.type === "group") {
+          const label2 = entry.label ?? "";
+          const before = groupsByLabel.get(label2) ?? 0;
+          groupsByLabel.set(label2, before + 1);
+          return h(Group, { key: `group-${label2}-${before}` }, () => [
+            entry.label && h(GroupLabel, null, () => entry.label),
+            ...render(entry.items)
+          ]);
+        }
+        const { value, label, disabled, keywords } = entry;
+        return h(
+          Item,
+          {
+            key: props.keyOf(value),
+            value,
+            label,
+            disabled,
+            ...keywords && { keywords }
+          },
+          () => label
+        );
+      });
+    };
+    return () => h(Fragment, render(props.items));
+  }
+});
+export {
+  ListItems
+};

package/dist/list-text.d.ts

@@ -0,0 +1,7 @@
+import type { MatchSegment } from "@ui-sdk/core/combobox";
+import { type VNode } from "vue";
+declare function markSegments(segments: MatchSegment[]): (string | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>)[];
+declare function slotText(nodes: VNode[] | undefined): string | undefined;
+export { markSegments, slotText };

package/dist/list-text.js

@@ -0,0 +1,15 @@
+// src/list-text.ts
+import { h, Text } from "vue";
+function markSegments(segments) {
+  return segments.map(({ text, match }) => match ? h("mark", text) : text);
+}
+function slotText(nodes) {
+  if (!nodes?.length || !nodes.every((node) => node.type === Text)) {
+    return void 0;
+  }
+  return nodes.map((node) => node.children).join("");
+}
+export {
+  markSegments,
+  slotText
+};