@vuetkit/components 0.0.21 → 0.0.23

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import { RequestService } from "@vuetkit/core";
-import { CollapseItemProps, CollapseModelValue, CollapseProps, ComponentSize, DescriptionItemProps, DescriptionProps, DialogProps, ElBreadcrumb, ElDropdown, ElMenu, FormRules, MessageProps, MessageType, NotificationOptions, PaginationProps, SegmentedProps, StepProps, StepsProps, TabPaneName, TableProps, TabsPaneContext, TabsProps } from "element-plus";
+import { CollapseItemProps, CollapseModelValue, CollapseProps, ComponentSize, DescriptionItemProps, DescriptionProps, DialogProps, ElBreadcrumb, ElDropdown, ElMenu, FormRules, MessageProps, MessageType, NotificationOptions, PaginationProps, RenderContentContext, SegmentedProps, StepProps, StepsProps, TabPaneName, TableProps, TabsPaneContext, TabsProps, TreeComponentProps, TreeInstance, TreeNodeData, TreeV2Instance } from "element-plus";
 import { CSSProperties, Component, MaybeRef, Ref, VNode } from "vue";
+import { TreeNode, TreeNodeData as TreeNodeData$1, TreeProps } from "element-plus/es/components/tree-v2/src/types";
 import { TableColumnProps } from "element-plus/es/components/table/src/table-column/defaults.mjs";
 
 //#region src/data/useCollapse/index.d.ts
