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

package/dist/autocomplete.js

@@ -0,0 +1,344 @@
+// src/autocomplete.ts
+import {
+  autocomplete as autocompletePrimitive
+} from "@ui-sdk/core/autocomplete";
+import {
+  defineComponent,
+  h,
+  inject,
+  provide
+} from "vue";
+import {
+  hasChild,
+  NotPlaced,
+  slotContent,
+  usePlaceContent,
+  usePlacedContent
+} from "./children.js";
+import { useFieldControl } from "./field-context.js";
+import { markSegments, slotText } from "./list-text.js";
+import {
+  containerProp,
+  provideSheetHeader,
+  renderPopup,
+  sheetViewport,
+  useControllerEntry,
+  useInSheetHeader,
+  useSheetHeader
+} from "./popup.js";
+import { ListItems } from "./list-items.js";
+import { createParts, withElement } from "./create-parts.js";
+import {
+  defaultSlot,
+  optionalBoolean,
+  orModel,
+  useHandle,
+  usePart,
+  usePrimitive,
+  useScope
+} from "./use-primitive.js";
+import { renderless } from "./renderless.js";
+import { readOnlyOf } from "./text-control.js";
+import { createAutocompleteController } from "@ui-sdk/core/autocomplete";
+var ContainerKey = /* @__PURE__ */ Symbol(
+  "autocomplete-container"
+);
+var useAutocomplete = () => useHandle(autocompletePrimitive);
+var parts = createParts(autocompletePrimitive, {
+  label: "label",
+  trigger: "button",
+  clear: "button",
+  item: "div",
+  "item-icon": "span",
+  group: "div",
+  "group-label": "div",
+  separator: "div",
+  status: "div",
+  arrow: "div"
+});
+var Autocomplete = /* @__PURE__ */ renderless(
+  defineComponent({
+    name: "Autocomplete",
+    props: {
+      value: { type: String, default: void 0 },
+      modelValue: { type: String, default: void 0 },
+      defaultValue: { type: String, default: void 0 },
+      open: optionalBoolean,
+      defaultOpen: optionalBoolean,
+      items: Array,
+      emptyItems: Array,
+      announcement: Function,
+      filter: {
+        type: [String, Boolean, Function],
+        default: void 0
+      },
+      inlineComplete: optionalBoolean,
+      autoHighlight: optionalBoolean,
+      openOnFocus: optionalBoolean,
+      submitOnSelect: optionalBoolean,
+      status: String,
+      loop: optionalBoolean,
+      modal: {
+        type: [Boolean, String],
+        default: void 0
+      },
+      presentation: String,
+      disabled: optionalBoolean,
+      readOnly: optionalBoolean,
+      required: optionalBoolean,
+      name: String,
+      form: String,
+      controller: Object,
+      dismissible: optionalBoolean,
+      debug: optionalBoolean,
+      container: containerProp
+    },
+    emits: {
+      "update:value": (_value) => true,
+      "update:modelValue": (_value) => true,
+      valueChange: (_value, _details) => true,
+      "update:open": (_open) => true,
+      openChange: (_open, _details) => true,
+      openChangeComplete: (_open) => true,
+      dismissAttempt: (_details) => true,
+      submit: (_value, _details) => true,
+      highlight: (_value, _details) => true,
+      loadMore: () => true
+    },
+    setup(props, { slots, attrs, emit }) {
+      const field = useFieldControl();
+      provide(ContainerKey, () => props.container);
+      const autocomplete = usePrimitive(autocompletePrimitive, () => ({
+        ...props,
+        value: orModel(props.value, props.modelValue),
+        container: void 0,
+        name: props.name ?? field?.name(),
+        disabled: props.disabled || field?.disabled(),
+        readOnly: readOnlyOf(props, attrs),
+        onValueChange: (value, details) => {
+          emit("valueChange", value, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:value", value);
+          emit("update:modelValue", value);
+        },
+        onOpenChange: (open, details) => {
+          emit("openChange", open, details);
+          if (!details.canceled) {
+            emit("update:open", open);
+          }
+        },
+        onOpenChangeComplete: (open) => emit("openChangeComplete", open),
+        onDismissAttempt: (details) => emit("dismissAttempt", details),
+        onSubmit: (value, details) => emit("submit", value, details),
+        onHighlight: (value, details) => emit("highlight", value, details),
+        onLoadMore: () => emit("loadMore")
+      }));
+      useControllerEntry(() => props.controller, autocomplete);
+      provideSheetHeader();
+      const placed = usePlacedContent();
+      return () => {
+        const children = slots.default?.() ?? [];
+        const own = !props.items || placed() || hasChild(children, AutocompleteContent);
+        return [
+          children,
+          props.items && !own && h(NotPlaced, () => h(AutocompleteContent))
+        ];
+      };
+    }
+  })
+);
+var AutocompleteLabel = parts.Label;
+var AutocompleteSeparator = parts.Separator;
+var AutocompleteInput = withElement(
+  "input",
+  defineComponent({
+    name: "AutocompleteInput",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { attrs }) {
+      const field = useFieldControl(attrs);
+      const inHeader = useInSheetHeader();
+      const part = usePart(
+        autocompletePrimitive,
+        "input",
+        void 0,
+        void 0,
+        {
+          tag: "input",
+          extend: field?.props
+        }
+      );
+      return () => {
+        const element = part();
+        return element && inHeader(element);
+      };
+    }
+  })
+);
+var AutocompleteTrigger = parts.Trigger;
+var AutocompleteClear = parts.Clear;
+var AutocompleteContent = withElement(
+  "div",
+  defineComponent({
+    name: "AutocompleteContent",
+    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 autocomplete = useAutocomplete();
+      const inherited = inject(ContainerKey, () => void 0);
+      const content = () => {
+        const { container, ...content2 } = props;
+        return content2;
+      };
+      const header = useSheetHeader(autocomplete);
+      const part = usePart(autocomplete, "content", content, void 0, {
+        tag: "div",
+        children: (state) => [
+          header(),
+          defaultSlot(
+            slots,
+            state,
+            () => autocomplete.state.items && h(AutocompleteList)
+          )
+        ]
+      });
+      return () => {
+        const element = part();
+        if (!element) {
+          return null;
+        }
+        return renderPopup(
+          sheetViewport(autocomplete, element),
+          props.container ?? inherited()
+        );
+      };
+    }
+  })
+);
+var AutocompleteList = withElement(
+  "div",
+  defineComponent({
+    name: "AutocompleteList",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      const autocomplete = useAutocomplete();
+      return usePart(autocomplete, "list", void 0, void 0, {
+        tag: "div",
+        children: (state) => defaultSlot(
+          slots,
+          state,
+          () => autocomplete.state.items && h(AutocompleteItems, { items: state.items })
+        )
+      });
+    }
+  })
+);
+var AutocompleteItem = parts.Item;
+var AutocompleteItemText = withElement(
+  "span",
+  defineComponent({
+    name: "AutocompleteItemText",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      const item = useScope(autocompletePrimitive)?.around.item;
+      if (!item) {
+        throw new Error(
+          "<AutocompleteItemText> must be used inside <AutocompleteItem>."
+        );
+      }
+      let text = "";
+      let own;
+      let ownText;
+      const part = usePart(
+        autocompletePrimitive,
+        "item-text",
+        () => ({ id: item().value, text }),
+        void 0,
+        {
+          tag: "span",
+          children: (state) => own && ownText === void 0 ? own : markSegments(state.segments)
+        }
+      );
+      return () => {
+        own = slotContent(slots.default, { state: part.state });
+        ownText = slotText(own);
+        text = ownText ?? item().label ?? item().value;
+        return part();
+      };
+    }
+  })
+);
+var AutocompleteItemIcon = parts.ItemIcon;
+var AutocompleteGroup = parts.Group;
+var AutocompleteGroupLabel = parts.GroupLabel;
+var AutocompleteEmpty = withElement(
+  "div",
+  defineComponent({
+    name: "AutocompleteEmpty",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      return usePart(autocompletePrimitive, "empty", void 0, void 0, {
+        tag: "div",
+        children: (state) => state.empty ? slots.default?.({ state }) : null
+      });
+    }
+  })
+);
+var AutocompleteStatus = parts.Status;
+var AutocompleteArrow = parts.Arrow;
+var AutocompleteItems = defineComponent({
+  name: "AutocompleteItems",
+  props: {
+    items: { type: Array, required: true }
+  },
+  setup(props) {
+    return () => h(ListItems, {
+      items: props.items,
+      parts: listParts,
+      keyOf: String
+    });
+  }
+});
+var listParts = {
+  Item: AutocompleteItem,
+  Group: AutocompleteGroup,
+  GroupLabel: AutocompleteGroupLabel,
+  Separator: AutocompleteSeparator
+};
+export {
+  Autocomplete,
+  AutocompleteArrow,
+  AutocompleteClear,
+  AutocompleteContent,
+  AutocompleteEmpty,
+  AutocompleteGroup,
+  AutocompleteGroupLabel,
+  AutocompleteInput,
+  AutocompleteItem,
+  AutocompleteItemIcon,
+  AutocompleteItemText,
+  AutocompleteItems,
+  AutocompleteLabel,
+  AutocompleteList,
+  AutocompleteSeparator,
+  AutocompleteStatus,
+  AutocompleteTrigger,
+  createAutocompleteController
+};

