@falcon-ui/falcon-ui 1.0.0

package/types/components/table/src/table.d.ts

@@ -0,0 +1,179 @@
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+export type RowData = Record<string, unknown>;
+export type EmitTrigger = 'row-click' | 'selection-change' | 'proxy-set';
+export interface SelectionRowToggleEvent {
+    row: RowData;
+    rowIndex: number;
+    selected: boolean;
+    selectionBefore: RowData[];
+    selectionAfter: RowData[];
+    trigger: Exclude<EmitTrigger, 'proxy-set'>;
+}
+export interface SelectionSingleConflictEvent {
+    reason: 'multiple-selected' | 'select-all-disabled';
+    selection: RowData[];
+}
+export interface CellChangeEvent {
+    rowIndex: number;
+    rowKey: string | number;
+    columnKey: string;
+    path: string;
+    prevValue: unknown;
+    nextValue: unknown;
+    trigger: 'proxy-set';
+}
+export interface RowDragEvent {
+    oldIndex: number | null;
+    newIndex: number | null;
+    row: RowData | null;
+}
+export interface RowOrderChangeEvent {
+    oldIndex: number;
+    newIndex: number;
+    row: RowData;
+    data: RowData[];
+}
+export interface ColumnDragEvent {
+    oldIndex: number | null;
+    newIndex: number | null;
+    columnIndex: number | null;
+}
+export interface ColumnOrderChangeEvent {
+    oldIndex: number;
+    newIndex: number;
+    columnIndex: number;
+    order: number[];
+}
+export interface FlTableExpose {
+    clearSelection: () => void;
+    getSelectionRows: () => RowData[];
+    toggleRowSelection: (row: RowData, selected?: boolean, ignoreSelectable?: boolean) => void;
+    toggleAllSelection: () => void;
+    toggleRowExpansion: (row: RowData, expanded?: boolean) => void;
+    setCurrentRow: (row?: RowData) => void;
+    clearSort: () => void;
+    clearFilter: (columnKeys?: string | string[]) => void;
+    doLayout: () => void;
+    sort: (prop: string, order: 'ascending' | 'descending' | null) => void;
+    scrollTo: {
+        (options: ScrollToOptions): void;
+        (xCoord: number, yCoord?: number): void;
+    };
+    setScrollTop: (top: number) => void;
+    setScrollLeft: (left: number) => void;
+}
+export declare const tableProps: {
+    /**
+     * Enable row click to toggle selection when selection column exists.
+     */
+    readonly selectionRowClick: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /**
+     * Restrict selection to one row in selection-table mode.
+     */
+    readonly selectionSingle: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /**
+     * Enable editable cell mode with proxy intercept for row field assignments.
+     */
+    readonly isEdit: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /**
+     * Maximum proxy depth for nested row fields.
+     */
+    readonly cellProxyMaxDepth: {
+        readonly type: NumberConstructor;
+        readonly default: 4;
+        readonly validator: (value: number) => boolean;
+    };
+    /**
+     * Extend clicked data cells with row and column cross highlight.
+     */
+    readonly crossHighlight: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /**
+     * Enable row drag sorting.
+     */
+    readonly rowDraggable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /**
+     * Enable column drag sorting.
+     */
+    readonly columnDraggable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /**
+     * Which column index should act as row drag handle.
+     */
+    readonly rowDragHandleColumnIndex: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+        readonly validator: (value: number) => boolean;
+    };
+    /**
+     * Field name used as row key in emitted payload.
+     */
+    readonly rowKeyField: {
+        readonly type: StringConstructor;
+        readonly default: "id";
+    };
+    /**
+     * Bound data source. Falls through to ElTable `data`.
+     */
+    readonly data: {
+        readonly type: PropType<RowData[]>;
+        readonly default: () => never[];
+    };
+};
+export declare const tableEmits: {
+    /**
+     * Emit when row click triggers selection toggle.
+     */
+    readonly 'selection-row-toggle': (payload: SelectionRowToggleEvent) => boolean;
+    /**
+     * Emit when single-selection rule conflicts with native selection behavior.
+     */
+    readonly 'selection-single-conflict': (payload: SelectionSingleConflictEvent) => boolean;
+    /**
+     * Emit when proxy-tracked row field value is changed.
+     */
+    readonly 'cell-change': (payload: CellChangeEvent) => boolean;
+    /**
+     * Emit when row drag starts.
+     */
+    readonly 'row-drag-start': (payload: RowDragEvent) => boolean;
+    /**
+     * Emit when row drag ends.
+     */
+    readonly 'row-drag-end': (payload: RowDragEvent) => boolean;
+    /**
+     * Emit when row order has changed.
+     */
+    readonly 'row-order-change': (payload: RowOrderChangeEvent) => boolean;
+    /**
+     * Emit when column drag starts.
+     */
+    readonly 'column-drag-start': (payload: ColumnDragEvent) => boolean;
+    /**
+     * Emit when column drag ends.
+     */
+    readonly 'column-drag-end': (payload: ColumnDragEvent) => boolean;
+    /**
+     * Emit when column order has changed.
+     */
+    readonly 'column-order-change': (payload: ColumnOrderChangeEvent) => boolean;
+};
+export type TableProps = ExtractPublicPropTypes<typeof tableProps>;
+export type TableEmits = typeof tableEmits;
+export type TableExpose = FlTableExpose;

