@vuetkit/components 0.0.8 → 0.0.10

package/README.md

@@ -1,12 +1,20 @@
-# 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/)
+
+### Table
+
+- [useTable](/components/src/table/useTable/)

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { RequestService } from "@vuetkit/core";
-import { MessageProps, MessageType } from "element-plus";
+import { ComponentSize, FormRules, MessageProps, MessageType, TableColumnCtx, TableProps } from "element-plus";
+import { Component, VNode } from "vue";
 
 //#region src/feedback/useAsyncConfirm/index.d.ts
 interface AsyncConfirmOptions {
@@ -27,4 +28,88 @@ declare function useMessage(options?: MessageProps): {
   closeAll: () => void;
 };
 //#endregion
-export { AsyncConfirmOptions, useAsyncConfirm, 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
+//#region src/table/useTable/index.d.ts
+type DefaultRow = Record<PropertyKey, any>;
+interface TableColumn<T extends DefaultRow> {
+  render?: (row: T) => VNode | string;
+  children?: TableColumn<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 TableOptions<T extends DefaultRow> extends TableProps<T> {
+  columns: TableColumn<T>[];
+  align?: 'left' | 'center' | 'right';
+  headerAlign?: 'left' | 'center' | 'right';
+}
+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 };

package/dist/index.js

@@ -1,5 +1,7 @@
 import { useRequest } from "@vuetkit/core";
-import { ElMessage, ElMessageBox } from "element-plus";
+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";
 //#region src/feedback/useMessage/index.ts
 const DEFAULT_DURATION = 3e3;
 const DEFAULT_SHOW_CLOSE = true;
@@ -78,4 +80,238 @@ function useAsyncConfirm(confirmService, options) {
 	};
 }
 //#endregion
-export { useAsyncConfirm, useMessage };
+//#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
+//#region src/table/useTable/index.ts
+function useTable(options) {
+	const { columns, align, headerAlign, ...rest } = options;
+	return [defineComponent((props, { slots }) => {
+		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;
+		};
+		const renderTableItem = (column) => {
+			const { align: columnAlign, headerAlign: columnHeaderAlign } = column;
+			const tableItemAlign = columnAlign || align || "left";
+			const tableItemHeaderAlign = columnHeaderAlign || headerAlign || "left";
+			return h(ElTableColumn, {
+				...column,
+				align: tableItemAlign,
+				headerAlign: tableItemHeaderAlign
+			}, renderTableItemNodes(column));
+		};
+		const renderTableItems = (columns) => {
+			return columns.filter(Boolean).map((column) => {
+				return renderTableItem(column);
+			});
+		};
+		return () => {
+			return h(ElTable, {
+				...rest,
+				...props
+			}, {
+				default: () => {
+					const tableNodes = [];
+					if (columns.length) tableNodes.push(...renderTableItems(columns));
+					if (slots.actions) tableNodes.push(slots.actions());
+					return tableNodes;
+				},
+				append: slots === null || slots === void 0 ? void 0 : slots.append,
+				empty: slots === null || slots === void 0 ? void 0 : slots.empty
+			});
+		};
+	})];
+}
+//#endregion
+export { setDeepProperty, useAsyncConfirm, useForm, useMessage, useTable };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuetkit/components",
   "type": "module",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "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.10"
+  },
   "scripts": {
     "build": "tsdown --config-loader tsx"
   }