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

package/dist/trigger-menu.js

@@ -0,0 +1,254 @@
+// src/trigger-menu.ts
+import {
+  triggerMenu as triggerMenuPrimitive
+} from "@ui-sdk/core/trigger-menu";
+import {
+  defineComponent,
+  h,
+  inject,
+  provide
+} from "vue";
+import {
+  hasChild,
+  NotPlaced,
+  usePlaceContent,
+  usePlacedContent
+} from "./children.js";
+import { EditorKey } from "./editor-context.js";
+import {
+  containerProp,
+  renderPopup,
+  useControllerEntry
+} from "./popup.js";
+import { ListItems } from "./list-items.js";
+import { createParts, withElement } from "./create-parts.js";
+import {
+  defaultSlot,
+  optionalBoolean,
+  orModel,
+  useHandle,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { renderless } from "./renderless.js";
+import {
+  createTriggerMenuController,
+  textFieldAdapter
+} from "@ui-sdk/core/trigger-menu";
+var ContainerKey = /* @__PURE__ */ Symbol(
+  "trigger-menu-container"
+);
+var useTriggerMenu = () => useHandle(triggerMenuPrimitive);
+var parts = createParts(triggerMenuPrimitive, {
+  input: "textarea",
+  item: "div",
+  "item-icon": "span",
+  group: "div",
+  "group-label": "div",
+  separator: "div"
+});
+var TriggerMenu = /* @__PURE__ */ renderless(
+  defineComponent({
+    name: "TriggerMenu",
+    props: {
+      triggers: {
+        type: Array,
+        required: true
+      },
+      editor: Object,
+      open: optionalBoolean,
+      modelValue: optionalBoolean,
+      status: String,
+      autoHighlight: optionalBoolean,
+      loop: optionalBoolean,
+      shortcut: String,
+      controller: Object,
+      dismissible: optionalBoolean,
+      debug: optionalBoolean,
+      container: containerProp,
+      // An action handler: a function prop beside the emit, so a returned Promise inserts a pending token.
+      onSelect: Function,
+      pendingAnnouncement: String
+    },
+    emits: {
+      "update:open": (_open) => true,
+      "update:modelValue": (_open) => true,
+      openChange: (_open, _details) => true,
+      openChangeComplete: (_open) => true,
+      dismissAttempt: (_details) => true,
+      queryChange: (_query, _details) => true
+    },
+    setup(props, { slots, emit }) {
+      const inherited = inject(EditorKey, () => void 0);
+      provide(ContainerKey, () => props.container);
+      const menu = usePrimitive(triggerMenuPrimitive, () => ({
+        ...props,
+        open: orModel(props.open, props.modelValue),
+        container: void 0,
+        editor: props.editor ?? inherited(),
+        onOpenChange: (open, details) => {
+          emit("openChange", open, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:open", open);
+          emit("update:modelValue", open);
+        },
+        onOpenChangeComplete: (open) => emit("openChangeComplete", open),
+        onDismissAttempt: (details) => emit("dismissAttempt", details),
+        onQueryChange: (query, details) => emit("queryChange", query, details)
+      }));
+      useControllerEntry(() => props.controller, menu);
+      const placed = usePlacedContent();
+      return () => {
+        const children = slots.default?.() ?? [];
+        const own = placed() || hasChild(children, TriggerMenuContent);
+        return [children, !own && h(NotPlaced, () => h(TriggerMenuContent))];
+      };
+    }
+  })
+);
+var TriggerMenuInput = parts.Input;
+var TriggerMenuContent = withElement(
+  "div",
+  defineComponent({
+    name: "TriggerMenuContent",
+    inheritAttrs: false,
+    props: {
+      side: String,
+      align: String,
+      sideOffset: Number,
+      alignOffset: Number,
+      collisionPadding: Number,
+      arrowPadding: Number,
+      anchor: [Object, String],
+      keepMounted: optionalBoolean,
+      container: containerProp
+    },
+    slots: Object,
+    setup(props, { slots }) {
+      usePlaceContent();
+      const menu = useTriggerMenu();
+      const inherited = inject(ContainerKey, () => void 0);
+      const content = () => {
+        const { container, ...content2 } = props;
+        return content2;
+      };
+      const part = usePart(menu, "content", content, void 0, {
+        tag: "div",
+        children: (state) => defaultSlot(slots, state, () => h(TriggerMenuList))
+      });
+      return () => {
+        const element = part();
+        if (!element) {
+          return null;
+        }
+        return renderPopup(element, props.container ?? inherited());
+      };
+    }
+  })
+);
+var TriggerMenuList = withElement(
+  "div",
+  defineComponent({
+    name: "TriggerMenuList",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      return usePart(triggerMenuPrimitive, "list", void 0, void 0, {
+        tag: "div",
+        children: (state) => defaultSlot(
+          slots,
+          state,
+          () => h(TriggerMenuItems, { items: state.items })
+        )
+      });
+    }
+  })
+);
+var TriggerMenuItem = parts.Item;
+var TriggerMenuItemIcon = parts.ItemIcon;
+var TriggerMenuGroup = parts.Group;
+var TriggerMenuGroupLabel = parts.GroupLabel;
+var TriggerMenuSeparator = parts.Separator;
+var TriggerMenuEmpty = withElement(
+  "div",
+  defineComponent({
+    name: "TriggerMenuEmpty",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      return usePart(triggerMenuPrimitive, "empty", void 0, void 0, {
+        tag: "div",
+        children: (state) => state.empty ? slots.default?.({ state }) : null
+      });
+    }
+  })
+);
+var TriggerMenuStatus = withElement(
+  "div",
+  defineComponent({
+    name: "TriggerMenuStatus",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      return usePart(triggerMenuPrimitive, "status", () => ({
+        text: !slots.default
+      }));
+    }
+  })
+);
+var TriggerMenuHint = withElement(
+  "span",
+  defineComponent({
+    name: "TriggerMenuHint",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      return usePart(
+        triggerMenuPrimitive,
+        "hint",
+        () => ({ text: !slots.default }),
+        void 0,
+        "span"
+      );
+    }
+  })
+);
+var TriggerMenuItems = defineComponent({
+  name: "TriggerMenuItems",
+  props: {
+    items: { type: Array, required: true }
+  },
+  setup(props) {
+    const menu = useTriggerMenu();
+    return () => h(ListItems, {
+      items: props.items,
+      parts: listParts,
+      keyOf: menu.api.internal.keyOf
+    });
+  }
+});
+var listParts = {
+  Item: TriggerMenuItem,
+  Group: TriggerMenuGroup,
+  GroupLabel: TriggerMenuGroupLabel,
+  Separator: TriggerMenuSeparator
+};
+export {
+  TriggerMenu,
+  TriggerMenuContent,
+  TriggerMenuEmpty,
+  TriggerMenuGroup,
+  TriggerMenuGroupLabel,
+  TriggerMenuHint,
+  TriggerMenuInput,
+  TriggerMenuItem,
+  TriggerMenuItemIcon,
+  TriggerMenuItems,
+  TriggerMenuList,
+  TriggerMenuSeparator,
+  TriggerMenuStatus,
+  createTriggerMenuController,
+  textFieldAdapter
+};

