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

package/dist/autocomplete.d.ts

@@ -0,0 +1,384 @@
+import type { Anchor, ChangeDetails, DismissAttemptDetails, Side } from "@ui-sdk/core";
+import type { AsyncOptionsStatus } from "@ui-sdk/core/async-options";
+import { type AutocompleteController, type AutocompleteDismissReason, type AutocompleteOpenChangeReason, type AutocompleteSubmitDetails, type AutocompleteValueChangeReason, type ListAnnouncement, type ListData, type SearchFilter, type ListHighlightDetails } from "@ui-sdk/core/autocomplete";
+import { type PropType, type VNode } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+type ValueDetails = ChangeDetails<AutocompleteValueChangeReason>;
+type OpenDetails = ChangeDetails<AutocompleteOpenChangeReason>;
+/**
+ * A text field that suggests as you type. The text is the value. Renders no element of its own.
+ * @stable
+ */
+declare const Autocomplete: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    items: PropType<ListData<string>>;
+    emptyItems: PropType<ListData<string>>;
+    announcement: PropType<(change: ListAnnouncement) => string | null | undefined>;
+    filter: {
+        type: PropType<SearchFilter<string>>;
+        default: undefined;
+    };
+    inlineComplete: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    autoHighlight: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    openOnFocus: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    submitOnSelect: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    status: PropType<AsyncOptionsStatus>;
+    loop: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modal: {
+        type: PropType<boolean | "pointer">;
+        default: undefined;
+    };
+    presentation: PropType<"auto" | "popover" | "sheet">;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    name: StringConstructor;
+    form: StringConstructor;
+    controller: PropType<AutocompleteController>;
+    dismissible: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    container: PropType<Element | DocumentFragment | null>;
+}>, () => (false | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined)[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (_value: string) => true;
+    "update:modelValue": (_value: string) => true;
+    valueChange: (_value: string, _details: ValueDetails) => true;
+    "update:open": (_open: boolean) => true;
+    openChange: (_open: boolean, _details: OpenDetails) => true;
+    openChangeComplete: (_open: boolean) => true;
+    dismissAttempt: (_details: DismissAttemptDetails<AutocompleteDismissReason>) => true;
+    submit: (_value: string, _details: AutocompleteSubmitDetails) => true;
+    highlight: (_value: string | null, _details: ListHighlightDetails) => true;
+    loadMore: () => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    items: PropType<ListData<string>>;
+    emptyItems: PropType<ListData<string>>;
+    announcement: PropType<(change: ListAnnouncement) => string | null | undefined>;
+    filter: {
+        type: PropType<SearchFilter<string>>;
+        default: undefined;
+    };
+    inlineComplete: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    autoHighlight: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    openOnFocus: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    submitOnSelect: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    status: PropType<AsyncOptionsStatus>;
+    loop: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modal: {
+        type: PropType<boolean | "pointer">;
+        default: undefined;
+    };
+    presentation: PropType<"auto" | "popover" | "sheet">;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    name: StringConstructor;
+    form: StringConstructor;
+    controller: PropType<AutocompleteController>;
+    dismissible: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    container: PropType<Element | DocumentFragment | null>;
+}>> & Readonly<{
+    onSubmit?: ((_value: string, _details: AutocompleteSubmitDetails) => any) | undefined;
+    onLoadMore?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
+    "onUpdate:open"?: ((_open: boolean) => any) | undefined;
+    onOpenChange?: ((_open: boolean, _details: OpenDetails) => any) | undefined;
+    onOpenChangeComplete?: ((_open: boolean) => any) | undefined;
+    onDismissAttempt?: ((_details: DismissAttemptDetails<AutocompleteDismissReason>) => any) | undefined;
+    "onUpdate:value"?: ((_value: string) => any) | undefined;
+    onValueChange?: ((_value: string, _details: ValueDetails) => any) | undefined;
+    onHighlight?: ((_value: string | null, _details: ListHighlightDetails) => any) | undefined;
+}>, {
+    filter: SearchFilter<string>;
+    value: string;
+    disabled: boolean;
+    open: boolean;
+    debug: boolean;
+    defaultValue: string;
+    required: boolean;
+    loop: boolean;
+    defaultOpen: boolean;
+    modal: boolean | "pointer";
+    dismissible: boolean;
+    readOnly: boolean;
+    inlineComplete: boolean;
+    autoHighlight: boolean;
+    openOnFocus: boolean;
+    submitOnSelect: boolean;
+    modelValue: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * A visible label for the field.
+ * @stable
+ */
+declare const AutocompleteLabel: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, "label">;
+/**
+ * A line between items or groups, hidden from screen readers.
+ * @stable
+ */
+declare const AutocompleteSeparator: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, "div">;
+/**
+ * The text field. It's the form control, so the text submits under the autocomplete's `name`.
+ * @stable
+ */
+declare const AutocompleteInput: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | 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/autocomplete").AutocompletePrimitive, "input">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "input">;
+/**
+ * A button that opens and closes the suggestions, out of the tab order.
+ * @stable
+ */
+declare const AutocompleteTrigger: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/autocomplete").AutocompleteInputState>>>, 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/autocomplete").AutocompleteInputState>>>, "button">;
+/**
+ * A button that empties the field. Shown while there's text to clear. Name it with `aria-label`.
+ * @stable
+ */
+declare const AutocompleteClear: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/autocomplete").AutocompleteClearProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/autocomplete").AutocompleteClearState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/autocomplete").AutocompleteClearProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/autocomplete").AutocompleteClearState>>>, "button">;
+/**
+ * The popup that holds the suggestions, positioned against the field.
+ * @stable
+ */
+declare const AutocompleteContent: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    side: PropType<Side>;
+    align: PropType<"start" | "center" | "end">;
+    sideOffset: NumberConstructor;
+    alignOffset: NumberConstructor;
+    collisionPadding: NumberConstructor;
+    arrowPadding: NumberConstructor;
+    anchor: PropType<Anchor | string | null>;
+    keepMounted: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    container: PropType<Element | DocumentFragment | null>;
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | 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<{
+    side: PropType<Side>;
+    align: PropType<"start" | "center" | "end">;
+    sideOffset: NumberConstructor;
+    alignOffset: NumberConstructor;
+    collisionPadding: NumberConstructor;
+    arrowPadding: NumberConstructor;
+    anchor: PropType<Anchor | string | null>;
+    keepMounted: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    container: PropType<Element | DocumentFragment | null>;
+}>> & Readonly<{}>, {
+    keepMounted: boolean;
+}, PartSlots<import("@ui-sdk/core/autocomplete").AutocompletePrimitive, "content">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * The listbox. Without content, it renders the autocomplete's `items`, filtered.
+ * @stable
+ */
+declare const AutocompleteList: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/autocomplete").AutocompleteContentState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/autocomplete").AutocompletePrimitive, "list">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * A suggestion. Choosing it fills the field in with its text.
+ * @stable
+ */
+declare const AutocompleteItem: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/renderer").AutocompleteItemMeta> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/autocomplete").AutocompleteItemState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/renderer").AutocompleteItemMeta> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/autocomplete").AutocompleteItemState>>>, "div">;
+/**
+ * The suggestion's text, with the part the field's text matched in `<mark>`. Without text content, it shows the suggestion's label.
+ * @stable
+ */
+declare const AutocompleteItemText: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | 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/autocomplete").AutocompletePrimitive, "item-text">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "span">;
+/**
+ * An icon inside a suggestion. Screen readers, typeahead and filtering
+ * skip it, and `mirror` flips it in right-to-left text.
+ * @stable
+ */
+declare const AutocompleteItemIcon: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/renderer").ItemIconProps & {
+    item?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<{
+    mirror: boolean;
+}>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/renderer").ItemIconProps & {
+    item?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<{
+    mirror: boolean;
+}>>>, "span">;
+/**
+ * A group of items, named by its `AutocompleteGroupLabel`, and hidden while none of its items shows.
+ * @stable
+ */
+declare const AutocompleteGroup: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, "div">;
+/**
+ * The group's heading, which names the group.
+ * @stable
+ */
+declare const AutocompleteGroupLabel: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    group?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    group?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, "div">;
+/**
+ * Shown while no suggestion matches. Its message is announced when it appears.
+ * @stable
+ */
+declare const AutocompleteEmpty: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<{
+        loading: boolean;
+        empty: boolean;
+        query: string;
+    }>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/autocomplete").AutocompletePrimitive, "empty">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * A polite live region for loading and result counts. Its content is yours, from the default slot's state.
+ * @stable
+ */
+declare const AutocompleteStatus: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<{
+    status: AsyncOptionsStatus;
+    loading: boolean;
+    count: number;
+}>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<{
+    status: AsyncOptionsStatus;
+    loading: boolean;
+    count: number;
+}>>>, "div">;
+/**
+ * An arrow on the popup's edge that points at the field.
+ * @stable
+ */
+declare const AutocompleteArrow: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/autocomplete").AutocompleteArrowState>>>, 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/autocomplete").AutocompleteArrowState>>>, "div">;
+/**
+ * Renders data suggestions. Used by data autocompletes, and available for custom layouts.
+ * @stable
+ */
+declare const AutocompleteItems: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    items: {
+        type: PropType<ListData<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<ListData<string>>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export { createAutocompleteController } from "@ui-sdk/core/autocomplete";
+export type { AutocompleteApi, AutocompleteArrowState, AutocompleteChangeOptions, AutocompleteClearProps, AutocompleteClearState, AutocompleteContentProps, AutocompleteContentState, AutocompleteController, AutocompleteDismissReason, AutocompleteEmptyState, AutocompleteInputState, AutocompleteItemIconProps, AutocompleteItemIconState, AutocompleteItemProps, AutocompleteItemState, AutocompleteItemTextState, AutocompleteOpenChangeReason, AutocompleteOptions, AutocompletePrimitive, AutocompleteStatusState, AutocompleteSubmitDetails, AutocompleteTriggerState, AutocompleteValueChangeReason, ListAnnouncement, ListData, ListFilter, ListGroup, ListHighlightDetails, ListItem, ListSeparator, MatchSegment, SearchFilter, } from "@ui-sdk/core/autocomplete";
+export { Autocomplete, AutocompleteArrow, AutocompleteClear, AutocompleteContent, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteItem, AutocompleteItemIcon, AutocompleteItems, AutocompleteItemText, AutocompleteLabel, AutocompleteList, AutocompleteSeparator, AutocompleteStatus, AutocompleteTrigger, };