@sum-one/components 0.0.1

package/dist/index.d.mts

@@ -0,0 +1,111 @@
+import * as _$vue from "vue";
+import { Component, MaybeRefOrGetter, Ref, VNodeChild } from "vue";
+import * as _$element_plus0 from "element-plus";
+import { PaginationProps, TableColumnInstance } from "element-plus";
+
+//#region ../hooks/dist/index.d.mts
+//#endregion
+//#region src/use-table/types.d.ts
+interface DataFields {
+  responseFields?: {
+    list?: string;
+    total?: string;
+  };
+  paginationFields?: {
+    page?: string;
+    pageSize?: string;
+  };
+}
+interface FetchParams extends Record<string, any> {
+  page?: number;
+  pageSize?: number;
+}
+interface DefaultPagination {
+  page?: number;
+  pageSize?: number;
+}
+interface PaginationState {
+  page: number;
+  pageSize: number;
+  total: number;
+}
+interface UseTableOptions<T = any> {
+  /** 数据获取函数 */
+  request: (params: FetchParams, signal?: AbortSignal) => Promise<Record<string, any>>;
+  /** 除分页之外的业务参数 */
+  queryParams?: MaybeRefOrGetter<Record<string, any>>;
+  /** 是否立即执行 */
+  immediate?: boolean;
+  /** 是否监听查询参数变化自动重新查询 */
+  watchQueryParams?: boolean;
+  /** 默认的分页配置 */
+  defaultPagination?: DefaultPagination;
+  /** 发送请求前对参数进行处理 */
+  paramsHandler?: (params: FetchParams) => FetchParams;
+  /** 数据转换函数 */
+  transform?: (data: T[]) => T[];
+  /** 请求成功的回调 */
+  onSuccess?: (data: T[], total: number) => void;
+  /** 请求失败的回调 */
+  onError?: (error: unknown) => void;
+  /**
+   * 请求和响应中的分页/列表字段映射
+   */
+  dataFields?: DataFields;
+}
+interface UseTableResult<T = any> {
+  data: Ref<T[]>;
+  loading: Ref<boolean>;
+  error: Ref<unknown>;
+  pagination: PaginationState;
+  refresh: () => Promise<T[] | undefined>;
+  search: () => void;
+  handlePageChange: (page: number) => void;
+  handleSizeChange: (pageSize: number) => void;
+} //#endregion
+//#region src/use-table/index.d.ts
+declare function useTable<T = any>(options: UseTableOptions<T>): UseTableResult<T>; //#endregion
+//#endregion
+//#region src/table/types.d.ts
+type TableColumnProp<T> = T extends Record<string, any> ? Extract<keyof T, string> : string;
+interface TableRenderScope<T = any> {
+  row: T;
+  column: TableColumnInstance;
+  $index: number;
+  cellValue: any;
+}
+interface TableColumns<T = any> extends Omit<TableColumnInstance['$props'], 'label' | 'prop'> {
+  label?: string | Component;
+  prop?: TableColumnProp<T>;
+  render?: (scope: TableRenderScope<T>) => VNodeChild;
+  children?: TableColumns<T>[];
+}
+interface IProps {
+  columns: TableColumns[];
+  rowKey?: string;
+  align?: 'left' | 'center' | 'right';
+  selection?: boolean;
+  index?: boolean;
+  showPagination?: boolean;
+  pagination?: Partial<PaginationProps>;
+  request: UseTableOptions['request'];
+  requestAuto?: UseTableOptions['immediate'];
+  paramsHandler?: UseTableOptions['paramsHandler'];
+  transform?: UseTableOptions['transform'];
+  onSuccess?: UseTableOptions['onSuccess'];
+  onError?: UseTableOptions['onError'];
+  dataFields?: UseTableOptions['dataFields'];
+}
+//#endregion
+//#region src/table/table.vue.d.ts
+declare const __VLS_export: _$vue.DefineComponent<IProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<IProps> & Readonly<{}>, {
+  align: "left" | "center" | "right";
+  index: boolean;
+  showPagination: boolean;
+  pagination: Partial<_$element_plus0.PaginationProps>;
+  requestAuto: useTable["immediate"];
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { IProps, _default as SumTable, TableColumns, TableRenderScope };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -0,0 +1,459 @@
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createSlots, createVNode, defineComponent, mergeProps, normalizeStyle, openBlock, reactive, renderList, resolveComponent, resolveDirective, resolveDynamicComponent, toValue, unref, useAttrs, watch, withCtx, withDirectives } from "vue";
+import "element-plus";
+import { useAsyncState } from "@vueuse/core";
+//#region ../hooks/dist/index.mjs
+function getValueByPath(source, path) {
+	return path.split(".").reduce((value, key) => value?.[key], source);
+}
+function useTable(options) {
+	const { request, queryParams, immediate = true, watchQueryParams, defaultPagination = {}, paramsHandler, transform, onError, onSuccess, dataFields } = options;
+	const listField = dataFields?.responseFields?.list ?? "list";
+	const totalField = dataFields?.responseFields?.total ?? "total";
+	const pageField = dataFields?.paginationFields?.page ?? "page";
+	const pageSizeField = dataFields?.paginationFields?.pageSize ?? "pageSize";
+	const { page: defaultCurrentPage = 1, pageSize: defaultPageSize = 10 } = defaultPagination;
+	const pagination = reactive({
+		page: defaultCurrentPage,
+		pageSize: defaultPageSize,
+		total: 0
+	});
+	const getQueryParams = () => toValue(queryParams);
+	let abortController;
+	let latestData = [];
+	const buildRequestParams = () => {
+		const totalParams = {
+			...getQueryParams(),
+			[pageField]: pagination.page,
+			[pageSizeField]: pagination.pageSize
+		};
+		return paramsHandler ? paramsHandler(totalParams) : totalParams;
+	};
+	const fetchData = async () => {
+		abortController?.abort();
+		const controller = new AbortController();
+		abortController = controller;
+		try {
+			const response = await request(buildRequestParams(), controller.signal);
+			if (controller.signal.aborted) return latestData;
+			const list = getValueByPath(response, listField);
+			const total = getValueByPath(response, totalField);
+			if (!Array.isArray(list)) throw new TypeError(`Expected response.${listField} to be an array`);
+			if (typeof total !== "number") throw new TypeError(`Expected response.${totalField} to be a number`);
+			pagination.total = total;
+			onSuccess?.(list, total);
+			const finalData = transform ? transform(list) : list;
+			latestData = finalData;
+			return finalData;
+		} catch (err) {
+			if (controller.signal.aborted) return latestData;
+			onError?.(err);
+			throw err;
+		} finally {
+			if (abortController === controller) abortController = void 0;
+		}
+	};
+	const { state: data, isLoading: loading, error, execute } = useAsyncState(fetchData, [], {
+		immediate,
+		resetOnExecute: false
+	});
+	const refresh = () => execute();
+	const search = () => {
+		pagination.page = 1;
+		execute();
+	};
+	const handlePageChange = (page) => {
+		pagination.page = page;
+		execute();
+	};
+	const handleSizeChange = (pageSize) => {
+		pagination.pageSize = pageSize;
+		pagination.page = 1;
+		execute();
+	};
+	if (queryParams && watchQueryParams) watch(() => toValue(queryParams), () => {
+		search();
+	}, { deep: true });
+	return {
+		/** 表格数据 */
+		data,
+		/** 加载状态 */
+		loading,
+		/** 错误信息 */
+		error,
+		/** 分页信息 */
+		pagination,
+		/** 刷新数据（保持当前分页） */
+		refresh,
+		/** 重新查询（重置到第一页） */
+		search,
+		/** 分页变化处理 */
+		handlePageChange,
+		/** 每页数量变化处理 */
+		handleSizeChange
+	};
+}
+//#endregion
+//#region src/table/pagination/index.vue
+var pagination_default = /* @__PURE__ */ defineComponent({
+	__name: "index",
+	props: {
+		align: {
+			type: String,
+			required: false,
+			default: "right"
+		},
+		pageSize: {
+			type: Number,
+			required: false,
+			default: 10
+		},
+		defaultPageSize: {
+			type: Number,
+			required: false
+		},
+		total: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		pageCount: {
+			type: Number,
+			required: false
+		},
+		pagerCount: {
+			type: Number,
+			required: false
+		},
+		currentPage: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		defaultCurrentPage: {
+			type: Number,
+			required: false
+		},
+		layout: {
+			type: String,
+			required: false,
+			default: "total, sizes, prev, pager, next, jumper"
+		},
+		pageSizes: {
+			type: null,
+			required: false,
+			default: () => [
+				10,
+				20,
+				30,
+				50,
+				100
+			]
+		},
+		popperClass: {
+			type: String,
+			required: false
+		},
+		popperStyle: {
+			type: null,
+			required: false
+		},
+		prevText: {
+			type: String,
+			required: false
+		},
+		prevIcon: {
+			type: null,
+			required: false
+		},
+		nextText: {
+			type: String,
+			required: false
+		},
+		nextIcon: {
+			type: null,
+			required: false
+		},
+		teleported: {
+			type: Boolean,
+			required: false
+		},
+		small: {
+			type: Boolean,
+			required: false
+		},
+		size: {
+			type: String,
+			required: false
+		},
+		background: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		hideOnSinglePage: {
+			type: Boolean,
+			required: false
+		},
+		appendSizeTo: {
+			type: String,
+			required: false
+		}
+	},
+	emits: [
+		"update:currentPage",
+		"update:pageSize",
+		"currentChange",
+		"sizeChange"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const justifyContent = computed(() => {
+			return {
+				left: "flex-start",
+				center: "center",
+				right: "flex-end"
+			}[props.align];
+		});
+		function handleCurrentChange(page) {
+			emit("update:currentPage", page);
+			emit("currentChange", page);
+		}
+		function handleSizeChange(pageSize) {
+			emit("update:pageSize", pageSize);
+			emit("sizeChange", pageSize);
+		}
+		return (_ctx, _cache) => {
+			const _component_el_pagination = resolveComponent("el-pagination");
+			return props.total > 0 ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				style: normalizeStyle({
+					display: "flex",
+					justifyContent: justifyContent.value,
+					marginTop: "16px"
+				})
+			}, [createVNode(_component_el_pagination, mergeProps(props, {
+				onCurrentChange: handleCurrentChange,
+				onSizeChange: handleSizeChange
+			}), null, 16)], 4)) : createCommentVNode("v-if", true);
+		};
+	}
+});
+Array.isArray;
+function omit(obj, keys) {
+	if (obj == null) return {};
+	if (!keys || keys.length === 0) return { ...obj };
+	const keysSet = new Set(keys);
+	const result = {};
+	for (const [key, value] of Object.entries(obj)) if (!keysSet.has(key)) result[key] = value;
+	return result;
+}
+//#endregion
+//#region src/table/table-data.vue
+var table_data_default = /* @__PURE__ */ defineComponent({
+	__name: "table-data",
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		align: {
+			type: String,
+			required: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const RenderCell = defineComponent({
+			props: {
+				column: {
+					type: Object,
+					required: true
+				},
+				scope: {
+					type: Object,
+					required: true
+				}
+			},
+			setup(props) {
+				return () => {
+					const column = props.column;
+					const scope = props.scope;
+					return column.render?.({
+						...scope,
+						cellValue: column.prop ? scope.row?.[column.prop] : void 0
+					});
+				};
+			}
+		});
+		return (_ctx, _cache) => {
+			const _component_table_data = resolveComponent("table-data", true);
+			const _component_el_table_column = resolveComponent("el-table-column");
+			return openBlock(), createBlock(_component_el_table_column, mergeProps(unref(omit)(__props.column, [
+				"label",
+				"align",
+				"render",
+				"children"
+			]), {
+				label: typeof props.column.label === "string" ? props.column.label : void 0,
+				prop: props.column.prop,
+				align: props.column.align || props.align
+			}), createSlots({ _: 2 }, [props.column.children?.length ? {
+				name: "default",
+				fn: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.column.children, (item, index) => {
+					return openBlock(), createBlock(_component_table_data, {
+						key: item.prop || index,
+						align: props.column.align || props.align,
+						column: item
+					}, null, 8, ["align", "column"]);
+				}), 128))]),
+				key: "0"
+			} : props.column.render ? {
+				name: "default",
+				fn: withCtx((scope) => [createVNode(unref(RenderCell), {
+					column: props.column,
+					scope
+				}, null, 8, ["column", "scope"])]),
+				key: "1"
+			} : void 0, props.column.label && typeof props.column.label !== "string" ? {
+				name: "header",
+				fn: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(props.column.label)))]),
+				key: "2"
+			} : void 0]), 1040, [
+				"label",
+				"prop",
+				"align"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/table/table.vue
+var table_default = /* @__PURE__ */ defineComponent({
+	__name: "table",
+	props: {
+		columns: {
+			type: Array,
+			required: true
+		},
+		rowKey: {
+			type: String,
+			required: false
+		},
+		align: {
+			type: String,
+			required: false,
+			default: "center"
+		},
+		selection: {
+			type: Boolean,
+			required: false
+		},
+		index: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		showPagination: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		pagination: {
+			type: Object,
+			required: false,
+			default: () => ({})
+		},
+		request: {
+			type: Function,
+			required: true
+		},
+		requestAuto: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		paramsHandler: {
+			type: Function,
+			required: false
+		},
+		transform: {
+			type: Function,
+			required: false
+		},
+		onSuccess: {
+			type: Function,
+			required: false
+		},
+		onError: {
+			type: Function,
+			required: false
+		},
+		dataFields: {
+			type: Object,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const { data, loading, pagination, handlePageChange, handleSizeChange } = useTable({
+			...props,
+			defaultPagination: {
+				page: props.pagination.currentPage ?? props.pagination.defaultCurrentPage,
+				pageSize: props.pagination.pageSize ?? props.pagination.defaultPageSize
+			}
+		});
+		return (_ctx, _cache) => {
+			const _component_el_table_column = resolveComponent("el-table-column");
+			const _component_el_table = resolveComponent("el-table");
+			const _directive_loading = resolveDirective("loading");
+			return openBlock(), createElementBlock("div", null, [
+				createCommentVNode(" <span v-if=\"props.title\">{{ props.title }}</span> "),
+				withDirectives((openBlock(), createBlock(_component_el_table, mergeProps({
+					...unref(attrs),
+					...props
+				}, { data: unref(data) }), {
+					default: withCtx(() => [
+						props.selection ? (openBlock(), createBlock(_component_el_table_column, {
+							key: 0,
+							type: "selection"
+						})) : createCommentVNode("v-if", true),
+						props.index ? (openBlock(), createBlock(_component_el_table_column, {
+							key: 1,
+							type: "index"
+						})) : createCommentVNode("v-if", true),
+						(openBlock(true), createElementBlock(Fragment, null, renderList(props.columns, (item, index) => {
+							return openBlock(), createBlock(table_data_default, {
+								key: item.prop || index,
+								align: props.align,
+								column: item
+							}, null, 8, ["align", "column"]);
+						}), 128))
+					]),
+					_: 1
+				}, 16, ["data"])), [[_directive_loading, unref(loading)]]),
+				props.showPagination ? (openBlock(), createBlock(pagination_default, mergeProps({ key: 0 }, props.pagination, {
+					"current-page": unref(pagination).page,
+					"page-size": unref(pagination).pageSize,
+					total: unref(pagination).total,
+					onCurrentChange: unref(handlePageChange),
+					onSizeChange: unref(handleSizeChange)
+				}), null, 16, [
+					"current-page",
+					"page-size",
+					"total",
+					"onCurrentChange",
+					"onSizeChange"
+				])) : createCommentVNode("v-if", true)
+			]);
+		};
+	}
+});
+//#endregion
+export { table_default as SumTable };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../hooks/dist/index.mjs","../src/table/pagination/index.vue","../src/table/pagination/index.vue","../../utils/dist/index.mjs","../src/table/table-data.vue","../src/table/table-data.vue","../src/table/table.vue","../src/table/table.vue"],"sourcesContent":["import { ElDialog } from \"element-plus\";\nimport { createApp, h, reactive, ref, toValue, watch } from \"vue\";\nimport { useAsyncState } from \"@vueuse/core\";\n//#region src/use-modal/index.ts\n/** 动画持续时间（毫秒） */\nconst ANIMATION_DURATION = 1e3;\nconst DEFAULT_MODAL_PROPS = {\n\twidth: \"50%\",\n\ttop: \"15vh\",\n\tcloseOnClickModal: false,\n\tcloseOnPressEscape: true,\n\tdestroyOnClose: true,\n\tdraggable: true,\n\tlockScroll: true\n};\nfunction useModal(component, { props, modalProps }) {\n\tconst open = ref(true);\n\tconst componentInstance = ref(null);\n\tlet unmountTimer = null;\n\tconst dialogComponent = () => {\n\t\tconst { slots: modalSlots, ...restModalProps } = modalProps ?? {};\n\t\treturn h(ElDialog, {\n\t\t\t...DEFAULT_MODAL_PROPS,\n\t\t\t...restModalProps,\n\t\t\tmodelValue: open.value,\n\t\t\tbeforeClose(done) {\n\t\t\t\tdone();\n\t\t\t\tunmount();\n\t\t\t}\n\t\t}, {\n\t\t\tdefault: () => h(component, {\n\t\t\t\t...props,\n\t\t\t\tref: componentInstance\n\t\t\t}),\n\t\t\t...modalSlots\n\t\t});\n\t};\n\tlet app = null;\n\tlet container = null;\n\ttry {\n\t\tapp = createApp(dialogComponent);\n\t\tcontainer = document.createElement(\"div\");\n\t\tdocument.body.appendChild(container);\n\t\tapp.mount(container);\n\t} catch (error) {\n\t\tconsole.error(\"Failed to create modal:\", error);\n\t\tthrow error;\n\t}\n\tfunction unmount() {\n\t\tif (!open.value) return;\n\t\topen.value = false;\n\t\tif (unmountTimer) clearTimeout(unmountTimer);\n\t\tunmountTimer = setTimeout(() => {\n\t\t\ttry {\n\t\t\t\tif (app) {\n\t\t\t\t\tapp.unmount();\n\t\t\t\t\tapp = null;\n\t\t\t\t}\n\t\t\t\tif (container?.parentNode) {\n\t\t\t\t\tcontainer.parentNode.removeChild(container);\n\t\t\t\t\tcontainer = null;\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error(error);\n\t\t\t} finally {\n\t\t\t\tunmountTimer = null;\n\t\t\t}\n\t\t}, ANIMATION_DURATION);\n\t}\n\treturn {\n\t\tclose: unmount,\n\t\tcomponentInstance,\n\t\tisOpen: open\n\t};\n}\n//#endregion\n//#region src/use-table/index.ts\nfunction getValueByPath(source, path) {\n\treturn path.split(\".\").reduce((value, key) => value?.[key], source);\n}\nfunction useTable(options) {\n\tconst { request, queryParams, immediate = true, watchQueryParams, defaultPagination = {}, paramsHandler, transform, onError, onSuccess, dataFields } = options;\n\tconst listField = dataFields?.responseFields?.list ?? \"list\";\n\tconst totalField = dataFields?.responseFields?.total ?? \"total\";\n\tconst pageField = dataFields?.paginationFields?.page ?? \"page\";\n\tconst pageSizeField = dataFields?.paginationFields?.pageSize ?? \"pageSize\";\n\tconst { page: defaultCurrentPage = 1, pageSize: defaultPageSize = 10 } = defaultPagination;\n\tconst pagination = reactive({\n\t\tpage: defaultCurrentPage,\n\t\tpageSize: defaultPageSize,\n\t\ttotal: 0\n\t});\n\tconst getQueryParams = () => toValue(queryParams);\n\tlet abortController;\n\tlet latestData = [];\n\tconst buildRequestParams = () => {\n\t\tconst totalParams = {\n\t\t\t...getQueryParams(),\n\t\t\t[pageField]: pagination.page,\n\t\t\t[pageSizeField]: pagination.pageSize\n\t\t};\n\t\treturn paramsHandler ? paramsHandler(totalParams) : totalParams;\n\t};\n\tconst fetchData = async () => {\n\t\tabortController?.abort();\n\t\tconst controller = new AbortController();\n\t\tabortController = controller;\n\t\ttry {\n\t\t\tconst response = await request(buildRequestParams(), controller.signal);\n\t\t\tif (controller.signal.aborted) return latestData;\n\t\t\tconst list = getValueByPath(response, listField);\n\t\t\tconst total = getValueByPath(response, totalField);\n\t\t\tif (!Array.isArray(list)) throw new TypeError(`Expected response.${listField} to be an array`);\n\t\t\tif (typeof total !== \"number\") throw new TypeError(`Expected response.${totalField} to be a number`);\n\t\t\tpagination.total = total;\n\t\t\tonSuccess?.(list, total);\n\t\t\tconst finalData = transform ? transform(list) : list;\n\t\t\tlatestData = finalData;\n\t\t\treturn finalData;\n\t\t} catch (err) {\n\t\t\tif (controller.signal.aborted) return latestData;\n\t\t\tonError?.(err);\n\t\t\tthrow err;\n\t\t} finally {\n\t\t\tif (abortController === controller) abortController = void 0;\n\t\t}\n\t};\n\tconst { state: data, isLoading: loading, error, execute } = useAsyncState(fetchData, [], {\n\t\timmediate,\n\t\tresetOnExecute: false\n\t});\n\tconst refresh = () => execute();\n\tconst search = () => {\n\t\tpagination.page = 1;\n\t\texecute();\n\t};\n\tconst handlePageChange = (page) => {\n\t\tpagination.page = page;\n\t\texecute();\n\t};\n\tconst handleSizeChange = (pageSize) => {\n\t\tpagination.pageSize = pageSize;\n\t\tpagination.page = 1;\n\t\texecute();\n\t};\n\tif (queryParams && watchQueryParams) watch(() => toValue(queryParams), () => {\n\t\tsearch();\n\t}, { deep: true });\n\treturn {\n\t\t/** 表格数据 */\n\t\tdata,\n\t\t/** 加载状态 */\n\t\tloading,\n\t\t/** 错误信息 */\n\t\terror,\n\t\t/** 分页信息 */\n\t\tpagination,\n\t\t/** 刷新数据（保持当前分页） */\n\t\trefresh,\n\t\t/** 重新查询（重置到第一页） */\n\t\tsearch,\n\t\t/** 分页变化处理 */\n\t\thandlePageChange,\n\t\t/** 每页数量变化处理 */\n\t\thandleSizeChange\n\t};\n}\n//#endregion\nexport { useModal, useTable };\n\n//# sourceMappingURL=index.mjs.map","<script setup lang=\"ts\">\nimport type { PaginationProps } from 'element-plus'\nimport { computed } from 'vue'\n\ninterface IProps extends Partial<PaginationProps> {\n  align?: 'left' | 'center' | 'right'\n}\n\nconst props = withDefaults(defineProps<IProps>(), {\n  currentPage: 1,\n  pageSize: 10,\n  total: 0,\n  pageSizes: () => [10, 20, 30, 50, 100],\n  layout: 'total, sizes, prev, pager, next, jumper',\n  align: 'right'\n})\n\nconst emit = defineEmits<{\n  'update:currentPage': [page: number]\n  'update:pageSize': [pageSize: number]\n  'currentChange': [page: number]\n  'sizeChange': [pageSize: number]\n}>()\n\nconst justifyContent = computed(() => {\n  const alignMap = {\n    left: 'flex-start',\n    center: 'center',\n    right: 'flex-end'\n  }\n\n  return alignMap[props.align]\n})\n\nfunction handleCurrentChange(page: number): void {\n  emit('update:currentPage', page)\n  emit('currentChange', page)\n}\n\nfunction handleSizeChange(pageSize: number): void {\n  emit('update:pageSize', pageSize)\n  emit('sizeChange', pageSize)\n}\n</script>\n\n<template>\n  <div\n    v-if=\"props.total > 0\"\n    :style=\"{\n      display: 'flex',\n      justifyContent,\n      marginTop: '16px',\n    }\"\n  >\n    <el-pagination\n      v-bind=\"props\"\n      @current-change=\"handleCurrentChange\"\n      @size-change=\"handleSizeChange\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { PaginationProps } from 'element-plus'\nimport { computed } from 'vue'\n\ninterface IProps extends Partial<PaginationProps> {\n  align?: 'left' | 'center' | 'right'\n}\n\nconst props = withDefaults(defineProps<IProps>(), {\n  currentPage: 1,\n  pageSize: 10,\n  total: 0,\n  pageSizes: () => [10, 20, 30, 50, 100],\n  layout: 'total, sizes, prev, pager, next, jumper',\n  align: 'right'\n})\n\nconst emit = defineEmits<{\n  'update:currentPage': [page: number]\n  'update:pageSize': [pageSize: number]\n  'currentChange': [page: number]\n  'sizeChange': [pageSize: number]\n}>()\n\nconst justifyContent = computed(() => {\n  const alignMap = {\n    left: 'flex-start',\n    center: 'center',\n    right: 'flex-end'\n  }\n\n  return alignMap[props.align]\n})\n\nfunction handleCurrentChange(page: number): void {\n  emit('update:currentPage', page)\n  emit('currentChange', page)\n}\n\nfunction handleSizeChange(pageSize: number): void {\n  emit('update:pageSize', pageSize)\n  emit('sizeChange', pageSize)\n}\n</script>\n\n<template>\n  <div\n    v-if=\"props.total > 0\"\n    :style=\"{\n      display: 'flex',\n      justifyContent,\n      marginTop: '16px',\n    }\"\n  >\n    <el-pagination\n      v-bind=\"props\"\n      @current-change=\"handleCurrentChange\"\n      @size-change=\"handleSizeChange\"\n    />\n  </div>\n</template>\n","//#region src/array.ts\nconst isArray = Array.isArray;\n//#endregion\n//#region src/omit.ts\nfunction omit(obj, keys) {\n\tif (obj == null) return {};\n\tif (!keys || keys.length === 0) return { ...obj };\n\tconst keysSet = new Set(keys);\n\tconst result = {};\n\tfor (const [key, value] of Object.entries(obj)) if (!keysSet.has(key)) result[key] = value;\n\treturn result;\n}\n//#endregion\nexport { isArray, omit };\n\n//# sourceMappingURL=index.mjs.map","<script setup lang=\"ts\">\nimport type { TableColumns } from './types'\nimport { omit } from '@sum-one/utils'\nimport { defineComponent } from 'vue'\n\ninterface TableDataProps {\n  column: TableColumns\n  align: string\n}\nconst props = defineProps<TableDataProps>()\n\nconst RenderCell = defineComponent({\n  props: {\n    column: {\n      type: Object,\n      required: true\n    },\n    scope: {\n      type: Object,\n      required: true\n    }\n  },\n  setup(props) {\n    return () => {\n      const column = props.column as TableColumns\n      const scope = props.scope as any\n\n      return column.render?.({\n        ...scope,\n        cellValue: column.prop ? scope.row?.[column.prop] : undefined\n      })\n    }\n  }\n})\n</script>\n\n<template>\n  <el-table-column\n    v-bind=\" omit(column, ['label', 'align', 'render', 'children'])\"\n    :label=\"typeof props.column.label === 'string' ? props.column.label : undefined\"\n    :prop=\"props.column.prop\"\n    :align=\"props.column.align || props.align\"\n  >\n    <template v-if=\"props.column.children?.length\" #default>\n      <table-data\n        v-for=\"(item, index) in props.column.children\"\n        :key=\"item.prop || index\"\n        :align=\"props.column.align || props.align\"\n        :column=\"item\"\n      />\n    </template>\n\n    <template v-else-if=\"props.column.render\" #default=\"scope\">\n      <RenderCell :column=\"props.column\" :scope=\"scope\" />\n    </template>\n\n    <template v-if=\"props.column.label && typeof props.column.label !== 'string'\" #header>\n      <component :is=\"props.column.label\" />\n    </template>\n  </el-table-column>\n</template>\n","<script setup lang=\"ts\">\nimport type { TableColumns } from './types'\nimport { omit } from '@sum-one/utils'\nimport { defineComponent } from 'vue'\n\ninterface TableDataProps {\n  column: TableColumns\n  align: string\n}\nconst props = defineProps<TableDataProps>()\n\nconst RenderCell = defineComponent({\n  props: {\n    column: {\n      type: Object,\n      required: true\n    },\n    scope: {\n      type: Object,\n      required: true\n    }\n  },\n  setup(props) {\n    return () => {\n      const column = props.column as TableColumns\n      const scope = props.scope as any\n\n      return column.render?.({\n        ...scope,\n        cellValue: column.prop ? scope.row?.[column.prop] : undefined\n      })\n    }\n  }\n})\n</script>\n\n<template>\n  <el-table-column\n    v-bind=\" omit(column, ['label', 'align', 'render', 'children'])\"\n    :label=\"typeof props.column.label === 'string' ? props.column.label : undefined\"\n    :prop=\"props.column.prop\"\n    :align=\"props.column.align || props.align\"\n  >\n    <template v-if=\"props.column.children?.length\" #default>\n      <table-data\n        v-for=\"(item, index) in props.column.children\"\n        :key=\"item.prop || index\"\n        :align=\"props.column.align || props.align\"\n        :column=\"item\"\n      />\n    </template>\n\n    <template v-else-if=\"props.column.render\" #default=\"scope\">\n      <RenderCell :column=\"props.column\" :scope=\"scope\" />\n    </template>\n\n    <template v-if=\"props.column.label && typeof props.column.label !== 'string'\" #header>\n      <component :is=\"props.column.label\" />\n    </template>\n  </el-table-column>\n</template>\n","<script setup lang=\"ts\">\nimport type { IProps } from './types'\nimport { useTable } from '@sum-one/hooks'\nimport { useAttrs } from 'vue'\nimport SumPagination from './pagination/index.vue'\nimport TableData from './table-data.vue'\n\nconst props = withDefaults(defineProps<IProps>(), {\n  requestAuto: true,\n  index: false,\n  align: 'center',\n  showPagination: true,\n  pagination: () => ({})\n})\nconst attrs = useAttrs()\n\nconst { data, loading, pagination, handlePageChange, handleSizeChange } = useTable({\n  ...props,\n  defaultPagination: {\n    page: props.pagination.currentPage ?? props.pagination.defaultCurrentPage,\n    pageSize: props.pagination.pageSize ?? props.pagination.defaultPageSize\n  }\n})\n</script>\n\n<template>\n  <div>\n    <!-- <span v-if=\"props.title\">{{ props.title }}</span> -->\n    <el-table v-loading=\"loading\" v-bind=\"{ ...attrs, ...props }\" :data=\"data\">\n      <el-table-column v-if=\"props.selection\" type=\"selection\" />\n      <el-table-column v-if=\"props.index\" type=\"index\" />\n      <template\n        v-for=\"(item, index) in props.columns\"\n        :key=\"item.prop || index\"\n      >\n        <TableData :align=\"props.align\" :column=\"item\" />\n      </template>\n    </el-table>\n\n    <SumPagination\n      v-if=\"props.showPagination\"\n      v-bind=\"props.pagination\"\n      :current-page=\"pagination.page\"\n      :page-size=\"pagination.pageSize\"\n      :total=\"pagination.total\"\n      @current-change=\"handlePageChange\"\n      @size-change=\"handleSizeChange\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { IProps } from './types'\nimport { useTable } from '@sum-one/hooks'\nimport { useAttrs } from 'vue'\nimport SumPagination from './pagination/index.vue'\nimport TableData from './table-data.vue'\n\nconst props = withDefaults(defineProps<IProps>(), {\n  requestAuto: true,\n  index: false,\n  align: 'center',\n  showPagination: true,\n  pagination: () => ({})\n})\nconst attrs = useAttrs()\n\nconst { data, loading, pagination, handlePageChange, handleSizeChange } = useTable({\n  ...props,\n  defaultPagination: {\n    page: props.pagination.currentPage ?? props.pagination.defaultCurrentPage,\n    pageSize: props.pagination.pageSize ?? props.pagination.defaultPageSize\n  }\n})\n</script>\n\n<template>\n  <div>\n    <!-- <span v-if=\"props.title\">{{ props.title }}</span> -->\n    <el-table v-loading=\"loading\" v-bind=\"{ ...attrs, ...props }\" :data=\"data\">\n      <el-table-column v-if=\"props.selection\" type=\"selection\" />\n      <el-table-column v-if=\"props.index\" type=\"index\" />\n      <template\n        v-for=\"(item, index) in props.columns\"\n        :key=\"item.prop || index\"\n      >\n        <TableData :align=\"props.align\" :column=\"item\" />\n      </template>\n    </el-table>\n\n    <SumPagination\n      v-if=\"props.showPagination\"\n      v-bind=\"props.pagination\"\n      :current-page=\"pagination.page\"\n      :page-size=\"pagination.pageSize\"\n      :total=\"pagination.total\"\n      @current-change=\"handlePageChange\"\n      @size-change=\"handleSizeChange\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@sum-one/components",
+  "type": "module",
+  "version": "0.0.1",
+  "packageManager": "pnpm@10.28.2",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "tsdown --watch",
+    "build": "tsdown"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "element-plus": ">=2.0.0 <3.0.0",
+    "vue": ">=3.2.0 <4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "element-plus": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@vueuse/core": "^14.3.0"
+  },
+  "devDependencies": {
+    "@sum-one/config": "workspace:*",
+    "@sum-one/hooks": "workspace:*",
+    "@sum-one/utils": "workspace:*",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "tsdown": "^0.22.0",
+    "vite": "^8.0.13",
+    "vue-tsc": "^3.3.1"
+  }
+}