@vuetkit/components 0.0.13 → 0.0.15

package/README.md

@@ -23,3 +23,7 @@ Collection of business development Composable Components for Vue3 + ElementPlus
 ### Data
 
 - [useDescriptions](/components/src/data/useDescriptions/)
+
+### Navigation
+
+- [useSteps](/components/src/navigation/useSteps/)

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { RequestService } from "@vuetkit/core";
-import { ComponentSize, DescriptionItemProps, DescriptionProps, DialogProps, FormRules, MessageProps, MessageType, PaginationProps, TableProps } from "element-plus";
-import { CSSProperties, Component, MaybeRef, VNode } from "vue";
+import { ComponentSize, DescriptionItemProps, DescriptionProps, DialogProps, FormRules, MessageProps, MessageType, PaginationProps, StepProps, StepsProps, TabPaneName, TableProps, TabsPaneContext, TabsProps } from "element-plus";
+import { CSSProperties, Component, MaybeRef, Ref, VNode } from "vue";
 import { TableColumnProps } from "element-plus/es/components/table/src/table-column/defaults.mjs";
 
 //#region src/data/useDescriptions/index.d.ts
@@ -105,6 +105,77 @@ declare function setDeepProperty(data: Recordable, propArr: string[], value: unk
 declare function useForm(options: undefined): [null, Recordable];
 declare function useForm<T extends object>(options: FormOptions<T>): FormReturnType<T>;
 //#endregion
+//#region src/navigation/useSteps/index.d.ts
+interface StepsColumn extends Partial<StepProps> {
+  title?: string;
+  description?: string;
+  render?: (val: unknown) => VNode;
+  renderTitle?: (val: unknown) => VNode;
+  renderIcon?: (val: unknown) => VNode;
+}
+interface StepsOptions<T> extends StepsProps {
+  steps: StepsColumn[];
+  service?: RequestService<T>;
+  params?: unknown;
+  formatData?: (data: T) => StepsColumn[];
+  defaultActive?: number;
+}
+type StepsReturnType = [Component, Ref<number>];
+declare function useSteps<T>(options: StepsOptions<T>): (Ref<number, number> | import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  modelValue: {
+    type: NumberConstructor;
+    default: undefined;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  modelValue: {
+    type: NumberConstructor;
+    default: undefined;
+  };
+}>> & Readonly<{}>, {
+  modelValue: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>)[];
+//#endregion
+//#region src/navigation/useTabs/index.d.ts
+interface TabsColumn {
+  label?: string;
+  name?: string | number;
+  disabled?: boolean;
+  closable?: boolean;
+  lazy?: boolean;
+  render?: (val: unknown) => VNode;
+  renderLabel?: (val: unknown) => VNode;
+}
+interface TabsOptions<T> extends Partial<TabsProps> {
+  tabs: TabsColumn[];
+  service?: RequestService<T>;
+  params?: unknown;
+  formatData?: (data: T) => TabsColumn[];
+  defaultActive?: string | number;
+  onTabClick?: (tab: TabsPaneContext, event: Event) => void;
+  onTabChange?: (name: TabPaneName) => void;
+  onTabRemove?: (name: TabPaneName) => void;
+  onTabAdd?: () => void;
+  onEdit?: (targetName: TabPaneName | undefined, action: 'remove' | 'add') => void;
+}
+type TabsReturnType = [Component, Ref<string | number>];
+declare function useTabs<T>(options: TabsOptions<T>): (Ref<string | number, string | number> | import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  modelValue: {
+    type: (StringConstructor | NumberConstructor)[];
+    default: undefined;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  modelValue: {
+    type: (StringConstructor | NumberConstructor)[];
+    default: undefined;
+  };
+}>> & Readonly<{}>, {
+  modelValue: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>)[];
+//#endregion
 //#region src/table/useTable/index.d.ts
 type DefaultRow = Record<PropertyKey, any>;
 interface PaginationData<T> {
@@ -133,4 +204,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, DescriptionsColumn, DescriptionsOptions, DescriptionsReturnType, FormItemType, FormOptions, FormReturnType, FormRuleFn, FormSchema, PaginationOptions, Recordable, TableColumnOptions, TableOptions, TableReturn, setDeepProperty, useAsyncConfirm, useDescriptions, useDialog, useForm, useMessage, useTable };
+export { AsyncConfirmOptions, CustomRender, DefaultComponentKey, DescriptionsColumn, DescriptionsOptions, DescriptionsReturnType, FormItemType, FormOptions, FormReturnType, FormRuleFn, FormSchema, PaginationOptions, Recordable, StepsColumn, StepsOptions, StepsReturnType, TableColumnOptions, TableOptions, TableReturn, TabsColumn, TabsOptions, TabsReturnType, setDeepProperty, useAsyncConfirm, useDescriptions, useDialog, useForm, useMessage, useSteps, useTable, useTabs };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { useRequest } from "@vuetkit/core";
-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 { 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, ElStep, ElSteps, ElSwitch, ElTabPane, ElTable, ElTableColumn, ElTabs, 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
@@ -364,6 +364,131 @@ function useForm(options) {
 	}];
 }
 //#endregion
+//#region src/navigation/useSteps/index.ts
+function useSteps(options) {
+	const { steps = [], service, params, formatData, defaultActive = 0, ...rest } = options;
+	const { data, loading } = service ? useRequest(service, {
+		defaultParams: params,
+		formatData: formatData || void 0
+	}) : {};
+	const active = ref(defaultActive);
+	const stepsColumns = computed(() => (data === null || data === void 0 ? void 0 : data.value) || steps);
+	return [defineComponent({
+		props: { modelValue: {
+			type: Number,
+			default: void 0
+		} },
+		setup(props, { slots }) {
+			const renderSteps = () => {
+				var _stepsColumns$value;
+				return (_stepsColumns$value = stepsColumns.value) === null || _stepsColumns$value === void 0 ? void 0 : _stepsColumns$value.map((item) => {
+					return h(ElStep, { ...item }, {
+						description: () => {
+							if (item === null || item === void 0 ? void 0 : item.render) return item.render(item === null || item === void 0 ? void 0 : item.description);
+							return (item === null || item === void 0 ? void 0 : item.description) || "";
+						},
+						title: (item === null || item === void 0 ? void 0 : item.renderTitle) ? () => item.renderTitle(item.title) : void 0,
+						icon: (item === null || item === void 0 ? void 0 : item.renderIcon) ? () => item.renderIcon(item.icon) : void 0
+					});
+				});
+			};
+			return () => {
+				var _ref, _props$modelValue, _loading$value;
+				const finalActive = (_ref = (_props$modelValue = props.modelValue) !== null && _props$modelValue !== void 0 ? _props$modelValue : rest.active) !== null && _ref !== void 0 ? _ref : active.value;
+				return withDirectives(h(ElSteps, {
+					...rest,
+					...props,
+					"active": finalActive,
+					"onUpdate:active": (val) => {
+						active.value = val;
+					}
+				}, { default: () => {
+					if (slots.default) return slots.default();
+					if (!stepsColumns.value.length) return "";
+					return renderSteps();
+				} }), [[vLoading, (_loading$value = loading === null || loading === void 0 ? void 0 : loading.value) !== null && _loading$value !== void 0 ? _loading$value : false]]);
+			};
+		}
+	}), active];
+}
+//#endregion
+//#region src/navigation/useTabs/index.ts
+function useTabs(options) {
+	const { tabs = [], service, params, formatData, defaultActive = 0, onTabClick, onTabChange, onTabRemove, onTabAdd, onEdit, ...rest } = options;
+	const { data, loading } = service ? useRequest(service, {
+		defaultParams: params,
+		formatData: formatData || void 0
+	}) : {};
+	const activeName = ref(defaultActive);
+	const tabsColumns = computed(() => (data === null || data === void 0 ? void 0 : data.value) || tabs);
+	return [defineComponent({
+		props: { modelValue: {
+			type: [String, Number],
+			default: void 0
+		} },
+		setup(props, { slots, emit }) {
+			const renderTabs = () => {
+				var _tabsColumns$value;
+				return (_tabsColumns$value = tabsColumns.value) === null || _tabsColumns$value === void 0 ? void 0 : _tabsColumns$value.map((item, index) => {
+					var _item$name;
+					const tabName = (_item$name = item.name) !== null && _item$name !== void 0 ? _item$name : index;
+					return h(ElTabPane, {
+						...item,
+						name: tabName
+					}, {
+						label: (item === null || item === void 0 ? void 0 : item.renderLabel) ? () => item.renderLabel(item.label) : void 0,
+						default: () => {
+							if (item === null || item === void 0 ? void 0 : item.render) return item.render(item);
+							return "";
+						}
+					});
+				});
+			};
+			const handleTabClick = (tab, event) => {
+				onTabClick === null || onTabClick === void 0 || onTabClick(tab, event);
+				emit("tab-click", tab, event);
+			};
+			const handleTabChange = (name) => {
+				onTabChange === null || onTabChange === void 0 || onTabChange(name);
+				emit("tab-change", name);
+			};
+			const handleTabRemove = (name) => {
+				onTabRemove === null || onTabRemove === void 0 || onTabRemove(name);
+				emit("tab-remove", name);
+			};
+			const handleTabAdd = () => {
+				onTabAdd === null || onTabAdd === void 0 || onTabAdd();
+				emit("tab-add");
+			};
+			const handleEdit = (targetName, action) => {
+				onEdit === null || onEdit === void 0 || onEdit(targetName, action);
+				emit("edit", targetName, action);
+			};
+			return () => {
+				var _ref, _props$modelValue, _loading$value;
+				const finalActiveName = (_ref = (_props$modelValue = props.modelValue) !== null && _props$modelValue !== void 0 ? _props$modelValue : rest.modelValue) !== null && _ref !== void 0 ? _ref : activeName.value;
+				return withDirectives(h(ElTabs, {
+					...rest,
+					...props,
+					"modelValue": finalActiveName,
+					"onUpdate:modelValue": (val) => {
+						activeName.value = val;
+					},
+					"onTabClick": handleTabClick,
+					"onTabChange": handleTabChange,
+					"onTabRemove": handleTabRemove,
+					"onTabAdd": handleTabAdd,
+					"onEdit": handleEdit
+				}, { default: () => {
+					if (slots.default) return slots.default();
+					if (!tabsColumns.value.length) return "";
+					return renderTabs();
+				} }), [[vLoading, (_loading$value = loading === null || loading === void 0 ? void 0 : loading.value) !== null && _loading$value !== void 0 ? _loading$value : false]]);
+			};
+		}
+	}), activeName];
+}
+//#endregion
 //#region src/table/useTable/index.ts
 function useTable(options) {
 	const { columns = [], service, params, formatData, align, headerAlign, paginationConfig, searchFormConfig, tableWrapStyle = {}, data = [], ...rest } = options;
@@ -512,4 +637,4 @@ function useTable(options) {
 	})];
 }
 //#endregion
-export { setDeepProperty, useAsyncConfirm, useDescriptions, useDialog, useForm, useMessage, useTable };
+export { setDeepProperty, useAsyncConfirm, useDescriptions, useDialog, useForm, useMessage, useSteps, useTable, useTabs };

package/package.json

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