package/dist/avatar.d.ts

@@ -0,0 +1,40 @@
+import { type PartSlots } from "./use-primitive.js";
+/**
+ * The root: a box for the image and its fallback.
+ * @stable
+ */
+declare const Avatar: import("./create-parts.js").ElementPart<new (props: Omit<import("@ui-sdk/core").OptionsOf<import("@ui-sdk/core/avatar").AvatarPrimitive> & import("@ui-sdk/core/renderer").BaseSlotProps, "onLoadingStatusChange"> & {
+    onLoadingStatusChange?: ((status: import("@ui-sdk/core/avatar").AvatarLoadingStatus, details: import("@ui-sdk/core").ChangeDetails<import("@ui-sdk/core/avatar").AvatarLoadingStatusChangeReason>) => any) | undefined;
+} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps) => import("vue").CreateComponentPublicInstanceWithMixins<Omit<import("@ui-sdk/core").OptionsOf<import("@ui-sdk/core/avatar").AvatarPrimitive> & import("@ui-sdk/core/renderer").BaseSlotProps, "onLoadingStatusChange"> & {
+    onLoadingStatusChange?: ((status: import("@ui-sdk/core/avatar").AvatarLoadingStatus, details: import("@ui-sdk/core").ChangeDetails<import("@ui-sdk/core/avatar").AvatarLoadingStatusChangeReason>) => any) | undefined;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    loadingStatusChange: (status: import("@ui-sdk/core/avatar").AvatarLoadingStatus, details: import("@ui-sdk/core").ChangeDetails<import("@ui-sdk/core/avatar").AvatarLoadingStatusChangeReason>) => true;
+} & {}, import("vue").PublicProps, {}, false, {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/avatar").AvatarState>>, {}, {}, string, {}, any, import("vue").ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+}, Omit<import("@ui-sdk/core").OptionsOf<import("@ui-sdk/core/avatar").AvatarPrimitive> & import("@ui-sdk/core/renderer").BaseSlotProps, "onLoadingStatusChange"> & {
+    onLoadingStatusChange?: ((status: import("@ui-sdk/core/avatar").AvatarLoadingStatus, details: import("@ui-sdk/core").ChangeDetails<import("@ui-sdk/core/avatar").AvatarLoadingStatusChangeReason>) => any) | undefined;
+}, {}, {}, {}, {}, {}>, "span">;
+/**
+ * A real <img>, hidden until it loads. Every image attribute passes through,
+ * like `crossorigin`, `referrerpolicy`, `srcset` and `sizes`.
+ * @stable
+ */
+declare const AvatarImage: 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/avatar").AvatarState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/avatar").AvatarPrimitive, "image">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "img">;
+/**
+ * Shown while there's no loaded image, after its `delay`.
+ * @stable
+ */
+declare const AvatarFallback: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/avatar").AvatarFallbackProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/avatar").AvatarState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/avatar").AvatarFallbackProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/avatar").AvatarState>>>, "span">;
+export { Avatar, AvatarFallback, AvatarImage };
+export type { AvatarFallbackProps, AvatarLoadingStatus, AvatarLoadingStatusChangeReason, AvatarOptions, AvatarPrimitive, AvatarState, } from "@ui-sdk/core/avatar";

