@vuetkit/components 0.0.9 → 0.0.10

package/README.md

@@ -14,3 +14,7 @@ Collection of business development Composable Components for Vue3 + ElementPlus
 ### Form
 
 - [useForm](/components/src/form/useForm/)
+
+### Table
+
+- [useTable](/components/src/table/useTable/)

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { RequestService } from "@vuetkit/core";
-import { ComponentSize, FormRules, MessageProps, MessageType } from "element-plus";
-import { Component } from "vue";
+import { ComponentSize, FormRules, MessageProps, MessageType, TableColumnCtx, TableProps } from "element-plus";
+import { Component, VNode } from "vue";
 
 //#region src/feedback/useAsyncConfirm/index.d.ts
 interface AsyncConfirmOptions {
@@ -78,4 +78,38 @@ type FormReturnType<T extends object> = [Component, {
 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 };
+//#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,5 @@
 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 { 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
@@ -270,4 +270,48 @@ function useForm(options) {
 	}];
 }
 //#endregion
-export { setDeepProperty, useAsyncConfirm, useForm, useMessage };
+//#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.9",
+  "version": "0.0.10",
   "description": "Collection of business development components for Vue3 projects",
   "author": "Kalu5",
   "license": "MIT",
@@ -21,7 +21,7 @@
     "vue": "^3.5.35"
   },
   "dependencies": {
-    "@vuetkit/shared": "0.0.9"
+    "@vuetkit/shared": "0.0.10"
   },
   "scripts": {
     "build": "tsdown --config-loader tsx"