@@ -56,6 +57,37 @@ interface SegmentedOptions<T> extends Partial<SegmentedProps> {
 type SegmentedReturnType = [Component, Ref<SegmentedOptionValue | undefined>];
 declare function useSegmented<T>(options: SegmentedOptions<T>): SegmentedReturnType;
 //#endregion
+//#region src/data/useTree/index.d.ts
+type TreeNode$1 = RenderContentContext['node'];
+interface TreeColumn extends TreeNodeData {
+  children?: TreeColumn[];
+  render?: (node: TreeNode$1, data: TreeNodeData) => VNode;
+}
+interface TreeOptions<T> extends Partial<Omit<TreeComponentProps, 'data'>> {
+  data?: TreeColumn[];
+  service?: RequestService<T>;
+  params?: unknown;
+  formatData?: (data: T) => TreeColumn[];
+  render?: (node: TreeNode$1, data: TreeNodeData) => VNode;
+}
+type TreeReturnType = [Component, Ref<TreeInstance | undefined>];
+declare function useTree<T>(options: TreeOptions<T>): TreeReturnType;
+//#endregion
+//#region src/data/useTreeV2/index.d.ts
+interface TreeV2Column extends TreeNodeData$1 {
+  children?: TreeV2Column[];
+  render?: (node: TreeNode, data: TreeNodeData$1) => VNode;
+}
+interface TreeV2Options<T> extends Omit<TreeProps, 'data'> {
+  data?: TreeV2Column[];
+  service?: RequestService<T>;
+  params?: unknown;
+  formatData?: (data: T) => TreeV2Column[];
+  render?: (node: TreeNode, data: TreeNodeData$1) => VNode;
+}
+type TreeV2ReturnType = [Component, Ref<TreeV2Instance | undefined>];
+declare function useTreeV2<T>(options: TreeV2Options<T>): TreeV2ReturnType;
+//#endregion
 //#region src/feedback/useAsyncConfirm/index.d.ts
 interface AsyncConfirmOptions {
   title?: string;
@@ -327,4 +359,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, BreadcrumbColumn, BreadcrumbOptions, BreadcrumbReturnType, CollapseColumn, CollapseOptions, CollapseReturnType, CustomRender, DefaultComponentKey, DescriptionsColumn, DescriptionsOptions, DescriptionsReturnType, DropdownItem, DropdownOptions, DropdownReturnType, FormItemType, FormOptions, FormReturnType, FormRuleFn, FormSchema, MenuColumn, MenuOptions, MenuReturnType, PaginationOptions, Recordable, SegmentedColumn, SegmentedOptionValue, SegmentedOptions, SegmentedReturnType, StepsColumn, StepsOptions, StepsReturnType, TableColumnOptions, TableOptions, TableReturn, TabsColumn, TabsOptions, TabsReturnType, setDeepProperty, useAsyncConfirm, useBreadcrumb, useCollapse, useDescriptions, useDialog, useDropdown, useForm, useMenu, useMessage, useNotification, useSegmented, useSteps, useTable, useTabs };
+export { AsyncConfirmOptions, BreadcrumbColumn, BreadcrumbOptions, BreadcrumbReturnType, CollapseColumn, CollapseOptions, CollapseReturnType, CustomRender, DefaultComponentKey, DescriptionsColumn, DescriptionsOptions, DescriptionsReturnType, DropdownItem, DropdownOptions, DropdownReturnType, FormItemType, FormOptions, FormReturnType, FormRuleFn, FormSchema, MenuColumn, MenuOptions, MenuReturnType, PaginationOptions, Recordable, SegmentedColumn, SegmentedOptionValue, SegmentedOptions, SegmentedReturnType, StepsColumn, StepsOptions, StepsReturnType, TableColumnOptions, TableOptions, TableReturn, TabsColumn, TabsOptions, TabsReturnType, TreeColumn, TreeOptions, TreeReturnType, TreeV2Column, TreeV2Options, TreeV2ReturnType, setDeepProperty, useAsyncConfirm, useBreadcrumb, useCollapse, useDescriptions, useDialog, useDropdown, useForm, useMenu, useMessage, useNotification, useSegmented, useSteps, useTable, useTabs, useTree, useTreeV2 };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { useRequest } from "@vuetkit/core";
-import { ElBreadcrumb, ElBreadcrumbItem, ElButton, ElCascader, ElCheckbox, ElCol, ElCollapse, ElCollapseItem, ElColorPicker, ElDatePicker, ElDescriptions, ElDescriptionsItem, ElDialog, ElDropdown, ElDropdownItem, ElDropdownMenu, ElForm, ElFormItem, ElInput, ElInputNumber, ElInputOtp, ElMention, ElMenu, ElMenuItem, ElMenuItemGroup, ElMessage, ElMessageBox, ElNotification, ElPagination, ElRadio, ElRate, ElRow, ElScrollbar, ElSegmented, ElSelect, ElSelectV2, ElSlider, ElStep, ElSteps, ElSubMenu, ElSwitch, ElTabPane, ElTable, ElTableColumn, ElTabs, ElTimePicker, ElTimeSelect, ElTransfer, ElTreeSelect, ElUpload, vLoading } from "element-plus";
+import { ElBreadcrumb, ElBreadcrumbItem, ElButton, ElCascader, ElCheckbox, ElCol, ElCollapse, ElCollapseItem, ElColorPicker, ElDatePicker, ElDescriptions, ElDescriptionsItem, ElDialog, ElDropdown, ElDropdownItem, ElDropdownMenu, ElForm, ElFormItem, ElInput, ElInputNumber, ElInputOtp, ElMention, ElMenu, ElMenuItem, ElMenuItemGroup, ElMessage, ElMessageBox, ElNotification, ElPagination, ElRadio, ElRate, ElRow, ElScrollbar, ElSegmented, ElSelect, ElSelectV2, ElSlider, ElStep, ElSteps, ElSubMenu, ElSwitch, ElTabPane, ElTable, ElTableColumn, ElTabs, ElTimePicker, ElTimeSelect, ElTransfer, ElTree, ElTreeSelect, ElTreeV2, 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/useCollapse/index.ts
@@ -161,6 +161,88 @@ function useSegmented(options) {
 	}), modelValue];
 }
 //#endregion
