@lovince/ui-vue 0.0.0-stage → 0.1.1

package/dist/components/tooltip.d.ts

@@ -0,0 +1,370 @@
+export declare const TooltipRoot: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    delayDuration: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    openDelay: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    closeDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    'update:open': (value: boolean) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    delayDuration: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    openDelay: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    closeDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    open: boolean;
+    openDelay: number;
+    closeDelay: number;
+    defaultOpen: boolean;
+    delayDuration: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const TooltipTrigger: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: import('vue').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: import('vue').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 TooltipPortal: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    to: {
+        type: import('vue').PropType<string | HTMLElement>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => 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<{
+    to: {
+        type: import('vue').PropType<string | HTMLElement>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    to: string | HTMLElement;
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const TooltipContent: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    side: {
+        default: "top" | "right" | "bottom" | "left";
+        type: import('vue').PropType<import('@lovince/ui-headless').Side>;
+        validator: (value: string) => boolean;
+    };
+    align: {
+        readonly type: import('vue').PropType<import('@lovince/ui-headless').Align>;
+        readonly default: "center";
+        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: import('vue').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<{
+    side: {
+        default: "top" | "right" | "bottom" | "left";
+        type: import('vue').PropType<import('@lovince/ui-headless').Side>;
+        validator: (value: string) => boolean;
+    };
+    align: {
+        readonly type: import('vue').PropType<import('@lovince/ui-headless').Align>;
+        readonly default: "center";
+        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: import('vue').PropType<string | import('vue').Component>;
+        readonly default: "div";
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+    side: "top" | "right" | "bottom" | "left";
+    align: "center" | "start" | "end";
+    sideOffset: number;
+    collisionPadding: number;
+    avoidCollisions: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const HoverCardRoot: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    delayDuration: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    openDelay: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    closeDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    'update:open': (value: boolean) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    delayDuration: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    openDelay: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    closeDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    open: boolean;
+    openDelay: number;
+    closeDelay: number;
+    defaultOpen: boolean;
+    delayDuration: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const HoverCardTrigger: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: import('vue').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: import('vue').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 HoverCardPortal: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    to: {
+        type: import('vue').PropType<string | HTMLElement>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => 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<{
+    to: {
+        type: import('vue').PropType<string | HTMLElement>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    to: string | HTMLElement;
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const HoverCardContent: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    side: {
+        default: "top" | "right" | "bottom" | "left";
+        type: import('vue').PropType<import('@lovince/ui-headless').Side>;
+        validator: (value: string) => boolean;
+    };
+    align: {
+        readonly type: import('vue').PropType<import('@lovince/ui-headless').Align>;
+        readonly default: "center";
+        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: import('vue').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<{
+    side: {
+        default: "top" | "right" | "bottom" | "left";
+        type: import('vue').PropType<import('@lovince/ui-headless').Side>;
+        validator: (value: string) => boolean;
+    };
+    align: {
+        readonly type: import('vue').PropType<import('@lovince/ui-headless').Align>;
+        readonly default: "center";
+        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: import('vue').PropType<string | import('vue').Component>;
+        readonly default: "div";
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+    side: "top" | "right" | "bottom" | "left";
+    align: "center" | "start" | "end";
+    sideOffset: number;
+    collisionPadding: number;
+    avoidCollisions: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/tree.d.ts

@@ -0,0 +1,147 @@
+import { PropType } from 'vue';
+/**
+ * A hierarchy to browse and pick from — the WAI-ARIA tree view. Arrow keys
+ * move through the visible items; Right opens a branch or enters it, Left
+ * closes it or climbs to its parent.
+ */
+export declare const TreeRoot: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    modelValue: {
+        type: PropType<string | string[]>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<string | string[]>;
+        default: undefined;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    expanded: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    defaultExpanded: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    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 | string[] | undefined) => boolean;
+    'update:expanded': (value: string[]) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    modelValue: {
+        type: PropType<string | string[]>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<string | string[]>;
+        default: undefined;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    expanded: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    defaultExpanded: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    "onUpdate:expanded"?: ((value: string[]) => any) | undefined;
+}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+    multiple: boolean;
+    expanded: string[];
+    modelValue: string | string[];
+    defaultValue: string | string[];
+    defaultExpanded: string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const TreeItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+    disabled: {
+        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>;
+    };
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+/** An item's children. Rendered only while the item is open, so closed branches hold no focusable items. */
+export declare const TreeGroup: 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;
+}> | null, {}, {}, {}, 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>;

package/dist/composables/data-table.d.ts

@@ -0,0 +1,25 @@
+import { ComputedRef, Ref } from 'vue';
+import { CardLayout, RowKey, SelectionState, TableColumn, TableSort } from '@lovince/ui-headless';
+export interface DataTableOptions<T extends Readonly<Record<string, unknown>>, C extends TableColumn> {
+    readonly rows: () => readonly T[];
+    readonly columns: () => readonly C[];
+    readonly hidden: () => readonly string[];
+    readonly rowKey: () => string;
+    /** `client` sorts the loaded rows; `server` only reports the sort so the caller can refetch. */
+    readonly sortMode: () => 'client' | 'server';
+    readonly sort: Ref<TableSort | null>;
+    readonly selected: Ref<RowKey[]>;
+}
+export interface DataTable<T, C extends TableColumn> {
+    readonly columns: ComputedRef<C[]>;
+    readonly rows: ComputedRef<T[]>;
+    readonly card: ComputedRef<CardLayout<C>>;
+    readonly pageState: ComputedRef<SelectionState>;
+    readonly keyOf: (row: T, index: number) => RowKey;
+    readonly isSelected: (row: T, index: number) => boolean;
+    readonly toggleRow: (row: T, index: number) => void;
+    readonly togglePage: () => void;
+    readonly toggleSort: (key: string) => void;
+}
+/** State and derivations for a column-driven table, with no markup attached. */
+export declare const useDataTable: <T extends Readonly<Record<string, unknown>>, C extends TableColumn>(options: DataTableOptions<T, C>) => DataTable<T, C>;

package/dist/composables/observers.d.ts

@@ -0,0 +1,42 @@
+import { ComputedRef, Ref } from 'vue';
+import { InViewOptions } from '@lovince/ui-dom';
+import { ScrollAlign, ScrollEdges, VirtualRange } from '@lovince/ui-headless';
+import { ElementRef } from '../shared/element';
+export type { InViewOptions };
+export declare const useInView: (target: ElementRef, options?: InViewOptions) => Ref<boolean>;
+export declare const useScrollEdges: (target: ElementRef) => {
+    readonly edges: Ref<ScrollEdges>;
+    readonly measure: () => void;
+};
+export type ActiveSectionOptions = {
+    /** Where the reading line sits, as a share of the viewport's height. */
+    readonly line?: number;
+};
+export declare const useActiveSection: (ids: () => readonly string[], options?: ActiveSectionOptions) => Ref<string | undefined>;
+export type VirtualListOptions = {
+    readonly count: () => number;
+    /** Every row's height, in pixels. */
+    readonly itemSize: () => number;
+    readonly overscan?: () => number;
+};
+export type VirtualList = {
+    readonly range: ComputedRef<VirtualRange>;
+    /** Scrolls so a row is in view, including one that is not rendered yet. */
+    readonly scrollToIndex: (index: number, align?: ScrollAlign) => void;
+    readonly viewportHeight: Ref<number>;
+};
+/**
+ * Renders only the rows in view of a scrolling container. Without a
+ * measurable container — tests, server rendering — it renders a first screenful.
+ */
+export declare const useVirtualList: (container: ElementRef, options: VirtualListOptions) => VirtualList;
+export type Clipboard = {
+    /** True for a moment after a copy succeeds. */
+    readonly copied: Ref<boolean>;
+    /** True after a copy fails, until the next attempt. */
+    readonly failed: Ref<boolean>;
+    readonly copy: (text: string) => Promise<boolean>;
+};
+export declare const useClipboard: (options?: {
+    readonly resetAfter?: () => number;
+}) => Clipboard;

package/dist/composables/presence.d.ts

@@ -0,0 +1,7 @@
+import { Ref } from 'vue';
+/**
+ * Keeps an element mounted after `open` turns false until its exit animation
+ * ends, so `data-state="closed"` animations can play. With no animation, or
+ * reduced motion, it unmounts at once.
+ */
+export declare const usePresence: (open: () => boolean, element: () => HTMLElement | null) => Ref<boolean>;

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+export { Primitive, Slot, primitiveProps } from './shared/primitive';
+export { Portal } from './shared/portal';
+export { toElement, useIdWatch, type ElementRef } from './shared/element';
+export { normalizeProps, useMachine, type MachineBinding, type UseMachineOptions } from './shared/machine';
+export { useListEnv, type ListBinding } from './shared/list';
+export { floatingProps } from './shared/floating-props';
+export { usePresence } from './composables/presence';
+export { useDataTable, type DataTable, type DataTableOptions } from './composables/data-table';
+export { useActiveSection, useClipboard, useInView, useScrollEdges, useVirtualList, type ActiveSectionOptions, type Clipboard, type InViewOptions, type VirtualList, type VirtualListOptions, } from './composables/observers';
+export { scrollLockCount } from '@lovince/ui-dom';
+export { DisclosureRoot, DisclosureTrigger, DisclosureContent, injectDisclosure } from './components/disclosure';
+export { CheckboxRoot, CheckboxIndicator, SwitchRoot, SwitchThumb } from './components/toggles';
+export { TabsRoot, TabsList, TabsTrigger, TabsContent } from './components/tabs';
+export { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, } from './components/dialog';
+export * from './components/popover';
+export * from './components/tooltip';
+export * from './components/menu';
+export * from './components/select';
+export * from './components/combobox';
+export * from './components/command';
+export * from './components/navigation-menu';
+export * from './components/accordion';
+export * from './components/radio-group';
+export * from './components/toggle-group';
+export * from './components/slider';
+export * from './components/number-field';
+export * from './components/pin-input';
+export * from './components/progress';
+export * from './components/avatar';
+export * from './components/calendar';
+export * from './components/toast';
+export * from './components/splitter';
+export * from './components/tree';
+export * from './components/carousel';
+export * from './components/sortable';
+export * from './components/emoji-picker';
+export type { ActivationMode, CheckedState, DialogRole, Direction, Orientation } from '@lovince/ui-headless';