@antdv-vue/pro-table 0.0.0-stage → 2.0.3

package/dist/components/ToolBar/FullScreenIcon.js

@@ -0,0 +1,30 @@
+import { createVNode, defineComponent } from "vue";
+import { useIntl } from "@antdv-vue/pro-provider";
+import { isBrowser, useEffect, useState } from "@antdv-vue/pro-utils";
+import { Tooltip } from "antdv-next";
+import { FullscreenExitOutlined, FullscreenOutlined } from "@antdv-next/icons";
+//#region src/components/ToolBar/FullScreenIcon.tsx
+const FullScreenIcon = /* @__PURE__ */ defineComponent(() => {
+	const intl = useIntl();
+	const [fullscreen, setFullscreen] = useState(false);
+	useEffect(() => {
+		if (!isBrowser()) return;
+		document.onfullscreenchange = () => {
+			setFullscreen(!!document.fullscreenElement);
+		};
+	}, []);
+	return () => {
+		return fullscreen.value ? createVNode(Tooltip, { "title": intl.value.getMessage({
+			id: "tableToolBar.exitFullScreen",
+			defaultMessage: "全屏"
+		}) }, { default: () => [createVNode(FullscreenExitOutlined, null, null)] }) : createVNode(Tooltip, { "title": intl.value.getMessage({
+			id: "tableToolBar.fullScreen",
+			defaultMessage: "全屏"
+		}) }, { default: () => [createVNode(FullscreenOutlined, null, null)] });
+	};
+}, {
+	name: "FullScreenIcon",
+	inheritAttrs: false
+});
+//#endregion
+export { FullScreenIcon as default };

package/dist/components/ToolBar/HeaderMenu.d.ts

@@ -0,0 +1,22 @@
+import * as _$vue from "vue";
+import { Key, VueNode } from "@antdv-vue/pro-utils";
+
+//#region src/components/ToolBar/HeaderMenu.d.ts
+interface ToolBarMenuItem {
+  key: Key;
+  label: VueNode;
+  disabled?: boolean;
+}
+interface ToolBarHeaderMenuProps {
+  type?: 'inline' | 'dropdown' | 'tab';
+  activeKey?: Key;
+  defaultActiveKey?: Key;
+  items?: ToolBarMenuItem[];
+  onChange?: (activeKey?: Key) => void;
+  prefixCls?: string;
+  hashId?: string;
+  cssVarCls?: string;
+}
+declare const HeaderMenu: _$vue.DefineSetupFnComponent<ToolBarHeaderMenuProps, {}, {}, ToolBarHeaderMenuProps & {}, _$vue.PublicProps>;
+//#endregion
+export { ToolBarHeaderMenuProps, ToolBarMenuItem, HeaderMenu as default };

package/dist/components/ToolBar/HeaderMenu.js