package/dist/avatar.js

@@ -0,0 +1,28 @@
+// src/avatar.ts
+import { avatar } from "@ui-sdk/core/avatar";
+import { defineComponent } from "vue";
+import { createParts, withElement } from "./create-parts.js";
+import { usePart } from "./use-primitive.js";
+var parts = createParts(avatar, { root: "span", fallback: "span" });
+var Avatar = parts.Root;
+var AvatarImage = withElement(
+  "img",
+  defineComponent({
+    name: "AvatarImage",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { attrs }) {
+      const sourcesLast = () => {
+        const { src, srcset, ...rest } = attrs;
+        return { ...rest, srcset, src };
+      };
+      return usePart(avatar, "image", void 0, sourcesLast, "img");
+    }
+  })
+);
+var AvatarFallback = parts.Fallback;
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+};

package/dist/button.d.ts

@@ -0,0 +1,52 @@
+import { type ButtonActionDetails } from "@ui-sdk/core/button";
+import { type PropType } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+/**
+ * A button, or a link or any element that acts as one through the `render` slot.
+ * @stable
+ */
+declare const Button: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    focusableWhenDisabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    type: PropType<"button" | "submit" | "reset">;
+    pendingAnnouncement: StringConstructor;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    onClick: PropType<(event: MouseEvent, details: ButtonActionDetails) => unknown>;
+}>, (() => 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/button").ButtonState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    focusableWhenDisabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    type: PropType<"button" | "submit" | "reset">;
+    pendingAnnouncement: StringConstructor;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    onClick: PropType<(event: MouseEvent, details: ButtonActionDetails) => unknown>;
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    debug: boolean;
+    focusableWhenDisabled: boolean;
+}, PartSlots<import("@ui-sdk/core/button").ButtonPrimitive, "root">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "button">;
+export { Button };
+export type { ButtonActionDetails, ButtonApi, ButtonOptions, ButtonPrimitive, ButtonState, } from "@ui-sdk/core/button";

