@lovince/ui-vue 0.0.0-stage → 0.1.0

package/dist/components/navigation-menu.d.ts

@@ -0,0 +1,275 @@
+import { PropType } from 'vue';
+import { Orientation } from '@lovince/ui-headless';
+/**
+ * Site navigation whose sections open panels of links — the WAI-ARIA
+ * disclosure navigation, not an application menu.
+ */
+export declare const NavigationMenuRoot: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    orientation: {
+        type: PropType<Orientation>;
+        default: string;
+    };
+    /** Hover delay before a panel opens, in ms. */
+    openDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Long enough for the pointer to cross from a button onto its panel. */
+    closeDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    'update:modelValue': (value: string) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    orientation: {
+        type: PropType<Orientation>;
+        default: string;
+    };
+    /** Hover delay before a panel opens, in ms. */
+    openDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Long enough for the pointer to cross from a button onto its panel. */
+    closeDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+    orientation: Orientation;
+    openDelay: number;
+    closeDelay: number;
+    modelValue: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const NavigationMenuList: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const NavigationMenuItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    value: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    value: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+    value: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const NavigationMenuTrigger: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly as: {
+        readonly default: "button";
+        readonly type: PropType<string | import('vue').Component>;
+    };
+    readonly asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly as: {
+        readonly default: "button";
+        readonly type: PropType<string | import('vue').Component>;
+    };
+    readonly asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    readonly as: string | import('vue').Component;
+    readonly asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+/**
+ * A panel of links. Rendered after its button, not portalled, so Tab reaches
+ * it in reading order. `anchor="root"` hangs it from the whole bar.
+ */
+export declare const NavigationMenuContent: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    align: {
+        default: string;
+        type: PropType<import('@lovince/ui-headless').Align>;
+        validator: (value: string) => boolean;
+    };
+    anchor: {
+        type: PropType<"trigger" | "root">;
+        default: string;
+    };
+    side: {
+        readonly type: PropType<import('@lovince/ui-headless').Side>;
+        readonly default: "bottom";
+        readonly validator: (value: string) => boolean;
+    };
+    sideOffset: {
+        readonly type: NumberConstructor;
+        readonly default: 4;
+    };
+    collisionPadding: {
+        readonly type: NumberConstructor;
+        readonly default: 8;
+    };
+    avoidCollisions: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    as: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly default: "div";
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').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<{
+    align: {
+        default: string;
+        type: PropType<import('@lovince/ui-headless').Align>;
+        validator: (value: string) => boolean;
+    };
+    anchor: {
+        type: PropType<"trigger" | "root">;
+        default: string;
+    };
+    side: {
+        readonly type: PropType<import('@lovince/ui-headless').Side>;
+        readonly default: "bottom";
+        readonly validator: (value: string) => boolean;
+    };
+    sideOffset: {
+        readonly type: NumberConstructor;
+        readonly default: 4;
+    };
+    collisionPadding: {
+        readonly type: NumberConstructor;
+        readonly default: 8;
+    };
+    avoidCollisions: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    as: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly default: "div";
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+    anchor: "trigger" | "root";
+    side: "top" | "right" | "bottom" | "left";
+    align: "center" | "start" | "end";
+    sideOffset: number;
+    collisionPadding: number;
+    avoidCollisions: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+/** A link: at the top level, or inside a panel. Following one closes the panel. */
+export declare const NavigationMenuLink: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+    active: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/number-field.d.ts

@@ -0,0 +1,202 @@
+import { PropType } from 'vue';
+/**
+ * A number typed or stepped: the WAI-ARIA spinbutton. Typing is free while the
+ * field has focus; the value is read, held within min and max and snapped to
+ * the step when it is committed (blur or Enter).
+ */
+export declare const NumberFieldRoot: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: PropType<number | null>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<number | null>;
+        default: null;
+    };
+    min: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    max: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    locale: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Intl options for how the number is written: units, percent, fraction digits. */
+    formatOptions: {
+        type: PropType<Intl.NumberFormatOptions>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Reads the value aloud: `(value) => '3 guarantors'`. */
+    getValueLabel: {
+        type: PropType<(value: number) => string>;
+        default: undefined;
+    };
+    /** Adds a hidden input so the value submits with a native form. */
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly default: "div";
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    'update:modelValue': (value: number | null) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: PropType<number | null>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<number | null>;
+        default: null;
+    };
+    min: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    max: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    locale: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Intl options for how the number is written: units, percent, fraction digits. */
+    formatOptions: {
+        type: PropType<Intl.NumberFormatOptions>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Reads the value aloud: `(value) => '3 guarantors'`. */
+    getValueLabel: {
+        type: PropType<(value: number) => string>;
+        default: undefined;
+    };
+    /** Adds a hidden input so the value submits with a native form. */
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly default: "div";
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
+}>, {
+    name: string;
+    as: string | import('vue').Component;
+    asChild: boolean;
+    disabled: boolean;
+    min: number;
+    max: number;
+    step: number;
+    locale: string;
+    formatOptions: Intl.NumberFormatOptions;
+    modelValue: number | null;
+    defaultValue: number | null;
+    getValueLabel: (value: number) => string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const NumberFieldInput: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const NumberFieldIncrement: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly as: {
+        readonly default: "button";
+        readonly type: PropType<string | import('vue').Component>;
+    };
+    readonly asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly as: {
+        readonly default: "button";
+        readonly type: PropType<string | import('vue').Component>;
+    };
+    readonly asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    readonly as: string | import('vue').Component;
+    readonly asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const NumberFieldDecrement: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly as: {
+        readonly default: "button";
+        readonly type: PropType<string | import('vue').Component>;
+    };
+    readonly asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly as: {
+        readonly default: "button";
+        readonly type: PropType<string | import('vue').Component>;
+    };
+    readonly asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    readonly as: string | import('vue').Component;
+    readonly asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/pin-input.d.ts

@@ -0,0 +1,174 @@
+import { PropType } from 'vue';
+import { pinCharacters, PinInputType } from '@lovince/ui-headless';
+export { pinCharacters, type PinInputType };
+/**
+ * One box per character of a short code. The value is a plain string with no
+ * gaps; paste and SMS autofill spread across boxes.
+ */
+export declare const PinInputRoot: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    length: {
+        type: NumberConstructor;
+        default: number;
+    };
+    type: {
+        type: PropType<PinInputType>;
+        default: string;
+    };
+    /** Hide the characters, as for a PIN. */
+    mask: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Offer the platform's one-time-code autofill (SMS codes on iOS and Android). */
+    otp: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Adds a hidden input so the code submits with a native form. */
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly default: "div";
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    'update:modelValue': (value: string) => boolean;
+    complete: (value: string) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    length: {
+        type: NumberConstructor;
+        default: number;
+    };
+    type: {
+        type: PropType<PinInputType>;
+        default: string;
+    };
+    /** Hide the characters, as for a PIN. */
+    mask: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Offer the platform's one-time-code autofill (SMS codes on iOS and Android). */
+    otp: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Adds a hidden input so the code submits with a native form. */
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly default: "div";
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{
+    onComplete?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    name: string;
+    length: number;
+    as: string | import('vue').Component;
+    asChild: boolean;
+    invalid: boolean;
+    type: PinInputType;
+    disabled: boolean;
+    mask: boolean;
+    placeholder: string;
+    modelValue: string;
+    defaultValue: string;
+    otp: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const PinInputInput: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+    label: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;