@gx-design-vue/pro-table 0.2.0-alpha.8 → 0.2.0-alpha.9

package/dist/components/SearchForm/SearchForm.js

@@ -0,0 +1,319 @@
+import { useProBreakpoints } from "../../hooks/useBreakpoints.js";
+import { formatDateRangeArray, formatStringValue, resolveValueFormat } from "../../utils/dateFormat.js";
+import { CollapseToggle } from "./CollapseToggle.js";
+import { FormItemContainer } from "./FormItemContainer.js";
+import { FormItemWrapper } from "./FormItemWrapper.js";
+import { computed, createVNode, defineComponent, isVNode, ref, watch } from "vue";
+import { classNames, filterEmpty, isArray, isBoolean, isNumber, isObject } from "@gx-design-vue/pro-utils";
+import { Button } from "antdv-next";
+import { cloneDeep as cloneDeep$1 } from "es-toolkit";
+//#region src/components/SearchForm/SearchForm.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const ProTableSearchForm = /* @__PURE__ */ defineComponent({
+	name: "ProTableSearchForm",
+	inheritAttrs: false,
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		formColumns: {
+			type: Array,
+			default: () => []
+		},
+		formState: {
+			type: Object,
+			required: true
+		},
+		defaultFormSearch: {
+			type: Object,
+			required: true
+		},
+		formConfig: {
+			type: Object,
+			default: void 0
+		},
+		formAutoRequest: {
+			type: Boolean,
+			default: true
+		},
+		formActions: {
+			type: Object,
+			default: void 0
+		},
+		loading: {
+			type: [Boolean, Object],
+			default: false
+		},
+		cardBordered: {
+			type: Boolean,
+			default: false
+		},
+		proClasses: {
+			type: Object,
+			default: () => ({})
+		},
+		proStyles: {
+			type: Object,
+			default: () => ({})
+		},
+		onSearch: {
+			type: Function,
+			required: true
+		},
+		onReset: {
+			type: Function,
+			default: void 0
+		}
+	},
+	setup(props, { slots, expose }) {
+		const collapsed = ref(props.formConfig?.collapsed ?? props.formConfig?.defaultCollapsed);
+		watch(() => props.formConfig?.collapsed, (value) => {
+			collapsed.value = value;
+		});
+		const { getRowItemsPerBreakpoint } = useProBreakpoints();
+		const formConfig = computed(() => props.formConfig);
+		const formAutoRequest = computed(() => props.formAutoRequest);
+		const formActions = computed(() => props.formActions);
+		const breakpoint = computed(() => {
+			if (formConfig.value?.breakpoint && isObject(formConfig.value.breakpoint) && Object.keys(formConfig.value.breakpoint).length > 0) return formConfig.value.breakpoint;
+		});
+		const rowLength = computed(() => {
+			return getRowItemsPerBreakpoint(formConfig.value?.span, breakpoint.value);
+		});
+		const gap = computed(() => {
+			const gapValue = formConfig.value?.gap;
+			return typeof gapValue === "number" ? `${gapValue}px` : gapValue ?? "16px";
+		});
+		const formItemLabel = computed(() => formConfig.value?.label);
+		const showResetButton = computed(() => {
+			if (isBoolean(formActions.value?.reset)) return formActions.value.reset;
+			return !formAutoRequest.value;
+		});
+		function handleFormFieldChange(value, record, options) {
+			const name = record.name;
+			const valueType = record.valueType ?? "text";
+			let newValue = value;
+			switch (valueType) {
+				case "text": break;
+				case "number":
+					newValue = value ?? void 0;
+					break;
+				case "numberRange":
+					if ((options?.key === 0 || options?.key === 1) && props.formState[name]) {
+						const updated = [...Array.isArray(props.formState[name]) ? props.formState[name] : []];
+						if (options?.key !== void 0) updated[options.key] = value ?? "";
+						newValue = updated;
+					}
+					break;
+				case "select":
+					newValue = value ?? void 0;
+					break;
+				case "treeSelect":
+					newValue = value ?? (record.field?.treeCheckable || record.field?.multiple ? [] : null);
+					break;
+				case "cascader":
+					newValue = value ?? void 0;
+					break;
+				case "date": {
+					const format = resolveValueFormat(record.valueFormat, record.showTime);
+					newValue = value ? formatStringValue(value, format) : null;
+					break;
+				}
+				case "dateWeek":
+					newValue = value ? formatStringValue(value, "YYYY-wo") : null;
+					break;
+				case "dateMonth":
+					newValue = value ? formatStringValue(value, "YYYY-MM") : null;
+					break;
+				case "dateQuarter":
+					newValue = value ? formatStringValue(value, "YYYY-QQ") : null;
+					break;
+				case "dateYear":
+					newValue = value ? formatStringValue(value, "YYYY") : null;
+					break;
+				case "dateRange": {
+					const format = resolveValueFormat(record.valueFormat, record.showTime);
+					newValue = value && isArray(value) && value.length === 2 ? formatDateRangeArray(value, format, "string") : null;
+					break;
+				}
+				case "time":
+					newValue = value ? formatStringValue(value, record.valueFormat || "HH:mm:ss") : null;
+					break;
+			}
+			props.formState[name] = newValue;
+			handleAutoSubmit();
+		}
+		function handleAutoSubmit() {
+			if (formAutoRequest.value) handleSubmit();
+		}
+		function handleSubmit() {
+			const searchParams = buildFormSearchParams();
+			props.onSearch(searchParams);
+		}
+		function handleManualSubmit() {
+			const searchParams = buildFormSearchParams();
+			props.onSearch(searchParams, "submit");
+		}
+		function buildFormSearchParams() {
+			const searchParams = cloneDeep$1(props.formState);
+			for (const record of props.formColumns) {
+				const valueType = record.valueType ?? "text";
+				const name = record.name;
+				if (valueType === "text") searchParams[name] = props.formState[name] ?? record.initialValue;
+				if (valueType === "dateRange" && (record.rangeStartName || record.rangeEndName)) {
+					const rangeValue = searchParams[name];
+					searchParams[record.rangeStartName || "start"] = Array.isArray(rangeValue) ? rangeValue[0] : void 0;
+					searchParams[record.rangeEndName || "end"] = Array.isArray(rangeValue) ? rangeValue[1] : void 0;
+					delete searchParams[name];
+				}
+				if (valueType === "cascader" && record.valueKey === "single") {
+					const value = searchParams[name];
+					searchParams[name] = Array.isArray(value) ? value[value.length - 1] : void 0;
+				}
+				if (valueType === "numberRange") {
+					const value = searchParams[name];
+					searchParams[name] = Array.isArray(value) && value.some((val) => isNumber(val)) ? value : void 0;
+				}
+			}
+			return searchParams;
+		}
+		function resetForm() {
+			const defaults = cloneDeep$1(props.defaultFormSearch);
+			Object.keys(props.formState).forEach((key) => {
+				props.formState[key] = key in defaults ? defaults[key] : void 0;
+			});
+			for (const record of props.formColumns) if (record.valueType === "dateRange" && (record.rangeStartName || record.rangeEndName)) {
+				const startKey = record.rangeStartName || "start";
+				const endKey = record.rangeEndName || "end";
+				if (defaults[startKey] !== void 0 || defaults[endKey] !== void 0) props.formState[record.name] = [defaults[startKey], defaults[endKey]];
+			}
+			const searchParams = buildFormSearchParams();
+			props.onSearch(searchParams, "reset");
+			props.onReset?.(searchParams);
+		}
+		function handleCollapseToggle(status) {
+			collapsed.value = status;
+		}
+		expose({
+			handleSubmit,
+			resetForm
+		});
+		function getFormItemStyle(index, itemsPerRow, containerGap) {
+			const rowWidth = { width: `calc((100% - (${itemsPerRow - 1} * ${containerGap})) / ${itemsPerRow})` };
+			return (index + 1) % itemsPerRow === 0 ? {
+				...rowWidth,
+				marginRight: 0
+			} : {
+				...rowWidth,
+				marginRight: containerGap
+			};
+		}
+		return () => {
+			const formNode = [...props.formColumns];
+			const normalizedSlots = filterEmpty(slots.default?.() || []);
+			const mergedFormItems = sortFormItemsByOrder([...formNode, ...normalizedSlots.map((item) => ({
+				...item,
+				order: item.props?.order ?? void 0
+			}))]);
+			const itemsPerRow = rowLength.value;
+			const containerGap = gap.value;
+			const totalItems = mergedFormItems.length;
+			const isCollapsed = collapsed.value !== false;
+			const showCollapse = totalItems > itemsPerRow;
+			const renderFormItem = (item, index) => {
+				const formItemStyle = getFormItemStyle(index, itemsPerRow, containerGap);
+				const label = isVNode(item) ? item.props?.label : item.label;
+				const labelWidth = (isVNode(item) ? item.props?.labelWidth : item.labelWidth) ?? formItemLabel.value?.width;
+				const labelAlign = (isVNode(item) ? item.props?.labelAlign : item.labelAlign) ?? formItemLabel.value?.align;
+				if (isVNode(item)) return createVNode(FormItemWrapper, {
+					"label": label,
+					"labelWidth": labelWidth,
+					"labelAlign": labelAlign,
+					"colon": formItemLabel.value?.colon,
+					"globalLabelGap": formItemLabel.value?.gap,
+					"prefixCls": props.prefixCls,
+					"formItemStyle": formItemStyle
+				}, _isSlot(item) ? item : { default: () => [item] });
+				return createVNode(FormItemWrapper, {
+					"key": String(item.name ?? item.key ?? index),
+					"label": item.label,
+					"labelWidth": labelWidth,
+					"labelAlign": labelAlign,
+					"colon": formItemLabel.value?.colon,
+					"globalLabelGap": formItemLabel.value?.gap,
+					"prefixCls": props.prefixCls,
+					"formItemStyle": formItemStyle
+				}, { default: () => [createVNode(FormItemContainer, {
+					"prefixCls": props.prefixCls,
+					"record": item,
+					"formState": props.formState,
+					"autoRequest": formAutoRequest.value,
+					"loading": typeof props.loading === "boolean" ? props.loading : false,
+					"onChange": handleFormFieldChange,
+					"onSubmit": handleAutoSubmit
+				}, null)] });
+			};
+			const renderActionButtons = () => {
+				if (!showResetButton.value && formAutoRequest.value) return null;
+				return createVNode("div", {
+					"class": [`${props.prefixCls}-search-buttons`, props.proClasses.searchButtons],
+					"style": props.proStyles.searchButtons
+				}, [showResetButton.value && createVNode(Button, {
+					"key": "reset",
+					"onClick": resetForm
+				}, { default: () => [formActions.value?.resetText || "重置"] }), !formAutoRequest.value && createVNode(Button, {
+					"key": "submit",
+					"type": "primary",
+					"loading": typeof props.loading === "boolean" ? props.loading : false,
+					"onClick": handleManualSubmit
+				}, { default: () => [formActions.value?.searchText || "查询"] })]);
+			};
+			const renderCollapseToggle = (show, isCollapsedState) => {
+				if (formConfig.value?.collapseRender === false && !renderActionButtons()) return null;
+				const actionBtns = renderActionButtons();
+				if (!show && !actionBtns) return null;
+				return createVNode("div", {
+					"class": [`${props.prefixCls}-search-control`, props.proClasses.searchControl],
+					"style": {
+						flex: 1,
+						justifyContent: "flex-end",
+						...props.proStyles.searchControl
+					}
+				}, [createVNode("div", { "class": [`${props.prefixCls}-search-control-content`, props.proClasses.searchContent] }, [actionBtns, show && createVNode(CollapseToggle, {
+					"collapsed": isCollapsedState,
+					"collapseRender": formConfig.value?.collapseRender,
+					"prefixCls": props.prefixCls,
+					"onToggle": handleCollapseToggle
+				}, null)])]);
+			};
+			const borderedCls = props.cardBordered ? `${props.prefixCls}-search-border` : "";
+			const visibleItemCount = totalItems <= itemsPerRow || !isCollapsed ? totalItems : Math.max(itemsPerRow - 1, 0);
+			return createVNode("div", {
+				"class": classNames(props.proClasses.search, `${props.prefixCls}-search`, borderedCls, formConfig.value?.className),
+				"style": props.proStyles.search
+			}, [mergedFormItems.slice(0, visibleItemCount).map((item, index) => renderFormItem(item, index)), renderCollapseToggle(showCollapse, isCollapsed)]);
+		};
+	}
+});
+function sortFormItemsByOrder(items) {
+	let maxOrder = items.reduce((max, item) => {
+		return item.order !== void 0 ? Math.max(max, item.order) : max;
+	}, 0);
+	const sorted = items.map((item) => {
+		if (item.order === void 0) {
+			maxOrder += 1;
+			return {
+				...item,
+				order: maxOrder
+			};
+		}
+		return item;
+	});
+	sorted.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+	return sorted;
+}
+//#endregion
+export { ProTableSearchForm as default };

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

