@mantine-vue/core 3.0.0 → 3.2.0

package/lib/components/Tree/FlatTreeNode.vue.d.ts

@@ -0,0 +1,64 @@
+import type { CSSProperties } from 'vue';
+import type { FlatTreeLineState } from './flatten-tree-data/flatten-tree-data';
+import type { RenderNode, TreeNodeData } from './Tree.types';
+import type { TreeController } from './use-tree';
+/**
+ * Props of `FlatTreeNode`.
+ *
+ * Unlike `TreeNode` this component is not recursive: it renders a single row of an
+ * already flattened tree, which is what makes virtualisation possible. Depth is
+ * expressed with an indent and with the connector lines in `linesPath`.
+ */
+export interface FlatTreeNodeProps {
+    /** Data of the node. */
+    node: TreeNodeData;
+    /** Depth of the node, starting at 1. */
+    level: number;
+    /** Value of the parent node, or `null` for a root node. */
+    parent?: string | null;
+    /** Whether the node has children. */
+    hasChildren: boolean;
+    /** Expanded state of the node. */
+    expanded: boolean;
+    /** Controller of the owning tree. */
+    tree: TreeController;
+    /**
+     * If set, the node expands and collapses when it is clicked.
+     *
+     * @default true
+     */
+    expandOnClick?: boolean;
+    /**
+     * If set, the node is selected when it is clicked.
+     *
+     * @default false
+     */
+    selectOnClick?: boolean;
+    /**
+     * If set, the node expands and collapses when `Space` is pressed.
+     *
+     * @default true
+     */
+    expandOnSpace?: boolean;
+    /**
+     * If set, the node is checked and unchecked when `Space` is pressed.
+     *
+     * @default false
+     */
+    checkOnSpace?: boolean;
+    /** Custom markup for the node. */
+    renderNode?: RenderNode;
+    /** Inline style applied to the row, used by the virtualiser for positioning. */
+    style?: CSSProperties;
+    /**
+     * `tabindex` of the row. Only one row of the tree should be in the tab order.
+     *
+     * @default -1
+     */
+    tabIndex?: number;
+    /** Connector line state for each ancestor level. */
+    linesPath?: FlatTreeLineState[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<FlatTreeNodeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlatTreeNodeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/lib/components/Tree/Tree.d.ts

@@ -1,242 +1,9 @@
-import { type Component, type PropType, type SlotsType, type VNodeChild } from 'vue';
-import { type BoxProps } from '../../core';
-import type { TreeDragDropPayload } from './move-tree-node/move-tree-node';
-import type { TreeAllowDrop, TreeDragHandleProps } from './use-tree-node-drag-drop';
-import { type TreeController } from './use-tree';
-export interface TreeNodeData {
-    label: VNodeChild | (() => VNodeChild);
-    value: string;
-    nodeProps?: Record<string, any>;
-    children?: TreeNodeData[];
-    hasChildren?: boolean;
-}
-export interface RenderTreeNodePayload {
-    level: number;
-    expanded: boolean;
-    hasChildren: boolean;
-    selected: boolean;
-    isRoot: boolean;
-    isLoading: boolean;
-    loadError: Error | null;
-    node: TreeNodeData;
-    tree: TreeController;
-    elementProps: Record<string, any>;
-    dragHandleProps: TreeDragHandleProps | undefined;
-}
-export type RenderNode = (payload: RenderTreeNodePayload) => VNodeChild;
-export type TreeStylesNames = 'root' | 'node' | 'subtree' | 'label';
-export type TreeCssVariables = {
-    root: '--level-offset';
-};
-export interface TreeDragState {
-    draggedValue: string | null;
-    currentDropTarget: HTMLElement | null;
-}
-export interface TreeProps extends BoxProps {
-    data: TreeNodeData[];
-    levelOffset?: string | number;
-    expandOnClick?: boolean;
-    expandOnSpace?: boolean;
-    checkOnSpace?: boolean;
-    selectOnClick?: boolean;
-    tree?: TreeController;
-    renderNode?: RenderNode;
-    clearSelectionOnOutsideClick?: boolean;
-    allowRangeSelection?: boolean;
-    keepMounted?: boolean;
-    onDragDrop?: (payload: TreeDragDropPayload) => void;
-    allowDrop?: TreeAllowDrop;
-    withDragHandle?: boolean;
-    withLines?: boolean;
-}
-export type TreeFactory = any;
-export interface TreeSlots {
-    default?: () => VNodeChild;
-    node?: (payload: RenderTreeNodePayload) => VNodeChild;
-    renderNode?: (payload: RenderTreeNodePayload) => VNodeChild;
-}
-export declare const Tree: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    component: {
-        type: PropType<string | Component>;
-        default: string;
-    };
-    data: {
-        type: PropType<TreeNodeData[]>;
-        required: true;
-    };
-    levelOffset: {
-        type: PropType<string | number>;
-        default: string;
-    };
-    expandOnClick: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    expandOnSpace: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    checkOnSpace: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    selectOnClick: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    tree: {
-        type: PropType<TreeController>;
-        default: undefined;
-    };
-    renderNode: {
-        type: PropType<RenderNode>;
-        default: undefined;
-    };
-    clearSelectionOnOutsideClick: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    allowRangeSelection: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    keepMounted: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onDragDrop: {
-        type: PropType<(payload: TreeDragDropPayload) => void>;
-        default: undefined;
-    };
-    allowDrop: {
-        type: PropType<TreeAllowDrop>;
-        default: undefined;
-    };
-    withDragHandle: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withLines: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    classNames: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    styles: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    vars: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, () => 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<{
-    component: {
-        type: PropType<string | Component>;
-        default: string;
-    };
-    data: {
-        type: PropType<TreeNodeData[]>;
-        required: true;
-    };
-    levelOffset: {
-        type: PropType<string | number>;
-        default: string;
-    };
-    expandOnClick: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    expandOnSpace: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    checkOnSpace: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    selectOnClick: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    tree: {
-        type: PropType<TreeController>;
-        default: undefined;
-    };
-    renderNode: {
-        type: PropType<RenderNode>;
-        default: undefined;
-    };
-    clearSelectionOnOutsideClick: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    allowRangeSelection: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    keepMounted: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onDragDrop: {
-        type: PropType<(payload: TreeDragDropPayload) => void>;
-        default: undefined;
-    };
-    allowDrop: {
-        type: PropType<TreeAllowDrop>;
-        default: undefined;
-    };
-    withDragHandle: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withLines: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    classNames: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    styles: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    vars: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    classNames: Function | Record<string, any>;
-    styles: Function | Record<string, any>;
-    keepMounted: boolean;
-    component: string | Component;
-    vars: Function | Record<string, any>;
-    unstyled: boolean;
-    expandOnClick: boolean;
-    renderNode: RenderNode;
-    selectOnClick: boolean;
-    allowRangeSelection: boolean;
-    expandOnSpace: boolean;
-    checkOnSpace: boolean;
-    onDragDrop: (payload: TreeDragDropPayload) => void;
-    allowDrop: TreeAllowDrop;
-    withDragHandle: boolean;
-    levelOffset: string | number;
-    tree: import("./use-tree").UseTreeReturnType;
-    clearSelectionOnOutsideClick: boolean;
-    withLines: boolean;
-}, SlotsType<TreeSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export declare const Tree: import("../..").MantineComponent<{
+    props: Omit<import("./Tree.types").TreeProps, "rootRef">;
+    ref: HTMLUListElement;
+    slots: import("./Tree.types").TreeSlots;
+    element: "ul";
+    stylesNames: import("./Tree.types").TreeStylesNames;
+    vars: import("./Tree.types").TreeCssVariables;
+}>;
+export type { RenderNode, RenderTreeNodePayload, TreeCssVariables, TreeDragState, TreeFactory, TreeNodeData, TreeOwnProps, TreeProps, TreeSlots, TreeStylesNames, } from './Tree.types';

package/lib/components/Tree/Tree.types.d.ts

@@ -0,0 +1,154 @@
+import type { Component, VNodeChild } from 'vue';
+import type { BoxProps, StylesApiProps, Factory } from '../../core';
+import type { TreeAllowDrop, TreeDragHandleProps } from './use-tree-node-drag-drop';
+import type { TreeController } from './use-tree';
+export interface TreeNodeData {
+    /** Content rendered as the node label. */
+    label: VNodeChild | (() => VNodeChild);
+    /** Value of the node. Must be unique across the whole tree. */
+    value: string;
+    /** Props passed down to the node element. */
+    nodeProps?: Record<string, any>;
+    /** Child nodes. */
+    children?: TreeNodeData[];
+    /** Marks the node as expandable before its children have been loaded. */
+    hasChildren?: boolean;
+}
+/** Payload passed to `renderNode` and to the `node` slot. */
+export interface RenderTreeNodePayload {
+    /** Depth of the node, starting at 1 for the root nodes. */
+    level: number;
+    /** Expanded state of the node. */
+    expanded: boolean;
+    /** Whether the node has children, including children that have not loaded yet. */
+    hasChildren: boolean;
+    /** Selected state of the node. */
+    selected: boolean;
+    /** Whether the node is one of the root nodes. */
+    isRoot: boolean;
+    /** Whether the children of the node are currently loading. */
+    isLoading: boolean;
+    /** Error thrown while the children of the node were loading. */
+    loadError: Error | null;
+    /** Data of the node. */
+    node: TreeNodeData;
+    /** Controller of the tree the node belongs to. */
+    tree: TreeController;
+    /** Props that must be spread onto the element rendered for the node. */
+    elementProps: Record<string, any>;
+    /** Props for the drag handle. Only set when `withDragHandle` is set. */
+    dragHandleProps: TreeDragHandleProps | undefined;
+}
+export type RenderNode = (payload: RenderTreeNodePayload) => VNodeChild;
+export type TreeStylesNames = 'root' | 'node' | 'subtree' | 'label';
+export type TreeCssVariables = {
+    root: '--level-offset';
+};
+/** Drag and drop state shared with every node of the tree. */
+export interface TreeDragState {
+    /** Value of the node currently being dragged. */
+    draggedValue: string | null;
+    /** Element the dragged node is currently hovering over. */
+    currentDropTarget: HTMLElement | null;
+}
+export type TreeFactory = Factory<{
+    props: Omit<TreeProps, 'rootRef'>;
+    ref: HTMLUListElement;
+    slots: TreeSlots;
+    element: 'ul';
+    stylesNames: TreeStylesNames;
+    vars: TreeCssVariables;
+}>;
+export interface TreeSlots {
+    /** Unused – nodes are generated from `data`. */
+    default?: () => VNodeChild;
+    /** Custom markup for a node. Alias of `renderNode`. */
+    node?: (payload: RenderTreeNodePayload) => VNodeChild;
+    /** Custom markup for a node. Takes precedence over the `node` slot. */
+    renderNode?: (payload: RenderTreeNodePayload) => VNodeChild;
+}
+/** Props declared by `Tree` itself. See `TreeProps` for the full public type. */
+export interface TreeOwnProps extends StylesApiProps<TreeFactory> {
+    /** Receives the root DOM node. */
+    rootRef?: VueRefTarget<Element>;
+    /**
+     * Element or component rendered as the root.
+     *
+     * @default 'ul'
+     */
+    component?: string | Component;
+    /** Data used to render the nodes. */
+    data: TreeNodeData[];
+    /**
+     * Key of `theme.spacing` or any valid CSS value used to indent each level.
+     *
+     * @default 'lg'
+     */
+    levelOffset?: string | number;
+    /**
+     * If set, a node expands and collapses when it is clicked.
+     *
+     * @default true
+     */
+    expandOnClick?: boolean;
+    /**
+     * If set, the focused node expands and collapses when `Space` is pressed.
+     *
+     * @default true
+     */
+    expandOnSpace?: boolean;
+    /**
+     * If set, the focused node is checked and unchecked when `Space` is pressed.
+     *
+     * @default false
+     */
+    checkOnSpace?: boolean;
+    /**
+     * If set, a node is selected when it is clicked.
+     *
+     * @default false
+     */
+    selectOnClick?: boolean;
+    /** Controller returned by `useTree`. An internal one is created when not set. */
+    tree?: TreeController;
+    /**
+     * Custom markup for a node.
+     * Can also be set with the scoped `renderNode` or `node` slot – the slot takes precedence.
+     */
+    renderNode?: RenderNode;
+    /**
+     * If set, the selection is cleared when a click lands outside the tree.
+     *
+     * @default false
+     */
+    clearSelectionOnOutsideClick?: boolean;
+    /**
+     * If set, a range of nodes can be selected by holding `Shift`.
+     *
+     * @default true
+     */
+    allowRangeSelection?: boolean;
+    /**
+     * If set, the children of collapsed nodes stay mounted.
+     *
+     * @default false
+     */
+    keepMounted?: boolean;
+    /** Decides whether a node may be dropped at a given position. */
+    allowDrop?: TreeAllowDrop;
+    /**
+     * If set, nodes are dragged with a dedicated handle instead of by the node itself.
+     *
+     * @default false
+     */
+    withDragHandle?: boolean;
+    /**
+     * If set, lines connecting a node with its children are rendered.
+     *
+     * @default false
+     */
+    withLines?: boolean;
+}
+import type { VueRefTarget } from '@mantine-vue/hooks';
+export interface TreeProps extends Omit<BoxProps, keyof TreeOwnProps>, TreeOwnProps {
+}

package/lib/components/Tree/Tree.vue.d.ts

@@ -0,0 +1,25 @@
+import type { TreeDragDropPayload } from './move-tree-node/move-tree-node';
+import type { TreeOwnProps, TreeSlots } from './Tree.types';
+import type { TreeNodeData } from './Tree.types';
+/** Module scope: created once, not per component instance. */
+declare const varsResolver: (theme: import("../..").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
+/**
+ * The flat list of every value in tree order. Range selection needs it to work out
+ * which nodes lie between the anchor and the clicked node.
+ */
+declare function getFlatValues(data: TreeNodeData[]): string[];
+export { varsResolver, getFlatValues };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<TreeOwnProps, {
+    rootElement: import("vue").Ref<Element | null, Element | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "drag-drop": (payload: TreeDragDropPayload) => any;
+}, string, import("vue").PublicProps, Readonly<TreeOwnProps> & Readonly<{
+    "onDrag-drop"?: ((payload: TreeDragDropPayload) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, TreeSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/Tree/TreeNode.d.ts

@@ -1,2 +1,2 @@
-import { defineComponent } from 'vue';
-export declare const TreeNode: ReturnType<typeof defineComponent>;
+export { default as TreeNode } from './TreeNode.vue';
+export type { TreeNodeProps } from './TreeNode.vue';

package/lib/components/Tree/TreeNode.vue.d.ts

@@ -0,0 +1,58 @@
+import type { TreeDragDropPayload } from './move-tree-node/move-tree-node';
+import type { TreeAllowDrop } from './use-tree-node-drag-drop';
+import type { TreeController } from './use-tree';
+import type { RenderNode, TreeDragState, TreeNodeData } from './Tree.types';
+/** Props of `TreeNode`. This component is internal to `Tree`. */
+export interface TreeNodeProps {
+    /** Data of the node. */
+    node: TreeNodeData;
+    /** `getStyles` of the owning `Tree`, so every node shares one Styles API instance. */
+    getStyles: any;
+    /** Index among the root nodes. Only the first root node is in the tab order. */
+    rootIndex?: number;
+    /** Controller of the owning tree. */
+    controller: TreeController;
+    /** If set, the node expands and collapses when it is clicked. */
+    expandOnClick?: boolean;
+    /** Every value of the tree in tree order, used to resolve range selections. */
+    flatValues: string[];
+    /** Whether this node is nested inside another node. */
+    isSubtree?: boolean;
+    /** Depth of the node, starting at 1. */
+    level?: number;
+    /** Custom markup for the node. */
+    renderNode?: RenderNode;
+    /** If set, the node is selected when it is clicked. */
+    selectOnClick?: boolean;
+    /** If set, a range of nodes can be selected by holding `Shift`. */
+    allowRangeSelection?: boolean;
+    /** If set, the node expands and collapses when `Space` is pressed. */
+    expandOnSpace?: boolean;
+    /** If set, the node is checked and unchecked when `Space` is pressed. */
+    checkOnSpace?: boolean;
+    /** If set, the children stay mounted while the node is collapsed. */
+    keepMounted?: boolean;
+    /** Called when a node is dropped onto another node. */
+    onDragDrop?: (payload: TreeDragDropPayload) => void;
+    /** Decides whether a node may be dropped at a given position. */
+    allowDrop?: TreeAllowDrop;
+    /** If set, the node is dragged with a dedicated handle. */
+    withDragHandle?: boolean;
+    /** Drag and drop state shared by every node of the tree. */
+    dragState: {
+        value: TreeDragState;
+    };
+    /** Data of the whole tree, needed to resolve drop targets. */
+    data: TreeNodeData[];
+}
+/** Every value between the anchor and the clicked node, in tree order. */
+declare function getValuesRange(anchor: string | null, value: string | undefined, flatValues: string[]): string[];
+/**
+ * `keepMounted` hides collapsed subtrees with `display: none` instead of unmounting
+ * them, so arrow key navigation has to skip anything inside a hidden ancestor.
+ */
+declare function visible(node: HTMLElement, root: Element): boolean;
+export { getValuesRange, visible };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<TreeNodeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TreeNodeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/lib/components/Tree/index.d.ts

@@ -5,7 +5,7 @@ export { mergeAsyncChildren } from './merge-async-children/merge-async-children'
 export { moveTreeNode } from './move-tree-node/move-tree-node';
 export { filterTreeData, defaultTreeNodeFilter } from './filter-tree-data/filter-tree-data';
 export { flattenTreeData } from './flatten-tree-data/flatten-tree-data';
-export type { TreeProps, TreeStylesNames, TreeFactory, TreeCssVariables, TreeNodeData, RenderTreeNodePayload, RenderNode, TreeSlots, } from './Tree';
+export type { TreeOwnProps, TreeProps, TreeDragState, TreeStylesNames, TreeFactory, TreeCssVariables, TreeNodeData, RenderTreeNodePayload, RenderNode, TreeSlots, } from './Tree';
 export type { UseTreeInput, UseTreeReturnType, TreeController, TreeExpandedState } from './use-tree';
 export type { CheckedNodeStatus } from './get-all-checked-nodes/get-all-checked-nodes';
 export type { TreeNodeFilter } from './filter-tree-data/filter-tree-data';