@@ -0,0 +1,84 @@
+import { createVNode, defineComponent, toRef } from "vue";
+import { classNames, useMergedState } from "@v-c/util";
+import { Dropdown, Space, Tabs } from "antdv-next";
+import { DownOutlined } from "@antdv-next/icons";
+//#region src/components/ToolBar/HeaderMenu.tsx
+const HeaderMenu = /* @__PURE__ */ defineComponent((props) => {
+	const [activeKey, setActiveKey] = useMergedState(props.activeKey || props.defaultActiveKey, {
+		value: toRef(() => props.activeKey),
+		onChange: props.onChange
+	});
+	return () => {
+		const { items = [], hashId, cssVarCls, type = "inline", prefixCls } = props;
+		if (items.length < 1) return null;
+		const activeItem = items.find((item) => {
+			return item.key === activeKey.value;
+		}) || items[0];
+		if (type === "inline") return createVNode("div", { "class": classNames(`${prefixCls}-menu`, `${prefixCls}-inline-menu`, hashId, cssVarCls) }, [items.map((item, index) => createVNode("div", {
+			"key": item.key || index,
+			"onClick": () => setActiveKey(item.key),
+			"class": classNames(`${prefixCls}-inline-menu-item`, activeItem?.key === item.key ? `${prefixCls}-inline-menu-item-active` : void 0, hashId, cssVarCls)
+		}, [item.label]))]);
+		if (type === "tab") return createVNode(Tabs, {
+			"activeKey": activeItem?.key,
+			"items": items.map((item) => ({
+				...item,
+				key: item.key?.toString()
+			})),
+			"onTabClick": (key) => setActiveKey(key)
+		}, null);
+		return createVNode("div", { "class": classNames(`${prefixCls}-menu`, `${prefixCls}-dropdownmenu`, hashId, cssVarCls) }, [createVNode(Dropdown, {
+			"trigger": ["click"],
+			"menu": {
+				selectedKeys: [activeItem?.key],
+				onClick: (item) => {
+					setActiveKey(item.key);
+				},
+				items: items.map((item, index) => ({
+					key: item.key || index,
+					disabled: item.disabled,
+					label: item.label
+				}))
+			}
+		}, { default: () => createVNode(Space, { "class": classNames(`${prefixCls}-dropdownmenu-label`, hashId, cssVarCls) }, { default: () => [activeItem?.label, createVNode(DownOutlined, null, null)] }) })]);
+	};
+}, {
+	props: {
+		type: {
+			type: String,
+			required: false
+		},
+		activeKey: {
+			type: [String, Number],
+			required: false
+		},
+		defaultActiveKey: {
+			type: [String, Number],
+			required: false
+		},
+		items: {
+			type: Array,
+			required: false
+		},
+		onChange: {
+			type: Function,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		hashId: {
+			type: String,
+			required: false
+		},
+		cssVarCls: {
+			type: String,
+			required: false
+		}
+	},
+	name: "ToolBarHeaderMenu",
+	inheritAttrs: false
+});
+//#endregion
+export { HeaderMenu as default };

package/dist/components/ToolBar/index.d.ts

@@ -0,0 +1,102 @@
+import { OptionsRender, ToolBarRender } from "../../RenderTypings.js";
+import { ColumnSettingProps } from "../ColumnSetting/index.js";
+import { ToolBarHeaderMenuProps } from "./HeaderMenu.js";
+import { ActionType, OptionSearchProps, ProColumns, SearchProps } from "../../typing.js";
+import * as _$vue from "vue";
+import { VNode } from "vue";
+import { ProFieldValueObjectType, ProFieldValueType, ProSchemaComponentTypes, VueNode, WithFalse } from "@antdv-vue/pro-utils";
+import { TabPaneProps } from "antdv-next";
+import { FormItemTooltipType } from "antdv-next/dist/form/FormItemLabel";
+import { Key as Key$1 } from "@v-c/util/dist/type";
+
+//#region src/components/ToolBar/index.d.ts
+type OptionsFunctionType<T> = (e: MouseEvent, action?: ActionType<any, T>) => void;
+type OptionsType<T> = OptionsFunctionType<T> | boolean;
+interface ToolBarSetting {
+  icon: VueNode;
+  tooltip?: FormItemTooltipType | string;
+  key?: string;
+  onClick?: (key?: string) => void;
+}
+/** Antd 默认直接导出了 vc 组件中的 Tab.Pane 组件。 */
+type TabPaneProps$1 = TabPaneProps & {
+  key?: string;
+};
+interface ToolBarTabs {
+  activeKey?: string;
+  defaultActiveKey?: string;
+  onChange?: (activeKey: Key$1) => void;
+  items?: TabPaneProps$1[];
+}
+type ToolBarMenu = ToolBarHeaderMenuProps;
+type SearchPropType = WithFalse<(SearchProps & {
+  onSearch: (searchValue: string, event?: Event | MouseEvent | KeyboardEvent, info?: {
+    source?: 'clear' | 'input';
+  }) => Promise<false | void> | false | void;
+}) | VNode>;
+type SettingPropType = VNode | ToolBarSetting;
+interface OptionConfig<T, ValueType> {
+  density?: boolean;
+  fullScreen?: OptionsType<T>;
+  reload?: OptionsType<T>;
+  setting?: boolean | ColumnSettingProps<T, ValueType>;
+  search?: (OptionSearchProps & {
+    name?: string;
+  }) | boolean;
+  reloadIcon?: VNode | string | number | boolean | VNode[] | (() => VNode | VNode[]);
+  densityIcon?: VNode | string | number | boolean | VNode[] | (() => VNode | VNode[]);
+}
+interface BaseToolbarProps {
+  prefixCls?: string;
+  /** 标题 */
+  title?: VueNode;
+  /** 副标题 */
+  subTitle?: VueNode;
+  /** 标题提示 */
+  tooltip?: string | FormItemTooltipType;
+  /** 搜索输入栏相关配置 */
+  search?: SearchPropType;
+  /** 搜索回调 */
+  onSearch?: (keyWords: string) => void;
+  /** 工具栏右侧操作区 */
+  actions?: VueNode[];
+  /** 工作栏右侧设置区 */
+  settings?: SettingPropType[];
+  /** 是否多行展示 */
+  multipleLine?: boolean;
+  /** 过滤区，通常配合 LightFilter 使用 */
+  filter?: VueNode;
+  /** 标签页配置，仅当 `multipleLine` 为 true 时有效 */
+  tabs?: ToolBarTabs;
+  /** 菜单配置 */
+  menu?: ToolBarMenu;
+}
+interface ToolBarProps<T, ValueType> {
+  prefixCls?: string;
+  headerTitle?: VueNode;
+  tooltip?: string | FormItemTooltipType;
+  toolbar?: BaseToolbarProps;
+  toolBarRender?: ToolBarRender<T>;
+  action?: ActionType<Record<string, any>, T>;
+  options?: OptionConfig<T, ValueType> | false;
+  optionsRender?: OptionsRender<T, ValueType>;
+  loading?: boolean;
+  type?: ProSchemaComponentTypes;
+  selectedRowKeys?: (string | number)[];
+  selectedRows?: (T | undefined)[];
+  onSearch?: (keyWords: string) => void;
+  columns?: ProColumns<T, ValueType>[];
+  onFormSearchSubmit?: (params: Record<string, any>) => void;
+  searchNode?: VueNode;
+  hideToolbar?: boolean;
+}
+declare const Toolbar: new <T extends Record<string, any>, U extends Record<string, any>, ValueType extends (ProFieldValueType | ProFieldValueObjectType) = "text">(props: ToolBarProps<T, ValueType> & {} & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps) => _$vue.CreateComponentPublicInstanceWithMixins<ToolBarProps<T, ValueType> & {}, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, _$vue.PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, _$vue.ComponentProvideOptions, {
+  P: {};
+  B: {};
+  D: {};
+  C: {};
+  M: {};
+  Defaults: {};
+}, ToolBarProps<T, ValueType> & {}, {}, {}, {}, {}, {}>;
+//#endregion
+export { BaseToolbarProps, OptionConfig, OptionsFunctionType, OptionsType, SearchPropType, ToolBarMenu, ToolBarProps, ToolBarSetting, ToolBarTabs, Toolbar as default };

package/dist/components/ToolBar/index.js

@@ -0,0 +1,322 @@
+import { useTableContextInject } from "../../Store/Provide.js";
+import ColumnSetting from "../ColumnSetting/index.js";
+import DensityIcon from "./DensityIcon.js";
+import FullScreenIcon from "./FullScreenIcon.js";
+import HeaderMenu from "./HeaderMenu.js";
+import style_default from "./style/index.js";
+import { Fragment, cloneVNode, computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import { proTheme, useIntl } from "@antdv-vue/pro-provider";
+import { LabelIconTip, isSpecialNode, omitUndefined, useEffect, useState } from "@antdv-vue/pro-utils";
+import { classNames } from "@v-c/util";
+import { useConfig } from "antdv-next/config-provider/context";
+import { InputSearch, Tabs, Tooltip } from "antdv-next";
+import { unit } from "@antdv-next/cssinjs";
+import { ReloadOutlined } from "@antdv-next/icons";
+import ResizeObserver from "@v-c/resize-observer";
+//#region src/components/ToolBar/index.tsx
+/** Antd 默认直接导出了 vc 组件中的 Tab.Pane 组件。 */
+/**
+* 获取配置区域 DOM Item
+*
+* @param setting 配置项
+*/
+function getSettingItem(setting) {
+	if (isVNode(setting)) return setting;
+	if (setting) {
+		const { icon, tooltip, onClick, key } = setting;
+		if (icon && tooltip) {
+			if (!(isVNode(tooltip) || typeof tooltip === "string" || typeof tooltip === "number" || typeof tooltip === "boolean" || typeof tooltip === "function")) return tooltip;
+			return createVNode(Tooltip, { "title": tooltip }, { default: () => [createVNode("span", {
+				"key": key,
+				"onClick": () => {
+					if (onClick) onClick(key);
+				}
+			}, [icon])] });
+		}
+		return createVNode("span", {
+			"key": key,
+			"onClick": () => {
+				if (onClick) onClick(key);
+			}
+		}, [icon]);
+	}
+	return null;
+}
+const ToolBarTabBar = ({ prefixCls, hashId, tabs, multipleLine, filtersNode }) => {
+	if (!multipleLine) return null;
+	return createVNode("div", { "class": classNames(`${prefixCls}-extra-line`, hashId) }, [tabs?.items && tabs?.items.length ? createVNode(Tabs, {
+		"style": { width: "100%" },
+		"defaultActiveKey": tabs.defaultActiveKey,
+		"activeKey": tabs.activeKey,
+		"items": tabs.items?.map((item, index) => ({
+			label: item.tab,
+			...item,
+			key: item.key?.toString() || index?.toString()
+		})),
+		"onChange": tabs.onChange,
+		"tabBarExtraContent": filtersNode
+	}, null) : filtersNode]);
+};
+function getButtonText({ intl }, options) {
+	return {
+		reload: {
+			text: intl.getMessage({
+				id: "tableToolBar.reload",
+				defaultMessage: "刷新"
+			}),
+			icon: options.reloadIcon ?? createVNode(ReloadOutlined, null, null)
+		},
+		density: {
+			text: intl.getMessage({
+				id: "tableToolBar.density",
+				defaultMessage: "表格密度"
+			}),
+			icon: createVNode(DensityIcon, { "icon": options.densityIcon }, null)
+		},
+		fullScreen: {
+			text: intl.getMessage({
+				id: "tableToolBar.fullScreen",
+				defaultMessage: "全屏"
+			}),
+			icon: createVNode(FullScreenIcon, null, null)
+		}
+	};
+}
+/**
+* 渲染默认的 工具栏
+*
+* @param options
+* @param defaultOptions
+* @param actions
+* @param columns
+*/
+function renderDefaultOption(options, defaultOptions, actions, columns, loading) {
+	return Object.keys(options).filter((item) => item).map((key) => {
+		const value = options[key];
+		if (!value) return null;
+		let onClick = value === true ? defaultOptions[key] : (event) => value?.(event, actions);
+		if (typeof onClick !== "function") onClick = () => {};
+		if (key === "setting") return createVNode(ColumnSetting, mergeProps(options[key], {
+			"columns": columns,
+			"key": key
+		}), null);
+		if (key === "fullScreen") return createVNode("span", {
+			"key": key,
+			"onClick": onClick
+		}, [createVNode(FullScreenIcon, null, null)]);
+		const optionItem = getButtonText(defaultOptions, options)[key];
+		if (optionItem) return createVNode("span", {
+			"key": key,
+			"onClick": onClick
+		}, [createVNode(Tooltip, { "title": optionItem.text }, { default: () => [key === "reload" ? cloneVNode(optionItem.icon, {
+			...optionItem.icon.props,
+			spin: loading
+		}) : optionItem.icon] })]);
+		return null;
+	}).filter((item) => item);
+}
+const Toolbar = /* @__PURE__ */ defineComponent((props, { expose, attrs }) => {
+	const counter = useTableContextInject();
+	const intl = useIntl();
+	const config = useConfig();
+	const prefixCls = computed(() => props.prefixCls || config.value.getPrefixCls("pro"));
+	const baseClassName = computed(() => `${prefixCls.value}-table-list-toolbar`);
+	const { token } = proTheme.useToken();
+	const [hashId, cssVarCls] = style_default(baseClassName);
+	const [isMobile, setIsMobile] = useState(false);
+	const searchConfig = computed(() => {
+		if (props.toolbar?.search !== void 0) return props.toolbar.search;
+		if (!props.options) return false;
+		if (!props.options.search) return false;
+		/** 受控的value 和 onChange */
+		const defaultSearchConfig = {
+			value: counter.keyWords?.value,
+			onChange: (e) => counter.setKeyWords?.(e.target.value)
+		};
+		if (props.options.search === true) return defaultSearchConfig;
+		return {
+			...defaultSearchConfig,
+			...props.options.search
+		};
+	});
+	/**
+	* 获取搜索栏 DOM
+	*
+	*/
+	const searchNode = computed(() => {
+		if (!searchConfig.value) return null;
+		if (isVNode(searchConfig.value)) return searchConfig.value;
+		const { onSearch, ...inputSearchProps } = searchConfig.value;
+		return createVNode(InputSearch, mergeProps(inputSearchProps, {
+			"style": { width: unit(200) },
+			"placeholder": intl.value.getMessage({
+				id: "tableForm.inputPlaceholder",
+				defaultMessage: "请输入"
+			}),
+			"onSearch": async (...restParams) => {
+				if (await onSearch?.(...restParams) !== false) props.onSearch?.(restParams?.[0]);
+			}
+		}), null);
+	});
+	/** 轻量筛选组件 */
+	const filtersNode = computed(() => {
+		if (props.searchNode || props.toolbar?.filter) return createVNode("div", { "class": classNames(`${baseClassName.value}-filter`, hashId.value, cssVarCls.value) }, [props.searchNode, props.toolbar?.filter]);
+		return null;
+	});
+	/** 有没有 title，需要结合多个场景判断 */
+	const hasTitle = computed(() => props.toolbar?.menu || props.headerTitle || props.toolbar?.title || props.toolbar?.subTitle || props.toolbar?.tooltip);
+	const actions = computed(() => [...props.toolbar?.actions || [], ...props.toolBarRender ? props.toolBarRender(props.action, {
+		selectedRowKeys: props.selectedRowKeys,
+		selectedRows: props.selectedRows
+	}) : []]);
+	const actionDom = computed(() => {
+		if (!Array.isArray(actions.value)) return actions.value;
+		if (actions.value.length < 1) return null;
+		return createVNode("div", { "style": {
+			display: "flex",
+			alignItems: "center",
+			gap: `${token.value.marginXS}px`
+		} }, [actions.value.map((action, index) => {
+			if (!isVNode(action) || isVNode(action) && isSpecialNode(action)) return createVNode(Fragment, { "key": index }, [action]);
+			return cloneVNode(action, { ...action?.props });
+		})]);
+	});
+	const onSearch = async (keyword) => {
+		const { options, onFormSearchSubmit, action } = props;
+		if (!options || !options.search) return;
+		const { name = "keyword" } = options.search === true ? {} : options.search;
+		if (await options.search?.onSearch?.(keyword) === false) return;
+		action?.setPageInfo?.({ current: 1 });
+		onFormSearchSubmit?.(omitUndefined({
+			_timestamp: Date.now(),
+			[name]: keyword
+		}));
+	};
+	useEffect(() => {
+		if (counter.keyWords?.value === void 0) onSearch?.("");
+	}, [() => counter.keyWords?.value]);
+	const optionDom = computed(() => {
+		if (props.toolbar?.settings !== void 0) return props.toolbar.settings;
+		const defaultOptions = {
+			reload: () => props.action?.reload?.(),
+			density: true,
+			setting: true,
+			search: false,
+			fullScreen: () => props.action?.fullScreen?.()
+		};
+		if (props.options === false) return [];
+		const settings = renderDefaultOption({
+			...defaultOptions,
+			fullScreen: false,
+			...props.options
+		}, {
+			...defaultOptions,
+			intl: intl.value
+		}, props.action, props.columns, props.loading);
+		if (props.optionsRender) return props.optionsRender({
+			headerTitle: props.headerTitle,
+			tooltip: props.tooltip,
+			toolBarRender: props.toolBarRender,
+			action: props.action,
+			options: props.options,
+			selectedRowKeys: props.selectedRowKeys,
+			selectedRows: props.selectedRows,
+			toolbar: {
+				filter: props.searchNode,
+				...props.toolbar
+			},
+			onSearch,
+			columns: props.columns,
+			optionsRender: props.optionsRender
+		}, settings);
+		return settings;
+	});
+	const hasEnd = computed(() => !!(hasTitle.value && searchNode.value || !props.toolbar?.multipleLine && filtersNode.value || actionDom.value || optionDom.value?.length));
+	const hasStart = computed(() => props.tooltip || props.headerTitle || props.toolbar?.title || props.toolbar?.subTitle || props.toolbar?.menu || !hasTitle.value && searchNode.value);
+	const startTitleDom = computed(() => {
+		if (!hasStart.value && hasEnd.value) return createVNode("div", { "class": classNames(`${baseClassName.value}-left`, hashId.value, cssVarCls.value) }, null);
+		if (!props.toolbar?.menu && (hasTitle.value || !searchNode.value)) return createVNode("div", { "class": classNames(`${baseClassName.value}-left`, hashId.value, cssVarCls.value) }, [createVNode("div", { "class": classNames(`${baseClassName.value}-title`, hashId.value, cssVarCls.value) }, [createVNode(LabelIconTip, {
+			"tooltip": props.tooltip || props.toolbar?.tooltip,
+			"label": props.headerTitle || props.toolbar?.title,
+			"subTitle": props.toolbar?.subTitle
+		}, null)])]);
+		return createVNode("div", { "class": classNames(`${baseClassName.value}-left`, hashId.value, cssVarCls.value, {
+			[`${baseClassName.value}-left-has-tabs`]: props.toolbar?.menu?.type === "tab",
+			[`${baseClassName.value}-left-has-dropdown`]: props.toolbar?.menu?.type === "dropdown",
+			[`${baseClassName.value}-left-has-inline-menu`]: props.toolbar?.menu?.type === "inline"
+		}) }, [
+			hasTitle.value && !props.toolbar?.menu && createVNode("div", { "class": classNames(`${baseClassName.value}-title`, hashId.value, cssVarCls.value) }, [createVNode(LabelIconTip, {
+				"tooltip": props.tooltip,
+				"label": props.toolbar?.title,
+				"subTitle": props.toolbar?.subTitle
+			}, null)]),
+			props.toolbar?.menu && createVNode(HeaderMenu, mergeProps(props.toolbar?.menu, {
+				"prefixCls": baseClassName.value,
+				"hashId": hashId.value,
+				"cssVarCls": cssVarCls.value
+			}), null),
+			!hasTitle.value && searchNode.value ? createVNode("div", { "class": classNames(`${prefixCls.value}-search`, hashId.value, cssVarCls.value) }, [searchNode.value]) : null
+		]);
+	});
+	const endTitleDom = computed(() => {
+		if (!hasEnd.value) return null;
+		return createVNode("div", {
+			"class": classNames(`${baseClassName.value}-right`, hashId.value),
+			"style": isMobile.value ? {} : { alignItems: "center" }
+		}, [
+			!props.toolbar?.multipleLine ? filtersNode.value : null,
+			hasTitle.value && searchNode.value ? createVNode("div", { "class": classNames(`${baseClassName.value}-search`, hashId.value) }, [searchNode.value]) : null,
+			actionDom.value,
+			optionDom.value?.length ? createVNode("div", { "class": classNames(`${baseClassName.value}-setting-items`, hashId.value) }, [optionDom.value.map((setting, index) => {
+				const settingItem = getSettingItem(setting);
+				return createVNode("div", {
+					"key": index,
+					"class": classNames(`${baseClassName.value}-setting-item`, hashId.value)
+				}, [settingItem]);
+			})]) : null
+		]);
+	});
+	const titleNode = computed(() => {
+		if (!hasEnd.value && !hasStart.value) return null;
+		return createVNode("div", { "class": classNames(`${baseClassName.value}-container`, hashId.value, { [`${baseClassName.value}-container-mobile`]: isMobile.value }) }, [startTitleDom.value, endTitleDom.value]);
+	});
+	expose({});
+	return () => {
+		const { hideToolbar, toolbar } = props;
+		if (hideToolbar) return null;
+		return createVNode(ResizeObserver, { "onResize": ({ width }) => {
+			if (width < 375 !== isMobile.value) setIsMobile(width < 375);
+		} }, { default: () => [createVNode("div", {
+			"class": classNames(baseClassName.value, hashId.value, attrs.class),
+			"style": attrs.style
+		}, [titleNode.value, createVNode(ToolBarTabBar, {
+			"filtersNode": filtersNode.value,
+			"hashId": hashId.value,
+			"prefixCls": prefixCls.value,
+			"tabs": toolbar?.tabs,
+			"multipleLine": toolbar?.multipleLine
+		}, null)])] });
+	};
+}, {
+	name: "Toolbar",
+	inheritAttrs: false,
+	props: [
+		"action",
+		"type",
+		"columns",
+		"headerTitle",
+		"onSearch",
+		"options",
+		"optionsRender",
+		"selectedRowKeys",
+		"selectedRows",
+		"toolBarRender",
+		"toolbar",
+		"tooltip",
+		"searchNode",
+		"hideToolbar",
+		"loading"
+	]
+});
+//#endregion
+export { Toolbar as default };

package/dist/components/ToolBar/style/index.d.ts

@@ -0,0 +1,8 @@
+import * as _$vue from "vue";
+import { ProAliasCssVarToken } from "@antdv-vue/pro-provider";
+
+//#region src/components/ToolBar/style/index.d.ts
+interface ProTableToolBarToken extends ProAliasCssVarToken {}
+declare const _default: (prefixCls: _$vue.Ref<string>, rootCls?: _$vue.Ref<string | undefined>) => readonly [_$vue.Ref<string, string>, _$vue.ComputedRef<string | undefined>];
+//#endregion
+export { ProTableToolBarToken, _default as default };

package/dist/components/ToolBar/style/index.js

@@ -0,0 +1,116 @@
+import { useStyle } from "@antdv-vue/pro-provider";
+import { mergeToken } from "@antdv-next/cssinjs";
+//#region src/components/ToolBar/style/index.tsx
+const genProTableToolBarStyle = (token) => {
+	return { [token.componentCls]: {
+		lineHeight: "1",
+		"&-container": {
+			display: "flex",
+			justifyContent: "space-between",
+			paddingBlock: token.padding,
+			paddingInline: 0,
+			"&-mobile": { flexDirection: "column" }
+		},
+		"&-title": {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "flex-start",
+			color: token.colorTextHeading,
+			fontWeight: "500",
+			fontSize: token.fontSizeLG
+		},
+		"&-search:not(:last-child)": {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "flex-start"
+		},
+		"&-setting-item": {
+			marginBlock: 0,
+			marginInline: 4,
+			color: token.colorIconHover,
+			fontSize: token.fontSizeLG,
+			cursor: "pointer",
+			"> span": {
+				display: "block",
+				width: "100%",
+				height: "100%"
+			},
+			"&:hover": { color: token.colorPrimary }
+		},
+		"&-left": {
+			display: "flex",
+			flexWrap: "wrap",
+			alignItems: "center",
+			gap: token.marginXS,
+			justifyContent: "flex-start",
+			maxWidth: "calc(100% - 200px)",
+			[`${token.antCls}-tabs`]: { width: "100%" },
+			"&-has-tabs": { overflow: "hidden" }
+		},
+		"&-right": {
+			flex: 1,
+			display: "flex",
+			flexWrap: "wrap",
+			justifyContent: "flex-end",
+			gap: token.marginXS
+		},
+		"&-extra-line": { marginBlockEnd: token.margin },
+		"&-setting-items": {
+			display: "flex",
+			gap: token.marginXS,
+			lineHeight: "32px",
+			alignItems: "center"
+		},
+		"&-filter": {
+			"&:not(:last-child)": { marginInlineEnd: token.margin },
+			display: "flex",
+			alignItems: "center",
+			[`div$${token.antCls}-pro-table-search`]: {
+				marginBlock: 0,
+				marginInline: 0,
+				paddingBlock: 0,
+				paddingInline: 0
+			}
+		},
+		"&-inline-menu-item": {
+			display: "inline-block",
+			marginInlineEnd: token.marginLG,
+			cursor: "pointer",
+			opacity: "0.75",
+			"&-active": {
+				fontWeight: "bold",
+				opacity: "1"
+			}
+		},
+		[`${token.antCls}-tabs-top > ${token.antCls}-tabs-nav`]: {
+			marginBlockEnd: 0,
+			"&::before": { borderBlockEnd: 0 },
+			[`${token.antCls}-tabs-nav-list`]: {
+				marginBlockStart: 0,
+				"${token.antCls}-tabs-tab": { paddingBlockStart: 0 }
+			}
+		},
+		"&-dropdownmenu-label": {
+			fontWeight: "bold",
+			fontSize: token.fontSizeIcon,
+			textAlign: "center",
+			cursor: "pointer"
+		},
+		"@media (max-width: 768px)": { [token.componentCls]: {
+			"&-container": {
+				display: "flex",
+				flexWrap: "wrap",
+				flexDirection: "column"
+			},
+			"&-left": {
+				marginBlockEnd: "16px",
+				maxWidth: "100%"
+			}
+		} }
+	} };
+};
+var style_default = useStyle(`ProTableToolBar`, (token) => {
+	return [genProTableToolBarStyle(mergeToken(token, {}))];
+});
+//#endregion
+export { style_default as default };