package/dist/use-primitive.d.ts

@@ -0,0 +1,132 @@
+import type { OptionsOf, Primitive, PropsOf, SlotName, StateOf, TypesOf } from "@ui-sdk/core";
+import { type FunctionalComponent, type Slots, type SlotsType, type VNode } from "vue";
+declare const optionalBoolean: {
+    type: BooleanConstructor;
+    default: undefined;
+};
+declare const orModel: <T>(value: T | undefined, model: T | undefined) => T | undefined;
+/**
+ * What `usePrimitive` returns, and what the parts inside its component find.
+ * @stable
+ */
+type PrimitiveHandle<P extends Primitive> = {
+    /** The primitive it's an instance of. */
+    primitive: P;
+    /** The core instance `usePrimitive` made, with its `get()`, `part()` and `api`. Read `state` instead of its `get()` in a render, since `get()` tracks nothing. */
+    instance: ReturnType<P>;
+    /** The methods its definition declares, like Tabs' `setValue`. */
+    api: TypesOf<P>["api"];
+    /** The instance's state. Reading it inside a render tracks it. */
+    readonly state: TypesOf<P>["state"];
+    /** Whether a slot's element should exist. Reading it inside a render tracks it. */
+    present: <S extends SlotName<P>>(name: S, props?: PropsOf<P, S>) => boolean;
+    /** Attributes, listeners and a ref for a slot's element. User listeners run first. */
+    slot: <S extends SlotName<P>>(name: S, props?: PropsOf<P, S>, user?: Record<string, any>) => Record<string, any>;
+};
+type Scope = {
+    handle: PrimitiveHandle<Primitive>;
+    around: Record<string, () => Record<string, unknown>>;
+};
+declare const pascal: (name: string) => string;
+/** The nearest instance of a primitive and the props of the parts around, or null outside one. */
+declare function useScope<P extends Primitive>(primitive: P): (Scope & {
+    handle: PrimitiveHandle<P>;
+}) | null;
+/** The nearest instance of a primitive, for a part written by hand. Throws outside one. */
+declare function useHandle<P extends Primitive>(primitive: P): PrimitiveHandle<Primitive> & PrimitiveHandle<P>;
+/** Shares a handle with the parts inside, like a trigger's outside its root, connected by a controller. */
+declare function provideHandle<P extends Primitive>(handle: PrimitiveHandle<P>): void;
+/**
+ * Shares a part's props with the parts inside it, for the props they take
+ * from it when they're left out, like an item's `value` for its icon.
+ */
+declare function provideProps(primitive: Primitive, slot: string, props: () => Record<string, unknown>): void;
+/**
+ * Creates an instance of a primitive for this component, keeps its options
+ * current, and destroys it when the component unmounts. Pass the options as a
+ * getter, so reactive props stay in sync. Parts inside the component use it.
+ * @stable
+ */
+declare function usePrimitive<P extends Primitive>(primitive: P, options: () => OptionsOf<P>): PrimitiveHandle<P>;
+/**
+ * A plain copy of a component's props that tracks each one it reads, for
+ * spreading into options. Vue's props are a proxy, and V8 copies a proxy
+ * with spread or rest through a slow generic path: in Node, a tooltip's 12
+ * props took 9 µs that way and 0.8 µs read one by one. The raw props hold every
+ * declared prop, so the copy has the same keys in the same order.
+ */
+declare function copyProps<T extends object>(props: T): T;
+type StateSlotFunctions<State> = {
+    /** The part's content, which receives its state. */
+    default?: (scope: {
+        state: State;
+    }) => VNode[];
+    /**
+     * Renders your own element: bind `props` to it. `children` is the part's
+     * content, like a slider thumb's range input: render it inside with
+     * `<component :is="children" />`.
+     */
+    render?: (scope: {
+        props: Record<string, unknown>;
+        state: State;
+        children: FunctionalComponent;
+    }) => VNode[];
+};
+type StateSlots<State> = SlotsType<StateSlotFunctions<State>>;
+/**
+ * A part's slots, typed from its primitive, for a part written by hand:
+ * `slots: Object as PartSlots<typeof rating, "star">`, so a template reads
+ * its state with the types and completion of a `createParts` part.
+ * @stable
+ */
+type PartSlots<P extends Primitive, S extends SlotName<P>> = StateSlots<StateOf<P, S>>;
+/** A part's default slot, rendered apart from the part, or `fallback` when it renders nothing. */
+declare function defaultSlot(slots: Slots, state: object, fallback?: () => unknown): unknown;
+/**
+ * How `usePart` renders a part beyond its tag: content of its own in place of
+ * the default slot, an element it always holds, and props added after the
+ * slot's attributes.
+ * @stable
+ */
+type PartElement<State> = {
+    /** The tag it renders unless the `render` slot replaces it. */
+    tag: string;
+    /** Its content, from its state. Without it, the default slot, which receives the state. */
+    children?: (state: State) => unknown;
+    /** An element inside the part, or next to what the `render` slot returns, like a root's hidden form input. */
+    hidden?: () => VNode;
+    /** Its props after the slot's attributes merge in, like a field's attributes on its control. */
+    extend?: (props: Record<string, any>) => Record<string, any>;
+};
+declare function renderElement(props: Record<string, unknown>, slots: Slots, state: object | undefined, element: PartElement<any>): VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[];
+/**
+ * Renders one part of a primitive written by hand, from its component's
+ * setup: its element, with the slot's attributes and handlers merged into the
+ * component's attrs, re-rendered when what it shows changes, or nothing while
+ * the slot says it isn't present. Returns the render function, with the
+ * part's state as its `state`. `handle` is `usePrimitive`'s, or the
+ * primitive, whose nearest instance it uses. `props` replaces the element
+ * props, the component's attrs by default. The `render` slot and the default
+ * slot receive the part's state. `element` is the tag, or what to render
+ * beyond it (`PartElement`).
+ *
+ * @example
+ * const StarIcon = defineComponent({
+ *   inheritAttrs: false,
+ *   props: { value: { type: String, required: true } },
+ *   setup: (props) => usePart(rating, "star-icon", () => ({ value: props.value }), undefined, "span"),
+ * })
+ * @stable
+ */
+declare function usePart<P extends Primitive, S extends SlotName<P>>(handle: P | PrimitiveHandle<P>, slot: S, slotProps?: () => PropsOf<P, S>, props?: () => Record<string, unknown>, element?: string | PartElement<StateOf<P, S>>): (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: StateOf<P, S>;
+};
+export { copyProps, defaultSlot, optionalBoolean, orModel, pascal, type PartElement, type PartSlots, type PrimitiveHandle, provideHandle, provideProps, renderElement, type StateSlotFunctions, type StateSlots, useHandle, usePart, usePrimitive, useScope, };