package/dist/button.js

@@ -0,0 +1,43 @@
+// src/button.ts
+import {
+  button as buttonPrimitive
+} from "@ui-sdk/core/button";
+import { defineComponent } from "vue";
+import { withElement } from "./create-parts.js";
+import {
+  optionalBoolean,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+var Button = withElement(
+  "button",
+  defineComponent({
+    name: "Button",
+    inheritAttrs: false,
+    props: {
+      disabled: optionalBoolean,
+      focusableWhenDisabled: optionalBoolean,
+      type: String,
+      pendingAnnouncement: String,
+      debug: optionalBoolean,
+      // `@click="save"` binds here, so the button gets the handler's Promise and
+      // stays pending until it settles.
+      onClick: Function
+    },
+    slots: Object,
+    setup(props) {
+      const button = usePrimitive(buttonPrimitive, () => ({
+        disabled: props.disabled,
+        focusableWhenDisabled: props.focusableWhenDisabled,
+        type: props.type,
+        pendingAnnouncement: props.pendingAnnouncement,
+        debug: props.debug,
+        action: (event, details) => props.onClick?.(event, details)
+      }));
+      return usePart(button, "root", void 0, void 0, "button");
+    }
+  })
+);
+export {
+  Button
+};

package/dist/calendar-context.d.ts

@@ -0,0 +1,10 @@
+import type { calendar as calendarPrimitive, CalendarGridState } from "@ui-sdk/core/calendar";
+import type { InjectionKey } from "vue";
+import type { PrimitiveHandle } from "./use-primitive.js";
+type CalendarHandle = PrimitiveHandle<typeof calendarPrimitive>;
+declare const CalendarKey: InjectionKey<CalendarHandle>;
+declare const GridKey: InjectionKey<{
+    offset: () => number;
+    state: CalendarGridState;
+}>;
+export { type CalendarHandle, CalendarKey, GridKey };

package/dist/calendar-context.js

@@ -0,0 +1,7 @@
+// src/calendar-context.ts
+var CalendarKey = /* @__PURE__ */ Symbol("calendar");
+var GridKey = /* @__PURE__ */ Symbol("calendar-grid");
+export {
+  CalendarKey,
+  GridKey
+};