+//#region src/data/useTree/index.ts
+function useTree(options) {
+	const { data = [], service, params, formatData, render, ...rest } = options;
+	const { data: resData, loading } = service ? useRequest(service, {
+		defaultParams: params,
+		formatData: formatData || void 0
+	}) : {};
+	const treeData = computed(() => (resData === null || resData === void 0 ? void 0 : resData.value) || data);
+	const treeRef = ref();
+	return [defineComponent((props, { slots }) => {
+		const renderNodeContent = (node, nodeData) => {
+			const columnRender = nodeData.render;
+			if (typeof columnRender === "function") return columnRender(node, nodeData);
+			if (typeof render === "function") return render(node, nodeData);
+		};
+		return () => {
+			var _loading$value;
+			return withDirectives(h(ElTree, {
+				...rest,
+				...props,
+				ref: treeRef,
+				data: treeData.value
+			}, {
+				default: ({ node, data: nodeData }) => {
+					if (slots.default) return slots.default({
+						node,
+						data: nodeData
+					});
+					const content = renderNodeContent(node, nodeData);
+					if (content) return content;
+					return h("span", {}, node.label);
+				},
+				empty: () => {
+					var _slots$empty;
+					return (_slots$empty = slots.empty) === null || _slots$empty === void 0 ? void 0 : _slots$empty.call(slots);
+				}
+			}), [[vLoading, (_loading$value = loading === null || loading === void 0 ? void 0 : loading.value) !== null && _loading$value !== void 0 ? _loading$value : false]]);
+		};
+	}), treeRef];
+}
+//#endregion
+//#region src/data/useTreeV2/index.ts
+function useTreeV2(options) {
+	const { data = [], service, params, formatData, render, ...rest } = options;
+	const { data: resData, loading } = service ? useRequest(service, {
+		defaultParams: params,
+		formatData: formatData || void 0
+	}) : {};
+	const treeData = computed(() => (resData === null || resData === void 0 ? void 0 : resData.value) || data);
+	const treeRef = ref();
+	return [defineComponent((props, { slots }) => {
+		const renderNodeContent = (node, nodeData) => {
+			const columnRender = nodeData.render;
+			if (typeof columnRender === "function") return columnRender(node, nodeData);
+			if (typeof render === "function") return render(node, nodeData);
+		};
+		return () => {
+			var _loading$value;
+			return withDirectives(h(ElTreeV2, {
+				...rest,
+				...props,
+				ref: treeRef,
+				data: treeData.value
+			}, {
+				default: ({ node, data: nodeData }) => {
+					if (slots.default) return slots.default({
+						node,
+						data: nodeData
+					});
+					const content = renderNodeContent(node, nodeData);
+					if (content) return content;
+					return h("span", {}, node.label);
+				},
+				empty: () => {
+					var _slots$empty;
+					return (_slots$empty = slots.empty) === null || _slots$empty === void 0 ? void 0 : _slots$empty.call(slots);
+				}
+			}), [[vLoading, (_loading$value = loading === null || loading === void 0 ? void 0 : loading.value) !== null && _loading$value !== void 0 ? _loading$value : false]]);
+		};
+	}), treeRef];
+}
+//#endregion
 //#region src/feedback/useMessage/index.ts
 const DEFAULT_DURATION$1 = 3e3;
 const DEFAULT_SHOW_CLOSE$1 = true;
@@ -958,4 +1040,4 @@ function useTable(options) {
 	})];
 }
 //#endregion
-export { setDeepProperty, useAsyncConfirm, useBreadcrumb, useCollapse, useDescriptions, useDialog, useDropdown, useForm, useMenu, useMessage, useNotification, useSegmented, useSteps, useTable, useTabs };
+export { setDeepProperty, useAsyncConfirm, useBreadcrumb, useCollapse, useDescriptions, useDialog, useDropdown, useForm, useMenu, useMessage, useNotification, useSegmented, useSteps, useTable, useTabs, useTree, useTreeV2 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuetkit/components",
   "type": "module",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "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.21",
-    "@vuetkit/shared": "0.0.21"
+    "@vuetkit/core": "0.0.23",
+    "@vuetkit/shared": "0.0.23"
   },
   "scripts": {
     "build": "tsdown --config-loader tsx"