package/types/components/table/src/table.vue.d.ts

@@ -0,0 +1,121 @@
+import type { CellChangeEvent, ColumnDragEvent, ColumnOrderChangeEvent, FlTableExpose, RowData, RowDragEvent, RowOrderChangeEvent, SelectionRowToggleEvent } from './table';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly selectionRowClick: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly selectionSingle: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly isEdit: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly cellProxyMaxDepth: {
+        readonly type: NumberConstructor;
+        readonly default: 4;
+        readonly validator: (value: number) => boolean;
+    };
+    readonly crossHighlight: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly rowDraggable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly columnDraggable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly rowDragHandleColumnIndex: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+        readonly validator: (value: number) => boolean;
+    };
+    readonly rowKeyField: {
+        readonly type: StringConstructor;
+        readonly default: "id";
+    };
+    readonly data: {
+        readonly type: import("vue").PropType<RowData[]>;
+        readonly default: () => never[];
+    };
+}>, FlTableExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "selection-row-toggle": (payload: SelectionRowToggleEvent) => void;
+    "selection-single-conflict": (payload: import("@falcon-ui/falcon-ui").SelectionSingleConflictEvent) => void;
+    "cell-change": (payload: CellChangeEvent) => void;
+    "row-drag-start": (payload: RowDragEvent) => void;
+    "row-drag-end": (payload: RowDragEvent) => void;
+    "row-order-change": (payload: RowOrderChangeEvent) => void;
+    "column-drag-start": (payload: ColumnDragEvent) => void;
+    "column-drag-end": (payload: ColumnDragEvent) => void;
+    "column-order-change": (payload: ColumnOrderChangeEvent) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly selectionRowClick: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly selectionSingle: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly isEdit: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly cellProxyMaxDepth: {
+        readonly type: NumberConstructor;
+        readonly default: 4;
+        readonly validator: (value: number) => boolean;
+    };
+    readonly crossHighlight: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly rowDraggable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly columnDraggable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly rowDragHandleColumnIndex: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+        readonly validator: (value: number) => boolean;
+    };
+    readonly rowKeyField: {
+        readonly type: StringConstructor;
+        readonly default: "id";
+    };
+    readonly data: {
+        readonly type: import("vue").PropType<RowData[]>;
+        readonly default: () => never[];
+    };
+}>> & Readonly<{
+    "onSelection-row-toggle"?: ((payload: SelectionRowToggleEvent) => any) | undefined;
+    "onSelection-single-conflict"?: ((payload: import("@falcon-ui/falcon-ui").SelectionSingleConflictEvent) => any) | undefined;
+    "onCell-change"?: ((payload: CellChangeEvent) => any) | undefined;
+    "onRow-drag-start"?: ((payload: RowDragEvent) => any) | undefined;
+    "onRow-drag-end"?: ((payload: RowDragEvent) => any) | undefined;
+    "onRow-order-change"?: ((payload: RowOrderChangeEvent) => any) | undefined;
+    "onColumn-drag-start"?: ((payload: ColumnDragEvent) => any) | undefined;
+    "onColumn-drag-end"?: ((payload: ColumnDragEvent) => any) | undefined;
+    "onColumn-order-change"?: ((payload: ColumnOrderChangeEvent) => any) | undefined;
+}>, {
+    readonly data: RowData[];
+    readonly selectionRowClick: boolean;
+    readonly selectionSingle: boolean;
+    readonly isEdit: boolean;
+    readonly cellProxyMaxDepth: number;
+    readonly crossHighlight: boolean;
+    readonly rowDraggable: boolean;
+    readonly columnDraggable: boolean;
+    readonly rowDragHandleColumnIndex: number;
+    readonly rowKeyField: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/types/components/tree/index.d.ts

@@ -0,0 +1,5 @@
+import type { SFCWithInstall } from '@falcon-ui/falcon-ui/utils';
+import Tree from './src/tree.vue';
+export declare const FlTree: SFCWithInstall<typeof Tree>;
+export default FlTree;
+export type { TreeClassNames, TreeClassValue, TreeCheckArgs, TreeCheckEvent, TreeCheckedKeys, TreeCheckedKeysObject, TreeData, TreeFilterTreeNode, TreeAllowDrag, TreeAllowDrop, TreeAllowDropType, TreeEmits, TreeExpandEvent, TreeExpose, TreeIndex, TreeInteractionEvent, TreeKey, TreeLoadArgs, TreeLoadData, TreeLoadEvent, TreeNode, TreeNodeClickArgs, TreeNodeClassName, TreeNodeClassNameInfo, TreeNodeDblclickArgs, TreeNodeDragEndArgs, TreeNodeDragStartArgs, TreeNodeDragTargetArgs, TreeNodeDropArgs, TreeNodeDropType, TreeExpandedNode, TreeNodeRightClickArgs, TreeNodeInstance, TreeNodeModel, TreeNodeProps, TreeSelectArgs, TreeSelectEvent, TreeSwitcherLoadingIcon, TreeSwitcherIconMode, TreeNodeToggleArgs, TreeProps, TreeScrollAlign, TreeScrollToOptions, TreeSemanticDOM, TreeSemanticRecord, TreeShowLine, TreeShowLineOptions, TreeStyles } from './src/tree';

package/types/components/tree/src/tree-node.vue.d.ts

@@ -0,0 +1,88 @@
+import { type CSSProperties } from 'vue';
+import { type TreeData, type TreeClassValue, type TreeInteractionEvent, type TreeKey, type TreeNode, type TreeNodeClassName, type TreeNodeDropType, type TreeNodeInstance, type TreeNodeModel, type TreeSemanticRecord, type TreeSwitcherLoadingIcon, type TreeSwitcherIconMode } from './tree';
+interface TreeNodeDragTargetHandlerOptions {
+    node: TreeNodeModel;
+    event: DragEvent;
+    element: HTMLElement;
+}
+interface TreeNodeDragHandlerOptions {
+    node: TreeNodeModel;
+    event: DragEvent;
+}
+/**
+ * 内部节点组件只接收标准化节点和主入口下发的树状态能力。
+ */
+interface TreeNodeComponentProps {
+    node: TreeNodeModel;
+    getNodeId: (nodeKey: TreeKey) => string;
+    registerNodeElement: (nodeKey: TreeKey, element: HTMLElement | null) => void;
+    unregisterNodeElement: (nodeKey: TreeKey, element: HTMLElement | null) => void;
+    onNodeContentClick: (options: {
+        node: TreeNodeModel;
+        component: TreeNodeInstance;
+        event: TreeInteractionEvent;
+    }) => void;
+    onNodeContentDblclick: (options: {
+        node: TreeNodeModel;
+        component: TreeNodeInstance;
+        event: MouseEvent;
+    }) => void;
+    onNodeContentContextmenu: (options: {
+        node: TreeNodeModel;
+        component: TreeNodeInstance;
+        event: MouseEvent;
+    }) => void;
+    isNodeExpanded: (nodeKey: TreeKey) => boolean;
+    isNodeChecked: (nodeKey: TreeKey) => boolean;
+    isNodeHalfChecked: (nodeKey: TreeKey) => boolean;
+    isNodeSelected: (nodeKey: TreeKey) => boolean;
+    isNodeFocused: (nodeKey: TreeKey) => boolean;
+    isNodeFiltered: (node: TreeNodeModel) => boolean;
+    isNodeLoading: (nodeKey: TreeKey) => boolean;
+    isNodeExpandable: (node: TreeNodeModel) => boolean;
+    isNodeDraggable: (node: TreeNodeModel) => boolean;
+    isNodeDragging: (nodeKey: TreeKey) => boolean;
+    isNodeDropTarget: (nodeKey: TreeKey) => boolean;
+    isNodeDropAllowed: (nodeKey: TreeKey) => boolean;
+    getNodeDropType: (nodeKey: TreeKey) => TreeNodeDropType | undefined;
+    treeCheckable: boolean;
+    treeSelectable: boolean;
+    showLine: boolean;
+    showLeafIcon: boolean;
+    switcherIcon: TreeSwitcherIconMode;
+    switcherLoadingIcon: TreeSwitcherLoadingIcon;
+    isCheckboxDisabled: (node: TreeNodeModel) => boolean;
+    shouldRenderCheckbox: (node: TreeNodeModel) => boolean;
+    toggleNodeChecked: (options: {
+        node: TreeNodeModel;
+        event: TreeInteractionEvent;
+    }) => void;
+    toggleNodeExpansion: (options: {
+        node: TreeNodeModel;
+        instance: TreeNodeInstance;
+    }) => void;
+    handleNodeDragStart: (options: TreeNodeDragHandlerOptions) => void;
+    handleNodeDragEnter: (options: TreeNodeDragTargetHandlerOptions) => void;
+    handleNodeDragOver: (options: TreeNodeDragTargetHandlerOptions) => void;
+    handleNodeDragLeave: (options: TreeNodeDragTargetHandlerOptions) => void;
+    handleNodeDrop: (options: TreeNodeDragTargetHandlerOptions) => void;
+    handleNodeDragEnd: (options: TreeNodeDragHandlerOptions) => void;
+    resolvedClassNames: TreeSemanticRecord<TreeClassValue>;
+    nodeClassName?: TreeNodeClassName;
+    resolvedStyles: TreeSemanticRecord<CSSProperties>;
+}
+type __VLS_Slots = {
+    default?: (props: {
+        node: TreeNode;
+        data: TreeData;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<TreeNodeComponentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TreeNodeComponentProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/components/tree/src/tree-types.d.ts

@@ -0,0 +1,90 @@
+/**
+ * 树节点主键仅允许字符串或数字，避免首版引入额外的键值归一成本。
+ */
+export type TreeKey = string | number;
+/**
+ * 展开器视觉模式在阶段 11 固定为三档枚举，后续异步加载阶段可复用同一模式定义。
+ */
+export type TreeSwitcherIconMode = 'arrow' | 'plus-minus' | 'folder';
+export interface TreeShowLineOptions {
+    showLeafIcon?: boolean;
+}
+export type TreeShowLine = boolean | TreeShowLineOptions;
+/**
+ * 原始树节点允许保留业务字段，但 `key` 始终是必填字段。
+ */
+export interface TreeData {
+    key: TreeKey;
+    children?: TreeData[];
+    isLeaf?: boolean;
+    [key: string]: unknown;
+}
+/**
+ * 字段映射只负责把业务数据结构转换为树节点结构。
+ */
+export interface TreeNodeProps {
+    label?: string;
+    children?: string;
+    isLeaf?: string;
+}
+/**
+ * 语义化 DOM 名称仅覆盖 Tree 自身长期稳定持有的外壳结构。
+ */
+export type TreeSemanticDOM = 'root' | 'item';
+/**
+ * 语义化记录同时服务于 `classNames` 与 `styles`。
+ */
+export type TreeSemanticRecord<T> = Partial<Record<TreeSemanticDOM, T>>;
+/**
+ * 支持字符串、数组和对象三种 Vue class 绑定形式。
+ */
+export type TreeClassValue = string | string[] | Record<string, boolean>;
+/**
+ * 标准化节点是内部递归渲染骨架使用的统一结构。
+ */
+export interface TreeNodeModel {
+    key: TreeKey;
+    level: number;
+    data: TreeData;
+    label: string;
+    disabled: boolean;
+    selectable: boolean;
+    checkboxDisabled: boolean;
+    checkboxVisible: boolean;
+    isLeaf: boolean;
+    isLastSibling: boolean;
+    lineTrackEnds: boolean[];
+    parent: TreeNodeModel | null;
+    childNodes: TreeNodeModel[];
+}
+/**
+ * 对外事件中的节点对象按字段级兼容 Element Plus Node。
+ */
+export interface TreeNode {
+    key: TreeKey;
+    level: number;
+    data: TreeData;
+    label: string;
+    disabled: boolean;
+    selectable: boolean;
+    checkboxDisabled: boolean;
+    checkboxVisible: boolean;
+    isLeaf: boolean;
+    parent: TreeNode | null;
+    childNodes: TreeNode[];
+}
+export interface TreeNodeClassNameInfo {
+    node: TreeNode;
+    data: TreeData;
+}
+export type TreeNodeClassName = (info: TreeNodeClassNameInfo) => TreeClassValue | undefined;
+/**
+ * 树索引为后续展开、选择、勾选等交互能力提供基础结构。
+ */
+export interface TreeIndex {
+    nodes: TreeNodeModel[];
+    keyNodeMap: Map<TreeKey, TreeNodeModel>;
+    parentKeyMap: Map<TreeKey, TreeKey | null>;
+    childrenKeyMap: Map<TreeKey, TreeKey[]>;
+    visibleNodeKeys: TreeKey[];
+}