@vuetkit/components 0.0.7 → 0.0.9

package/README.md

@@ -1,12 +1,16 @@
-# Components
+# Composable Components
 
 ## Description
 
-Collection of business development components for Vue3 + ElementPlus projects.
+Collection of business development Composable Components for Vue3 + ElementPlus projects.
 
-## All Components / Component Hooks
+## All Composable Components
 
 ### Feedback
 
 - [useMessage](/components/src/feedback/useMessage/)
 - [useAsyncConfirm](/components/src/feedback/useAsyncConfirm/)
+
+### Form
+
+- [useForm](/components/src/form/useForm/)

package/dist/index.d.ts

@@ -1,5 +1,24 @@
-import { MessageProps } from "element-plus";
+import { RequestService } from "@vuetkit/core";
+import { ComponentSize, FormRules, MessageProps, MessageType } from "element-plus";
+import { Component } from "vue";
 
+//#region src/feedback/useAsyncConfirm/index.d.ts
+interface AsyncConfirmOptions {
+  title?: string;
+  message?: string;
+  type?: MessageType;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+  successMessage?: string;
+  errorMessage?: string;
+  confirmSuccess?: () => void;
+  confirmError?: (error: unknown) => void;
+}
+declare function useAsyncConfirm(confirmService: RequestService, options: AsyncConfirmOptions): {
+  loading: import("vue").Ref<boolean, boolean>;
+  confirm: (params?: unknown) => void;
+};
+//#endregion
 //#region src/feedback/useMessage/index.d.ts
 declare function useMessage(options?: MessageProps): {
   success: (message: string) => import("element-plus").MessageHandler;
@@ -9,4 +28,54 @@ declare function useMessage(options?: MessageProps): {
   closeAll: () => void;
 };
 //#endregion
-export { useMessage };
+//#region src/form/useForm/index.d.ts
+type CustomRender = (...args: unknown[]) => unknown;
+type Recordable = Record<string, unknown>;
+type DeepKeys<T> = T extends null | undefined ? never : T extends object ? { [K in keyof T]: K extends string ? T[K] extends null | undefined ? `${K}` : T[K] extends object ? `${K}` | `${K}.${DeepKeys<T[K]>}` : `${K}` : never }[keyof T] : never;
+type DefaultComponentKey = 'input' | 'select' | 'date-picker' | 'time-picker' | 'checkbox' | 'radio' | 'upload' | 'input-number' | 'switch' | 'rate' | 'tree-select' | 'cascader' | 'color-picker' | 'input-otp' | 'mention' | 'select-v2' | 'slider' | 'time-select' | 'transfer';
+type FormItemType = DefaultComponentKey | string | CustomRender;
+interface FormSchema<T> {
+  label: string;
+  prop: DeepKeys<T>;
+  type: FormItemType;
+  span?: number;
+  componentProps?: Recordable;
+}
+type FormRuleFn<T> = (data: T) => FormRules<Recordable>;
+interface FormOptions<T> {
+  'schemas': FormSchema<T>[];
+  'rules'?: FormRules<Recordable> | FormRuleFn<T>;
+  'defaultData'?: T;
+  'inline'?: boolean;
+  'colSpan'?: number;
+  'size'?: ComponentSize;
+  'rowGutter'?: number;
+  'labelWidth'?: string;
+  'labelPosition'?: 'left' | 'top' | 'right';
+  'labelSuffix'?: string;
+  'validate-on-rule-change'?: boolean;
+  'disabled'?: boolean;
+  'require-asterisk-position'?: 'left' | 'right';
+  'scrollTo-error'?: boolean;
+  'scroll-into-view-options'?: boolean | ScrollIntoViewOptions;
+  'status-icon'?: boolean;
+  'show-message'?: boolean;
+  'inline-message'?: boolean;
+  'enterCallback'?: () => void;
+  /**
+   * Custom component merged with default component. Only affects this useForm instance.
+   * eg: { 'c-input': CInput, 'c-select': CSelect }
+   * If the same key will retain the custom component.
+   */
+  'customComponent'?: Record<string, Component>;
+}
+type FormReturnType<T extends object> = [Component, {
+  validate: (callback: (data: T) => void) => void;
+  reset: () => void;
+  getData: () => T;
+  setData: (newData: T) => void;
+}];
+declare function setDeepProperty(data: Recordable, propArr: string[], value: unknown): void;
+declare function useForm<T extends object>(options: FormOptions<T>): FormReturnType<T>;
+//#endregion
+export { AsyncConfirmOptions, CustomRender, DefaultComponentKey, FormItemType, FormOptions, FormReturnType, FormRuleFn, FormSchema, Recordable, setDeepProperty, useAsyncConfirm, useForm, useMessage };

package/dist/index.js

@@ -1,4 +1,7 @@
-import { ElMessage } from "element-plus";
+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, ElTimePicker, ElTimeSelect, ElTransfer, ElTreeSelect, ElUpload } from "element-plus";
+import { isFunc } from "@vuetkit/shared";
+import { computed, defineComponent, h, nextTick, onMounted, ref, useTemplateRef } from "vue";
 //#region src/feedback/useMessage/index.ts
 const DEFAULT_DURATION = 3e3;
 const DEFAULT_SHOW_CLOSE = true;
