@vuetkit/components 0.0.11 → 0.0.13

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
 
@@ -18,3 +19,7 @@ Collection of business development Composable Components for Vue3 + ElementPlus
 ### Table
 
 - [useTable](/components/src/table/useTable/)
+
+### Data
+
+- [useDescriptions](/components/src/data/useDescriptions/)

package/dist/index.d.ts

@@ -1,8 +1,23 @@
 import { RequestService } from "@vuetkit/core";
-import { ComponentSize, FormRules, MessageProps, MessageType, PaginationProps, TableProps } from "element-plus";
+import { ComponentSize, DescriptionItemProps, DescriptionProps, 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/data/useDescriptions/index.d.ts
+interface DescriptionsColumn extends Partial<DescriptionItemProps> {
+  value?: string;
+  render?: (val: unknown) => VNode;
+  renderLabel?: (val: unknown) => VNode;
+}
+interface DescriptionsOptions<T> extends DescriptionProps {
+  columns: DescriptionsColumn[];
+  service?: RequestService<T>;
+  params?: unknown;
+  formatData?: (data: T) => DescriptionsColumn[];
+}
+type DescriptionsReturnType = [Component];
+declare function useDescriptions<T>(options: DescriptionsOptions<T>): import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>[];
+//#endregion
 //#region src/feedback/useAsyncConfirm/index.d.ts
 interface AsyncConfirmOptions {
   title?: string;
@@ -15,11 +30,21 @@ interface AsyncConfirmOptions {
   confirmSuccess?: () => void;
   confirmError?: (error: unknown) => void;
 }
-declare function useAsyncConfirm(confirmService: RequestService, options: AsyncConfirmOptions): {
+declare function useAsyncConfirm<T>(confirmService: RequestService<T>, options: AsyncConfirmOptions): {
   loading: import("vue").Ref<boolean, boolean>;
   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;
@@ -82,6 +107,10 @@ declare function useForm<T extends object>(options: FormOptions<T>): FormReturnT
 //#endregion
 //#region src/table/useTable/index.d.ts
 type DefaultRow = Record<PropertyKey, any>;
+interface PaginationData<T> {
+  data: T[];
+  total: number;
+}
 interface TableColumnOptions<T extends DefaultRow> extends TableColumnProps<T> {
   render?: (row: T) => VNode | string;
   children?: TableColumnOptions<T>[];
@@ -92,7 +121,7 @@ interface PaginationOptions extends Partial<PaginationProps> {
 }
 interface TableOptions<T extends DefaultRow> extends TableProps<T> {
   columns: TableColumnOptions<T>[];
-  service?: RequestService;
+  service?: RequestService<T[] | PaginationData<T>>;
   params?: MaybeRef<unknown> | unknown;
   formatData?: (res: unknown) => T[];
   align?: 'left' | 'center' | 'right';
@@ -104,4 +133,4 @@ interface TableOptions<T extends DefaultRow> extends TableProps<T> {
 type TableReturn = [Component];
 declare function useTable<T extends DefaultRow>(options: TableOptions<T>): TableReturn;
 //#endregion
-export { AsyncConfirmOptions, CustomRender, DefaultComponentKey, FormItemType, FormOptions, FormReturnType, FormRuleFn, FormSchema, PaginationOptions, Recordable, TableColumnOptions, TableOptions, TableReturn, setDeepProperty, useAsyncConfirm, useForm, useMessage, useTable };
+export { AsyncConfirmOptions, CustomRender, DefaultComponentKey, DescriptionsColumn, DescriptionsOptions, DescriptionsReturnType, FormItemType, FormOptions, FormReturnType, FormRuleFn, FormSchema, PaginationOptions, Recordable, TableColumnOptions, TableOptions, TableReturn, setDeepProperty, useAsyncConfirm, useDescriptions, useDialog, useForm, useMessage, useTable };

package/dist/index.js

@@ -1,7 +1,55 @@
 import { useRequest } from "@vuetkit/core";
-import { ElButton, ElCascader, ElCheckbox, ElCol, ElColorPicker, ElDatePicker, ElForm, ElFormItem, ElInput, ElInputNumber, ElInputOtp, ElMention, ElMessage, ElMessageBox, ElPagination, ElRadio, ElRate, ElRow, ElSelect, ElSelectV2, ElSlider, ElSwitch, ElTable, ElTableColumn, ElTimePicker, ElTimeSelect, ElTransfer, ElTreeSelect, ElUpload, vLoading } from "element-plus";
-import { isFunc, realObj } from "@vuetkit/shared";
+import { ElButton, ElCascader, ElCheckbox, ElCol, ElColorPicker, ElDatePicker, ElDescriptions, ElDescriptionsItem, 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/data/useDescriptions/index.ts
+function useDescriptions(options) {
+	const { columns = [], service, params, formatData, ...rest } = options;
+	const { data, loading } = service ? useRequest(service, {
+		defaultParams: params,
+		formatData: formatData || void 0
+	}) : {};
+	const descriptionsColumns = computed(() => (data === null || data === void 0 ? void 0 : data.value) || columns);
+	return [defineComponent((props, { slots }) => {
+		const renderColumns = () => {
+			var _descriptionsColumns$;
+			return (_descriptionsColumns$ = descriptionsColumns.value) === null || _descriptionsColumns$ === void 0 ? void 0 : _descriptionsColumns$.map((item) => {
+				return h(ElDescriptionsItem, { ...item }, {
+					default: () => {
+						if (item === null || item === void 0 ? void 0 : item.render) return item.render(item === null || item === void 0 ? void 0 : item.value);
+						return (item === null || item === void 0 ? void 0 : item.value) || "";
+					},
+					label: () => {
+						var _item$renderLabel;
+						return item === null || item === void 0 || (_item$renderLabel = item.renderLabel) === null || _item$renderLabel === void 0 ? void 0 : _item$renderLabel.call(item, item.label);
+					}
+				});
+			});
+		};
+		return () => {
+			var _loading$value;
+			return withDirectives(h(ElDescriptions, {
+				...rest,
+				...props
+			}, {
+				default: () => {
+					if (slots.default) return slots.default();
+					if (!descriptionsColumns.value.length) return "";
+					return renderColumns();
+				},
+				title: () => {
+					var _slots$title;
+					return (_slots$title = slots.title) === null || _slots$title === void 0 ? void 0 : _slots$title.call(slots);
+				},
+				extra: () => {
+					var _slots$extra;
+					return (_slots$extra = slots.extra) === null || _slots$extra === void 0 ? void 0 : _slots$extra.call(slots);
+				}
+			}), [[vLoading, (_loading$value = loading === null || loading === void 0 ? void 0 : loading.value) !== null && _loading$value !== void 0 ? _loading$value : false]]);
+		};
+	})];
+}
+//#endregion
 //#region src/feedback/useMessage/index.ts
 const DEFAULT_DURATION = 3e3;
 const DEFAULT_SHOW_CLOSE = true;
@@ -80,6 +128,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,
@@ -420,4 +512,4 @@ function useTable(options) {
 	})];
 }
 //#endregion
-export { setDeepProperty, useAsyncConfirm, useForm, useMessage, useTable };
+export { setDeepProperty, useAsyncConfirm, useDescriptions, useDialog, useForm, useMessage, useTable };

package/package.json

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