@vuetkit/components 0.0.10 → 0.0.12

package/README.md

@@ -10,6 +10,7 @@ Collection of business development Composable Components for Vue3 + ElementPlus
 
 - [useMessage](/components/src/feedback/useMessage/)
 - [useAsyncConfirm](/components/src/feedback/useAsyncConfirm/)
+- [useDialog](/components/src/feedback/useDialog/)
 
 ### Form
 

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import { RequestService } from "@vuetkit/core";
-import { ComponentSize, FormRules, MessageProps, MessageType, TableColumnCtx, TableProps } from "element-plus";
-import { Component, VNode } from "vue";
+import { ComponentSize, DialogProps, FormRules, MessageProps, MessageType, PaginationProps, TableProps } from "element-plus";
+import { CSSProperties, Component, MaybeRef, VNode } from "vue";
+import { TableColumnProps } from "element-plus/es/components/table/src/table-column/defaults.mjs";
 
 //#region src/feedback/useAsyncConfirm/index.d.ts
 interface AsyncConfirmOptions {
@@ -19,6 +20,16 @@ declare function useAsyncConfirm(confirmService: RequestService, options: AsyncC
   confirm: (params?: unknown) => void;
 };
 //#endregion
+//#region src/feedback/useDialog/index.d.ts
+interface DialogOptions extends DialogProps {
+  title?: string;
+}
+type DialogReturn = [Component, {
+  open: () => void;
+  close: () => void;
+}];
+declare function useDialog(options: DialogOptions): DialogReturn;
+//#endregion
 //#region src/feedback/useMessage/index.d.ts
 declare function useMessage(options?: MessageProps): {
   success: (message: string) => import("element-plus").MessageHandler;
@@ -76,40 +87,31 @@ type FormReturnType<T extends object> = [Component, {
   setData: (newData: T) => void;
 }];
 declare function setDeepProperty(data: Recordable, propArr: string[], value: unknown): void;
+declare function useForm(options: undefined): [null, Recordable];
 declare function useForm<T extends object>(options: FormOptions<T>): FormReturnType<T>;
 //#endregion
 //#region src/table/useTable/index.d.ts
 type DefaultRow = Record<PropertyKey, any>;
-interface TableColumn<T extends DefaultRow> {
+interface TableColumnOptions<T extends DefaultRow> extends TableColumnProps<T> {
   render?: (row: T) => VNode | string;
-  children?: TableColumn<T>[];
+  children?: TableColumnOptions<T>[];
   prop?: string;
-  label?: string;
-  width?: string | number;
-  minWidth?: string | number;
-  fixed?: boolean | 'left' | 'right';
-  align?: 'left' | 'center' | 'right';
-  headerAlign?: 'left' | 'center' | 'right';
-  className?: string;
-  labelClassName?: string;
-  showOverflowTooltip?: boolean;
-  sortable?: boolean | string;
-  sortMethod?: (a: T, b: T) => number;
-  sortBy?: string | string[];
-  sortOrders?: ('ascending' | 'descending')[];
-  resizable?: boolean;
-  formatter?: (row: T, column: TableColumnCtx<T>, cellValue: any, index: number) => any;
-  type?: 'selection' | 'index' | 'expand';
-  selectable?: (row: T, index: number) => boolean;
-  reserveSelection?: boolean;
-  index?: number | ((index: number) => number);
+}
+interface PaginationOptions extends Partial<PaginationProps> {
+  wrapStyle?: CSSProperties;
 }
 interface TableOptions<T extends DefaultRow> extends TableProps<T> {
-  columns: TableColumn<T>[];
+  columns: TableColumnOptions<T>[];
+  service?: RequestService;
+  params?: MaybeRef<unknown> | unknown;
+  formatData?: (res: unknown) => T[];
   align?: 'left' | 'center' | 'right';
   headerAlign?: 'left' | 'center' | 'right';
+  paginationConfig?: boolean | PaginationOptions;
+  tableWrapStyle?: CSSProperties;
+  searchFormConfig?: FormOptions<T>;
 }
 type TableReturn = [Component];
 declare function useTable<T extends DefaultRow>(options: TableOptions<T>): TableReturn;
 //#endregion
-export { AsyncConfirmOptions, CustomRender, DefaultComponentKey, FormItemType, FormOptions, FormReturnType, FormRuleFn, FormSchema, Recordable, TableColumn, TableOptions, TableReturn, setDeepProperty, useAsyncConfirm, useForm, useMessage, useTable };
+export { AsyncConfirmOptions, CustomRender, DefaultComponentKey, FormItemType, FormOptions, FormReturnType, FormRuleFn, FormSchema, PaginationOptions, Recordable, TableColumnOptions, TableOptions, TableReturn, setDeepProperty, useAsyncConfirm, useDialog, useForm, useMessage, useTable };

package/dist/index.js

@@ -1,7 +1,7 @@
 import { useRequest } from "@vuetkit/core";
-import { ElCascader, ElCheckbox, ElCol, ElColorPicker, ElDatePicker, ElForm, ElFormItem, ElInput, ElInputNumber, ElInputOtp, ElMention, ElMessage, ElMessageBox, ElRadio, ElRate, ElRow, ElSelect, ElSelectV2, ElSlider, ElSwitch, ElTable, ElTableColumn, ElTimePicker, ElTimeSelect, ElTransfer, ElTreeSelect, ElUpload } from "element-plus";
-import { isFunc } from "@vuetkit/shared";
-import { computed, defineComponent, h, nextTick, onMounted, ref, useTemplateRef } from "vue";
+import { ElButton, ElCascader, ElCheckbox, ElCol, ElColorPicker, ElDatePicker, ElDialog, ElForm, ElFormItem, ElInput, ElInputNumber, ElInputOtp, ElMention, ElMessage, ElMessageBox, ElPagination, ElRadio, ElRate, ElRow, ElScrollbar, ElSelect, ElSelectV2, ElSlider, ElSwitch, ElTable, ElTableColumn, ElTimePicker, ElTimeSelect, ElTransfer, ElTreeSelect, ElUpload, vLoading } from "element-plus";
+import { computed, defineComponent, h, nextTick, onMounted, reactive, ref, toValue, useTemplateRef, watch, withDirectives } from "vue";
+import { isFunc, realObj } from "@vuetkit/shared";
 //#region src/feedback/useMessage/index.ts
 const DEFAULT_DURATION = 3e3;
 const DEFAULT_SHOW_CLOSE = true;
@@ -80,6 +80,50 @@ function useAsyncConfirm(confirmService, options) {
 	};
 }
 //#endregion
+//#region src/feedback/useDialog/index.ts
+function useDialog(options) {
+	const { title = "Dialog Title" } = options;
+	const showDialog = ref(false);
+	const DialogComp = defineComponent((props, { slots }) => {
+		return () => {
+			return h(ElDialog, {
+				title,
+				"modelValue": showDialog.value,
+				"update:modelValue": (val) => showDialog.value = val,
+				...props,
+				"before-close": () => {
+					showDialog.value = false;
+				}
+			}, {
+				default: () => {
+					return h(ElScrollbar, { maxHeight: "60vh" }, () => {
+						var _slots$default;
+						return h("div", { style: { marginRight: "15px" } }, (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots));
+					});
+				},
+				footer: () => {
+					var _slots$footer;
+					return (_slots$footer = slots.footer) === null || _slots$footer === void 0 ? void 0 : _slots$footer.call(slots);
+				},
+				header: () => {
+					var _slots$header;
+					return (_slots$header = slots.header) === null || _slots$header === void 0 ? void 0 : _slots$header.call(slots);
+				}
+			});
+		};
+	});
+	const open = () => {
+		showDialog.value = true;
+	};
+	const close = () => {
+		showDialog.value = false;
+	};
+	return [DialogComp, {
+		open,
+		close
+	}];
+}
+//#endregion
 //#region src/form/useForm/index.ts
 const defaultComponent = {
 	"input": ElInput,
@@ -112,7 +156,9 @@ function setDeepProperty(data, propArr, value) {
 	temp[propArr[propArr.length - 1]] = value;
 }
 function useForm(options) {
-	const { schemas = [], rules = {}, colSpan = 24, defaultData, disabled = false, inline = false, size, rowGutter = 20, labelWidth, labelSuffix = "", labelPosition = "left", "validate-on-rule-change": validateOnRuleChange = true, enterCallback, customComponent, "scrollTo-error": scrollToError = false, "scroll-into-view-options": scrollIntoViewOptions = true, "status-icon": statusIcon = false, "require-asterisk-position": requireAsteriskPosition = "left", "show-message": showMessage = true, "inline-message": inlineMessage = false } = options || {};
+	var _options$schemas;
+	if (!options || !((_options$schemas = options.schemas) === null || _options$schemas === void 0 ? void 0 : _options$schemas.length)) return [null, {}];
+	const { schemas = [], rules = {}, colSpan = 24, defaultData, disabled = false, inline = false, size, rowGutter = 20, labelWidth, labelSuffix = "", labelPosition = "left", "validate-on-rule-change": validateOnRuleChange = true, enterCallback, customComponent, "scrollTo-error": scrollToError = false, "scroll-into-view-options": scrollIntoViewOptions = true, "status-icon": statusIcon = false, "require-asterisk-position": requireAsteriskPosition = "left", "show-message": showMessage = true, "inline-message": inlineMessage = false } = options;
 	const components = {};
 	if (customComponent) Object.assign(components, defaultComponent, customComponent);
 	else Object.assign(components, defaultComponent);
@@ -272,14 +318,41 @@ function useForm(options) {
 //#endregion
 //#region src/table/useTable/index.ts
 function useTable(options) {
-	const { columns, align, headerAlign, ...rest } = options;
+	const { columns = [], service, params, formatData, align, headerAlign, paginationConfig, searchFormConfig, tableWrapStyle = {}, data = [], ...rest } = options;
+	if ((paginationConfig || searchFormConfig) && !realObj(toValue(params))) throw new Error("params must be an object when paginationConfig or searchFormConfig is provided");
 	return [defineComponent((props, { slots }) => {
+		const pageInfo = reactive({
+			pageSize: 10,
+			currentPage: 1
+		});
+		const [SearchForm, { reset, getData }] = searchFormConfig ? useForm(searchFormConfig) : [null, {
+			reset: () => {},
+			getData: () => ({})
+		}];
+		const requestParams = computed(() => {
+			if (paginationConfig) return {
+				...toValue(params) || {},
+				...searchFormConfig ? (getData === null || getData === void 0 ? void 0 : getData()) || {} : {},
+				currentPage: pageInfo.currentPage,
+				pageSize: pageInfo.pageSize
+			};
+			if (searchFormConfig) return {
+				...toValue(params) || {},
+				...(getData === null || getData === void 0 ? void 0 : getData()) || {}
+			};
+			return toValue(params);
+		});
+		const { data: asyncRequestData, loading, execute } = useRequest(service, {
+			manual: false,
+			defaultParams: requestParams.value,
+			formatData
+		});
 		const renderTableItemNodes = (column) => {
 			var _column$children;
 			if (isFunc(column.render)) return { default: ({ row }) => column.render(row) };
 			const tableItemNodes = [];
 			if (column === null || column === void 0 || (_column$children = column.children) === null || _column$children === void 0 ? void 0 : _column$children.length) tableItemNodes.push(...renderTableItems(column.children));
-			return () => tableItemNodes;
+			return tableItemNodes.length ? () => tableItemNodes : void 0;
 		};
 		const renderTableItem = (column) => {
 			const { align: columnAlign, headerAlign: columnHeaderAlign } = column;
@@ -296,10 +369,48 @@ function useTable(options) {
 				return renderTableItem(column);
 			});
 		};
-		return () => {
-			return h(ElTable, {
+		function executeRequest() {
+			if (service) execute(requestParams.value);
+		}
+		onMounted(() => {
+			if (service) execute();
+		});
+		const handleReset = () => {
+			reset === null || reset === void 0 || reset();
+			executeRequest();
+		};
+		const handleSearch = () => {
+			executeRequest();
+		};
+		const defaultPaginationLayout = "total, sizes, prev, pager, next, jumper";
+		const defaultPaginationWrapStyle = {
+			display: "flex",
+			justifyContent: "flex-end",
+			alignItems: "center",
+			margin: "20px"
+		};
+		watch(() => toValue(params), () => {
+			executeRequest();
+		}, { deep: true });
+		watch(() => [pageInfo.currentPage, pageInfo.pageSize], () => {
+			executeRequest();
+		});
+		const tableData = computed(() => {
+			if (paginationConfig) {
+				var _asyncRequestData$val;
+				return ((_asyncRequestData$val = asyncRequestData.value) === null || _asyncRequestData$val === void 0 ? void 0 : _asyncRequestData$val.data) || [];
+			}
+			return asyncRequestData.value || data || [];
+		});
+		const tableTotal = computed(() => {
+			var _asyncRequestData$val2;
+			return ((_asyncRequestData$val2 = asyncRequestData.value) === null || _asyncRequestData$val2 === void 0 ? void 0 : _asyncRequestData$val2.total) || 0;
+		});
+		const renderTable = () => {
+			return withDirectives(h(ElTable, {
 				...rest,
-				...props
+				...props,
+				data: tableData.value
 			}, {
 				default: () => {
 					const tableNodes = [];
@@ -309,9 +420,48 @@ function useTable(options) {
 				},
 				append: slots === null || slots === void 0 ? void 0 : slots.append,
 				empty: slots === null || slots === void 0 ? void 0 : slots.empty
-			});
+			}), [[vLoading, loading.value]]);
+		};
+		const renderPagination = () => {
+			return h("div", { style: paginationConfig === true ? defaultPaginationWrapStyle : (paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.wrapStyle) || defaultPaginationWrapStyle }, [h(ElPagination, {
+				"currentPage": pageInfo.currentPage,
+				"pageSize": pageInfo.pageSize,
+				"total": tableTotal.value,
+				...paginationConfig === true ? {} : paginationConfig,
+				"layout": paginationConfig === true ? defaultPaginationLayout : (paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.layout) || defaultPaginationLayout,
+				"onUpdate:currentPage": (val) => {
+					pageInfo.currentPage = val;
+				},
+				"onUpdate:pageSize": (val) => {
+					pageInfo.pageSize = val;
+				}
+			})]);
+		};
+		function renderSearchForm() {
+			return h(SearchForm, {}, { footer: () => {
+				return h(ElFormItem, {}, () => [h(ElButton, {
+					type: "default",
+					size: (searchFormConfig === null || searchFormConfig === void 0 ? void 0 : searchFormConfig.size) || "small",
+					onClick: handleReset
+				}, () => "Reset"), h(ElButton, {
+					type: "primary",
+					size: (searchFormConfig === null || searchFormConfig === void 0 ? void 0 : searchFormConfig.size) || "small",
+					onClick: handleSearch
+				}, () => "Search")]);
+			} });
+		}
+		function renderTableWrapChildNodes() {
+			const childNodes = [];
+			if (searchFormConfig) childNodes.push(renderSearchForm());
+			if (slots === null || slots === void 0 ? void 0 : slots.header) childNodes.push(slots.header());
+			childNodes.push(renderTable());
+			if (paginationConfig) childNodes.push(renderPagination());
+			return childNodes;
+		}
+		return () => {
+			return h("div", { style: { ...tableWrapStyle || {} } }, renderTableWrapChildNodes());
 		};
 	})];
 }
 //#endregion
-export { setDeepProperty, useAsyncConfirm, useForm, useMessage, useTable };
+export { setDeepProperty, useAsyncConfirm, useDialog, useForm, useMessage, useTable };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuetkit/components",
   "type": "module",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "Collection of business development components for Vue3 projects",
   "author": "Kalu5",
   "license": "MIT",
@@ -21,7 +21,8 @@
     "vue": "^3.5.35"
   },
   "dependencies": {
-    "@vuetkit/shared": "0.0.10"
+    "@vuetkit/core": "0.0.12",
+    "@vuetkit/shared": "0.0.12"
   },
   "scripts": {
     "build": "tsdown --config-loader tsx"