@@ -0,0 +1,2 @@
+import ProTableSearchForm from "./SearchForm.js";
+export { ProTableSearchForm as SearchForm };

package/dist/components/SearchForm/index.js

@@ -0,0 +1,2 @@
+import ProTableSearchForm from "./SearchForm.js";
+export { ProTableSearchForm as SearchForm };

package/dist/components/Toolbar/FullscreenIcon.d.ts

@@ -0,0 +1,26 @@
+import * as _$vue from "vue";
+import { PropType } from "vue";
+import * as _$vue_jsx_runtime0 from "vue/jsx-runtime";
+
+//#region src/components/Toolbar/FullscreenIcon.d.ts
+declare const FullscreenIcon: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
+  isFullscreen: {
+    type: BooleanConstructor;
+    required: true;
+  };
+  onToggle: {
+    type: PropType<() => void>;
+    required: true;
+  };
+}>, () => _$vue_jsx_runtime0.JSX.Element, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
+  isFullscreen: {
+    type: BooleanConstructor;
+    required: true;
+  };
+  onToggle: {
+    type: PropType<() => void>;
+    required: true;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { FullscreenIcon };

package/dist/components/Toolbar/FullscreenIcon.js

@@ -0,0 +1,22 @@
+import { createVNode, defineComponent } from "vue";
+import { Tooltip } from "antdv-next";
+import { FullscreenExitOutlined, FullscreenOutlined } from "@antdv-next/icons";
+//#region src/components/Toolbar/FullscreenIcon.tsx
+const FullscreenIcon = /* @__PURE__ */ defineComponent({
+	name: "ProTableFullscreenIcon",
+	props: {
+		isFullscreen: {
+			type: Boolean,
+			required: true
+		},
+		onToggle: {
+			type: Function,
+			required: true
+		}
+	},
+	setup(props) {
+		return () => createVNode(Tooltip, { "title": props.isFullscreen ? "退出全屏" : "全屏" }, { default: () => [createVNode("span", { "onClick": props.onToggle }, [props.isFullscreen ? createVNode(FullscreenExitOutlined, null, null) : createVNode(FullscreenOutlined, null, null)])] });
+	}
+});
+//#endregion
+export { FullscreenIcon };

package/dist/components/Toolbar/ListToolBar.d.ts

@@ -0,0 +1,111 @@
+import { ToolbarPlacement } from "../../interface.js";
+import * as _$vue from "vue";
+import { PropType, VNode } from "vue";
+import * as _$vue_jsx_runtime0 from "vue/jsx-runtime";
+
+//#region src/components/Toolbar/ListToolBar.d.ts
+interface ListToolBarSetting {
+  icon: VNode;
+  tooltip?: string;
+  key?: string;
+  onClick?: (key?: string) => void;
+}
+declare const ListToolBar: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
+  prefixCls: {
+    type: StringConstructor;
+    required: true;
+  };
+  headerTitle: {
+    type: any;
+    default: any;
+  };
+  headerTitleTip: {
+    type: any;
+    default: any;
+  };
+  titleTipText: {
+    type: StringConstructor;
+    default: any;
+  };
+  settings: {
+    type: PropType<VNode[]>;
+    default: () => any[];
+  };
+  actions: {
+    type: PropType<VNode[]>;
+    default: () => any[];
+  };
+  actionsPlacement: {
+    type: PropType<ToolbarPlacement>;
+    default: string;
+  };
+  listToolAfter: {
+    type: any;
+    default: any;
+  };
+  proClasses: {
+    type: ObjectConstructor;
+    default: () => {};
+  };
+  proStyles: {
+    type: ObjectConstructor;
+    default: () => {};
+  };
+}>, () => _$vue_jsx_runtime0.JSX.Element, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
+  prefixCls: {
+    type: StringConstructor;
+    required: true;
+  };
+  headerTitle: {
+    type: any;
+    default: any;
+  };
+  headerTitleTip: {
+    type: any;
+    default: any;
+  };
+  titleTipText: {
+    type: StringConstructor;
+    default: any;
+  };
+  settings: {
+    type: PropType<VNode[]>;
+    default: () => any[];
+  };
+  actions: {
+    type: PropType<VNode[]>;
+    default: () => any[];
+  };
+  actionsPlacement: {
+    type: PropType<ToolbarPlacement>;
+    default: string;
+  };
+  listToolAfter: {
+    type: any;
+    default: any;
+  };
+  proClasses: {
+    type: ObjectConstructor;
+    default: () => {};
+  };
+  proStyles: {
+    type: ObjectConstructor;
+    default: () => {};
+  };
+}>> & Readonly<{}>, {
+  actions: VNode<_$vue.RendererNode, _$vue.RendererElement, {
+    [key: string]: any;
+  }>[];
+  proClasses: Record<string, any>;
+  proStyles: Record<string, any>;
+  titleTipText: string;
+  actionsPlacement: ToolbarPlacement;
+  headerTitle: any;
+  listToolAfter: any;
+  headerTitleTip: any;
+  settings: VNode<_$vue.RendererNode, _$vue.RendererElement, {
+    [key: string]: any;
+  }>[];
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { ListToolBar, ListToolBarSetting };

package/dist/components/Toolbar/ListToolBar.js

@@ -0,0 +1,101 @@
+import { computed, createVNode, defineComponent, isVNode } from "vue";
+import { Tooltip } from "antdv-next";
+import { InfoCircleOutlined } from "@antdv-next/icons";
+//#region src/components/Toolbar/ListToolBar.tsx
+function renderSettingItem(setting) {
+	if (isVNode(setting)) return setting;
+	if (!setting) return null;
+	const { icon, tooltip, onClick, key } = setting;
+	if (icon && tooltip) return createVNode(Tooltip, {
+		"title": tooltip,
+		"key": key
+	}, { default: () => [createVNode("span", {
+		"key": key,
+		"onClick": () => {
+			if (onClick) onClick(key);
+		}
+	}, [icon])] });
+	return icon;
+}
+const ListToolBar = /* @__PURE__ */ defineComponent({
+	name: "ProTableListToolBar",
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		headerTitle: {
+			type: null,
+			default: void 0
+		},
+		headerTitleTip: {
+			type: null,
+			default: void 0
+		},
+		titleTipText: {
+			type: String,
+			default: void 0
+		},
+		settings: {
+			type: Array,
+			default: () => []
+		},
+		actions: {
+			type: Array,
+			default: () => []
+		},
+		actionsPlacement: {
+			type: String,
+			default: "right"
+		},
+		listToolAfter: {
+			type: null,
+			default: void 0
+		},
+		proClasses: {
+			type: Object,
+			default: () => ({})
+		},
+		proStyles: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	setup(props) {
+		const hasTitle = computed(() => !!(props.headerTitleTip || props.headerTitle));
+		const leftActions = computed(() => props.actionsPlacement === "left" ? props.actions : []);
+		const rightActions = computed(() => props.actionsPlacement === "right" ? props.actions : []);
+		const hasLeft = computed(() => hasTitle.value || leftActions.value.length > 0);
+		const hasRight = computed(() => props.settings.length > 0 || rightActions.value.length > 0);
+		return () => {
+			if (!hasLeft.value && !hasRight.value && !props.listToolAfter) return null;
+			const prefix = props.prefixCls;
+			const leftNode = hasLeft.value || hasRight.value ? createVNode("div", {
+				"class": `${prefix}-list-toolbar-left`,
+				"style": props.proStyles.toolbarLeft
+			}, [hasTitle.value && createVNode("div", {
+				"class": [`${prefix}-list-toolbar-title`, props.proClasses.toolbarTitle],
+				"style": props.proStyles.toolbarTitle
+			}, [props.headerTitle, props.headerTitleTip && createVNode(Tooltip, { "title": props.titleTipText }, { default: () => [typeof props.headerTitleTip === "boolean" ? createVNode(InfoCircleOutlined, null, null) : props.headerTitleTip] })]), leftActions.value.length > 0 && createVNode("div", { "class": `${prefix}-list-toolbar-actions` }, [leftActions.value])]) : hasRight.value ? createVNode("div", {
+				"class": `${prefix}-list-toolbar-left`,
+				"style": props.proStyles.toolbarLeft
+			}, null) : null;
+			const rightNode = hasRight.value ? createVNode("div", {
+				"class": [`${prefix}-list-toolbar-right`, props.proClasses.toolbarRight],
+				"style": props.proStyles.toolbarRight
+			}, [rightActions.value.length > 0 && createVNode("div", { "class": `${prefix}-list-toolbar-actions` }, [rightActions.value]), props.settings.length > 0 && createVNode("div", { "class": `${prefix}-list-toolbar-setting-items` }, [props.settings.map((setting, index) => createVNode("div", {
+				"key": index,
+				"class": `${prefix}-list-toolbar-setting-item`
+			}, [renderSettingItem(setting)]))])]) : null;
+			return createVNode("div", {
+				"class": [`${prefix}-list-toolbar`, props.proClasses.toolbar],
+				"style": props.proStyles.toolbar
+			}, [(leftNode || rightNode) && createVNode("div", { "class": `${prefix}-list-toolbar-container` }, [leftNode, rightNode]), props.listToolAfter && createVNode("div", {
+				"class": [`${prefix}-list-toolbar-after`, props.proClasses.toolbarAfter],
+				"style": props.proStyles.toolbarAfter
+			}, [props.listToolAfter])]);
+		};
+	}
+});
+//#endregion
+export { ListToolBar };

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

@@ -0,0 +1,103 @@
+import { ToolbarPlacement } from "../../interface.js";
+import * as _$vue from "vue";
+import { PropType, VNode } from "vue";
+import * as _$vue_jsx_runtime0 from "vue/jsx-runtime";
+
+//#region src/components/Toolbar/index.d.ts
+declare const Toolbar: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
+  prefixCls: {
+    type: StringConstructor;
+    required: true;
+  };
+  options: {
+    type: any;
+    default: boolean;
+  };
+  titleTipText: {
+    type: StringConstructor;
+    default: any;
+  };
+  actionsPlacement: {
+    type: PropType<ToolbarPlacement>;
+    default: string;
+  };
+  actions: {
+    type: PropType<VNode[]>;
+    default: () => any[];
+  };
+  headerTitle: {
+    type: any;
+    default: any;
+  };
+  listToolAfter: {
+    type: any;
+    default: any;
+  };
+  headerTitleTip: {
+    type: any;
+    default: any;
+  };
+  proClasses: {
+    type: ObjectConstructor;
+    default: () => {};
+  };
+  proStyles: {
+    type: ObjectConstructor;
+    default: () => {};
+  };
+}>, () => _$vue_jsx_runtime0.JSX.Element, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
+  prefixCls: {
+    type: StringConstructor;
+    required: true;
+  };
+  options: {
+    type: any;
+    default: boolean;
+  };
+  titleTipText: {
+    type: StringConstructor;
+    default: any;
+  };
+  actionsPlacement: {
+    type: PropType<ToolbarPlacement>;
+    default: string;
+  };
+  actions: {
+    type: PropType<VNode[]>;
+    default: () => any[];
+  };
+  headerTitle: {
+    type: any;
+    default: any;
+  };
+  listToolAfter: {
+    type: any;
+    default: any;
+  };
+  headerTitleTip: {
+    type: any;
+    default: any;
+  };
+  proClasses: {
+    type: ObjectConstructor;
+    default: () => {};
+  };
+  proStyles: {
+    type: ObjectConstructor;
+    default: () => {};
+  };
+}>> & Readonly<{}>, {
+  actions: VNode<_$vue.RendererNode, _$vue.RendererElement, {
+    [key: string]: any;
+  }>[];
+  proClasses: Record<string, any>;
+  proStyles: Record<string, any>;
+  options: any;
+  titleTipText: string;
+  actionsPlacement: ToolbarPlacement;
+  headerTitle: any;
+  listToolAfter: any;
+  headerTitleTip: any;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { Toolbar, Toolbar as default };