@@ -44,4 +47,227 @@ function useMessage(options = {}) {
 	};
 }
 //#endregion
-export { useMessage };
+//#region src/feedback/useAsyncConfirm/index.ts
+function useAsyncConfirm(confirmService, options) {
+	const { title = "Confirm", message = "Sure Confirm?", type = "error", confirmButtonText = "Sure", cancelButtonText = "Cancel", confirmSuccess, confirmError, successMessage, errorMessage } = options || {};
+	const { loading, execute: executeConfirm, error } = useRequest(confirmService, { manual: true });
+	const { success, error: showError } = useMessage();
+	function confirm(params) {
+		ElMessageBox.confirm(message, title, {
+			confirmButtonText,
+			cancelButtonText,
+			type,
+			beforeClose: async (action, instance, done) => {
+				if (action === "confirm") {
+					instance.confirmButtonLoading = true;
+					await executeConfirm(params);
+					instance.confirmButtonLoading = false;
+					if (error.value) {
+						if (errorMessage) showError(errorMessage);
+						confirmError === null || confirmError === void 0 || confirmError(error.value);
+					} else {
+						if (successMessage) success(successMessage);
+						confirmSuccess === null || confirmSuccess === void 0 || confirmSuccess();
+					}
+					done();
+				} else done();
+			}
+		}).catch(() => {});
+	}
+	return {
+		loading,
+		confirm
+	};
+}
+//#endregion
+//#region src/form/useForm/index.ts
+const defaultComponent = {
+	"input": ElInput,
+	"select": ElSelect,
+	"date-picker": ElDatePicker,
+	"time-picker": ElTimePicker,
+	"checkbox": ElCheckbox,
+	"radio": ElRadio,
+	"upload": ElUpload,
+	"input-number": ElInputNumber,
+	"switch": ElSwitch,
+	"rate": ElRate,
+	"tree-select": ElTreeSelect,
+	"cascader": ElCascader,
+	"color-picker": ElColorPicker,
+	"input-otp": ElInputOtp,
+	"mention": ElMention,
+	"select-v2": ElSelectV2,
+	"slider": ElSlider,
+	"time-select": ElTimeSelect,
+	"transfer": ElTransfer
+};
+function setDeepProperty(data, propArr, value) {
+	let temp = data;
+	for (let i = 0; i < propArr.length - 1; i++) {
+		const key = propArr[i];
+		if (temp[key] === void 0) temp[key] = {};
+		temp = temp[key];
+	}
+	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 || {};
+	const components = {};
+	if (customComponent) Object.assign(components, defaultComponent, customComponent);
+	else Object.assign(components, defaultComponent);
+	const initFormData = schemas.reduce((prev, cur) => {
+		const prop = cur.prop;
+		const propArr = prop.split(".");
+		if ((propArr === null || propArr === void 0 ? void 0 : propArr.length) < 2) prev[prop] = void 0;
+		else setDeepProperty(prev, propArr, void 0);
+		return prev;
+	}, {});
+	const defaultFormData = defaultData || initFormData;
+	const copyInitFormData = JSON.parse(JSON.stringify(defaultFormData));
+	const formData = ref(defaultFormData);
+	const formInstanceRef = ref();
+	function getComponent(type) {
+		if (type && typeof type !== "string") return type;
+		return components[type];
+	}
+	const FormComp = defineComponent((props, { slots }) => {
+		const formRef = useTemplateRef("formRef");
+		/**
+		* get data value
+		* @data data object
+		* @prop bind prop
+		* eg:
+		*   prop: 'user.name'
+		*   data: {
+		*     user: {
+		*       usename: 'vuetkit',
+		*     }
+		*   }
+		*/
+		function getFormData(data, prop) {
+			var _prop;
+			const propArr = prop.split(".");
+			if ((propArr === null || propArr === void 0 ? void 0 : propArr.length) < 2) return (_prop = data[prop]) !== null && _prop !== void 0 ? _prop : void 0;
+			let value = data;
+			for (const propItem of propArr) {
+				if (value === void 0 || value === null) return;
+				if (typeof value !== "object") return;
+				value = value[propItem];
+			}
+			return value;
+		}
+		function setFormData(data, prop, value) {
+			const propArr = prop.split(".");
+			if ((propArr === null || propArr === void 0 ? void 0 : propArr.length) < 2) {
+				data[prop] = value;
+				return;
+			}
+			setDeepProperty(data, propArr, value);
+		}
+		function handleEnter() {
+			enterCallback === null || enterCallback === void 0 || enterCallback();
+		}
+		const renderFormItem = (schema, slots) => {
+			if (isFunc(schema.type)) return h(schema.type, {});
+			return h(ElFormItem, {
+				label: schema.label,
+				prop: schema.prop,
+				size
+			}, () => {
+				if (slots[schema.prop]) {
+					var _slots$schema$prop;
+					return (_slots$schema$prop = slots[schema.prop]) === null || _slots$schema$prop === void 0 ? void 0 : _slots$schema$prop.call(slots);
+				}
+				const component = getComponent(schema.type);
+				if (!component) return null;
+				return h(component, {
+					"modelValue": getFormData(formData.value, schema.prop),
+					"onUpdate:modelValue": (val) => {
+						return setFormData(formData.value, schema.prop, val);
+					},
+					"onKeydown": (e) => {
+						if (e.key === "Enter" && !e.ctrlKey && !e.metaKey) {
+							e.preventDefault();
+							e.stopPropagation();
+							handleEnter();
+						}
+					},
+					...schema.componentProps || {}
+				});
+			});
+		};
+		const renderFormItems = (slots) => {
+			return schemas.map((schema) => {
+				if (inline) return renderFormItem(schema, slots);
+				return h(ElCol, {
+					span: schema.span ? schema.span : colSpan,
+					propItem: schema.prop
+				}, () => renderFormItem(schema, slots));
+			});
+		};
+		onMounted(async () => {
+			await nextTick();
+			formInstanceRef.value = formRef.value;
+		});
+		const formRules = computed(() => {
+			if (isFunc(rules)) {
+				var _ref;
+				return (_ref = rules === null || rules === void 0 ? void 0 : rules(formData.value)) !== null && _ref !== void 0 ? _ref : void 0;
+			}
+			return rules;
+		});
+		return () => {
+			return h(ElForm, {
+				model: formData.value,
+				rules: formRules.value,
+				size,
+				validateOnRuleChange,
+				labelWidth,
+				labelPosition,
+				labelSuffix,
+				ref: "formRef",
+				inline,
+				disabled,
+				scrollToError,
+				scrollIntoViewOptions,
+				statusIcon,
+				requireAsteriskPosition,
+				showMessage,
+				inlineMessage,
+				...props
+			}, () => {
+				const children = [];
+				if (inline) children.push(renderFormItems(slots));
+				else children.push(h(ElRow, { gutter: rowGutter }, () => renderFormItems(slots)));
+				if (slots === null || slots === void 0 ? void 0 : slots.footer) children.push(slots.footer());
+				return children;
+			});
+		};
+	});
+	async function validate(callback) {
+		var _formInstanceRef$valu;
+		return await ((_formInstanceRef$valu = formInstanceRef.value) === null || _formInstanceRef$valu === void 0 ? void 0 : _formInstanceRef$valu.validate((valid) => {
+			if (valid) callback === null || callback === void 0 || callback(formData.value);
+		}));
+	}
+	function reset() {
+		var _formInstanceRef$valu2;
+		formData.value = copyInitFormData;
+		(_formInstanceRef$valu2 = formInstanceRef.value) === null || _formInstanceRef$valu2 === void 0 || _formInstanceRef$valu2.resetFields();
+	}
+	function getData() {
+		return formData.value;
+	}
+	function setData(newData) {
+		formData.value = newData;
+	}
+	return [FormComp, {
+		validate,
+		reset,
+		getData,
+		setData
+	}];
+}
+//#endregion
+export { setDeepProperty, useAsyncConfirm, useForm, useMessage };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuetkit/components",
   "type": "module",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "Collection of business development components for Vue3 projects",
   "author": "Kalu5",
   "license": "MIT",
@@ -20,6 +20,9 @@
     "element-plus": "^2.14.1",
     "vue": "^3.5.35"
   },
+  "dependencies": {
+    "@vuetkit/shared": "0.0.9"
+  },
   "scripts": {
     "build": "tsdown --config-loader tsx"
   }