@vuetkit/components 0.0.17 → 0.0.19

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { RequestService } from "@vuetkit/core";
-import { CollapseItemProps, CollapseModelValue, CollapseProps, ComponentSize, DescriptionItemProps, DescriptionProps, DialogProps, ElDropdown, FormRules, MessageProps, MessageType, PaginationProps, StepProps, StepsProps, TabPaneName, TableProps, TabsPaneContext, TabsProps } from "element-plus";
+import { CollapseItemProps, CollapseModelValue, CollapseProps, ComponentSize, DescriptionItemProps, DescriptionProps, DialogProps, ElDropdown, ElMenu, FormRules, MessageProps, MessageType, NotificationOptions, 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";
 
@@ -73,6 +73,16 @@ declare function useMessage(options?: MessageProps): {
   closeAll: () => void;
 };
 //#endregion
+//#region src/feedback/useNotification/index.d.ts
+declare function useNotification(options?: NotificationOptions): {
+  primary: (message: string, title?: string) => import("element-plus").NotificationHandle;
+  success: (message: string, title?: string) => import("element-plus").NotificationHandle;
+  error: (message: string, title?: string) => import("element-plus").NotificationHandle;
+  warning: (message: string, title?: string) => import("element-plus").NotificationHandle;
+  info: (message: string, title?: string) => import("element-plus").NotificationHandle;
+  closeAll: () => void;
+};
+//#endregion
 //#region src/form/useForm/index.d.ts
 type CustomRender = (...args: unknown[]) => unknown;
 type Recordable = Record<string, unknown>;
@@ -147,6 +157,41 @@ interface DropdownOptions<T> extends Partial<ElDropdownProps> {
 type DropdownReturnType = [Component, Ref<string | number | object | undefined>];
 declare function useDropdown<T>(options: DropdownOptions<T>): DropdownReturnType;
 //#endregion
+//#region src/navigation/useMenu/index.d.ts
+type ElMenuProps = InstanceType<typeof ElMenu>['$props'];
+interface MenuColumn {
+  index: string;
+  label?: string;
+  disabled?: boolean;
+  route?: unknown;
+  children?: MenuColumn[];
+  render?: (val: unknown) => VNode;
+  renderTitle?: (val: unknown) => VNode;
+  groupTitle?: string;
+  popperClass?: string;
+  popperStyle?: string | CSSProperties;
+  showTimeout?: number;
+  hideTimeout?: number;
+  teleported?: boolean;
+  popperOffset?: number;
+  expandCloseIcon?: string | Component;
+  expandOpenIcon?: string | Component;
+  collapseCloseIcon?: string | Component;
+  collapseOpenIcon?: string | Component;
+}
+interface MenuOptions<T> extends Partial<ElMenuProps> {
+  items?: MenuColumn[];
+  service?: RequestService<T>;
+  params?: unknown;
+  formatData?: (data: T) => MenuColumn[];
+  defaultActive?: string;
+  onSelect?: (index: string, indexPath: string[], item: unknown, routerResult?: Promise<unknown>) => void;
+  onOpen?: (index: string, indexPath: string[]) => void;
+  onClose?: (index: string, indexPath: string[]) => void;
+}
+type MenuReturnType = [Component, Ref<string>];
+declare function useMenu<T>(options: MenuOptions<T>): MenuReturnType;
+//#endregion
 //#region src/navigation/useSteps/index.d.ts
 interface StepsColumn extends Partial<StepProps> {
   title?: string;
@@ -246,4 +291,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, CollapseColumn, CollapseOptions, CollapseReturnType, CustomRender, DefaultComponentKey, DescriptionsColumn, DescriptionsOptions, DescriptionsReturnType, DropdownItem, DropdownOptions, DropdownReturnType, FormItemType, FormOptions, FormReturnType, FormRuleFn, FormSchema, PaginationOptions, Recordable, StepsColumn, StepsOptions, StepsReturnType, TableColumnOptions, TableOptions, TableReturn, TabsColumn, TabsOptions, TabsReturnType, setDeepProperty, useAsyncConfirm, useCollapse, useDescriptions, useDialog, useDropdown, useForm, useMessage, useSteps, useTable, useTabs };
+export { AsyncConfirmOptions, CollapseColumn, CollapseOptions, CollapseReturnType, CustomRender, DefaultComponentKey, DescriptionsColumn, DescriptionsOptions, DescriptionsReturnType, DropdownItem, DropdownOptions, DropdownReturnType, FormItemType, FormOptions, FormReturnType, FormRuleFn, FormSchema, MenuColumn, MenuOptions, MenuReturnType, PaginationOptions, Recordable, StepsColumn, StepsOptions, StepsReturnType, TableColumnOptions, TableOptions, TableReturn, TabsColumn, TabsOptions, TabsReturnType, setDeepProperty, useAsyncConfirm, useCollapse, useDescriptions, useDialog, useDropdown, useForm, useMenu, useMessage, useNotification, useSteps, useTable, useTabs };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { useRequest } from "@vuetkit/core";
-import { ElButton, ElCascader, ElCheckbox, ElCol, ElCollapse, ElCollapseItem, ElColorPicker, ElDatePicker, ElDescriptions, ElDescriptionsItem, ElDialog, ElDropdown, ElDropdownItem, ElDropdownMenu, 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 { 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, ElSelect, ElSelectV2, ElSlider, ElStep, ElSteps, ElSubMenu, 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/useCollapse/index.ts
@@ -112,16 +112,16 @@ function useDescriptions(options) {
 }
 //#endregion
 //#region src/feedback/useMessage/index.ts
-const DEFAULT_DURATION = 3e3;
-const DEFAULT_SHOW_CLOSE = true;
+const DEFAULT_DURATION$1 = 3e3;
+const DEFAULT_SHOW_CLOSE$1 = true;
 const DEFAULT_PLAIN = true;
 const DEFAULT_GROUPING = true;
 function useMessage(options = {}) {
 	var _options$duration, _options$showClose, _options$plain, _options$grouping;
 	const mergedOptions = {
 		...options,
-		duration: (_options$duration = options.duration) !== null && _options$duration !== void 0 ? _options$duration : DEFAULT_DURATION,
-		showClose: (_options$showClose = options.showClose) !== null && _options$showClose !== void 0 ? _options$showClose : DEFAULT_SHOW_CLOSE,
+		duration: (_options$duration = options.duration) !== null && _options$duration !== void 0 ? _options$duration : DEFAULT_DURATION$1,
+		showClose: (_options$showClose = options.showClose) !== null && _options$showClose !== void 0 ? _options$showClose : DEFAULT_SHOW_CLOSE$1,
 		plain: (_options$plain = options.plain) !== null && _options$plain !== void 0 ? _options$plain : DEFAULT_PLAIN,
 		grouping: (_options$grouping = options.grouping) !== null && _options$grouping !== void 0 ? _options$grouping : DEFAULT_GROUPING
 	};
@@ -233,6 +233,54 @@ function useDialog(options) {
 	}];
 }
 //#endregion
+//#region src/feedback/useNotification/index.ts
+const DEFAULT_DURATION = 4500;
+const DEFAULT_SHOW_CLOSE = true;
+const DEFAULT_POSITION = "top-right";
+function useNotification(options = {}) {
+	var _options$duration, _options$showClose, _options$position;
+	const mergedOptions = {
+		...options,
+		duration: (_options$duration = options.duration) !== null && _options$duration !== void 0 ? _options$duration : DEFAULT_DURATION,
+		showClose: (_options$showClose = options.showClose) !== null && _options$showClose !== void 0 ? _options$showClose : DEFAULT_SHOW_CLOSE,
+		position: (_options$position = options.position) !== null && _options$position !== void 0 ? _options$position : DEFAULT_POSITION
+	};
+	function createNotification(message, type, title) {
+		return ElNotification({
+			...mergedOptions,
+			message,
+			type,
+			title: title !== null && title !== void 0 ? title : mergedOptions.title
+		});
+	}
+	function closeAll() {
+		ElNotification.closeAll();
+	}
+	function primary(message, title) {
+		return createNotification(message, "primary", title);
+	}
+	function success(message, title) {
+		return createNotification(message, "success", title);
+	}
+	function error(message, title) {
+		return createNotification(message, "error", title);
+	}
+	function warning(message, title) {
+		return createNotification(message, "warning", title);
+	}
+	function info(message, title) {
+		return createNotification(message, "info", title);
+	}
+	return {
+		primary,
+		success,
+		error,
+		warning,
+		info,
+		closeAll
+	};
+}
+//#endregion
 //#region src/form/useForm/index.ts
 const defaultComponent = {
 	"input": ElInput,
@@ -486,6 +534,78 @@ function useDropdown(options) {
 	} }), command];
 }
 //#endregion
+//#region src/navigation/useMenu/index.ts
+function useMenu(options) {
+	const { items = [], service, params, formatData, defaultActive = "", onSelect, onOpen, onClose, ...rest } = options;
+	const { data, loading } = service ? useRequest(service, {
+		defaultParams: params,
+		formatData: formatData || void 0
+	}) : {};
+	const activeIndex = ref(defaultActive);
+	const menuColumns = computed(() => (data === null || data === void 0 ? void 0 : data.value) || items);
+	const renderMenuItem = (item) => {
+		var _item$children, _item$children2;
+		if (((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) && item.groupTitle) return h(ElMenuItemGroup, { title: item.groupTitle }, { default: () => item.children.map((child) => renderMenuItem(child)) });
+		if ((_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length) return h(ElSubMenu, {
+			index: item.index,
+			disabled: item.disabled,
+			popperClass: item.popperClass,
+			popperStyle: item.popperStyle,
+			showTimeout: item.showTimeout,
+			hideTimeout: item.hideTimeout,
+			teleported: item.teleported,
+			popperOffset: item.popperOffset,
+			expandCloseIcon: item.expandCloseIcon,
+			expandOpenIcon: item.expandOpenIcon,
+			collapseCloseIcon: item.collapseCloseIcon,
+			collapseOpenIcon: item.collapseOpenIcon
+		}, {
+			title: () => {
+				if (item === null || item === void 0 ? void 0 : item.renderTitle) return item.renderTitle(item);
+				return item.label || "";
+			},
+			default: () => item.children.map((child) => renderMenuItem(child))
+		});
+		return h(ElMenuItem, {
+			index: item.index,
+			disabled: item.disabled,
+			route: item.route
+		}, { default: () => {
+			if (item === null || item === void 0 ? void 0 : item.render) return item.render(item);
+			return item.label || "";
+		} });
+	};
+	return [defineComponent({ setup(_, { slots, emit }) {
+		const handleSelect = (index, indexPath, item, routerResult) => {
+			activeIndex.value = index;
+			onSelect === null || onSelect === void 0 || onSelect(index, indexPath, item, routerResult);
+			emit("select", index, indexPath, item, routerResult);
+		};
+		const handleOpen = (index, indexPath) => {
+			onOpen === null || onOpen === void 0 || onOpen(index, indexPath);
+			emit("open", index, indexPath);
+		};
+		const handleClose = (index, indexPath) => {
+			onClose === null || onClose === void 0 || onClose(index, indexPath);
+			emit("close", index, indexPath);
+		};
+		return () => {
+			var _loading$value;
+			return withDirectives(h(ElMenu, {
+				...rest,
+				defaultActive: activeIndex.value,
+				onSelect: handleSelect,
+				onOpen: handleOpen,
+				onClose: handleClose
+			}, { default: () => {
+				if (slots.default) return slots.default();
+				if (!menuColumns.value.length) return "";
+				return menuColumns.value.map((item) => renderMenuItem(item));
+			} }), [[vLoading, (_loading$value = loading === null || loading === void 0 ? void 0 : loading.value) !== null && _loading$value !== void 0 ? _loading$value : false]]);
+		};
+	} }), activeIndex];
+}
+//#endregion
 //#region src/navigation/useSteps/index.ts
 function useSteps(options) {
 	const { steps = [], service, params, formatData, defaultActive = 0, ...rest } = options;
@@ -759,4 +879,4 @@ function useTable(options) {
 	})];
 }
 //#endregion
-export { setDeepProperty, useAsyncConfirm, useCollapse, useDescriptions, useDialog, useDropdown, useForm, useMessage, useSteps, useTable, useTabs };
+export { setDeepProperty, useAsyncConfirm, useCollapse, useDescriptions, useDialog, useDropdown, useForm, useMenu, useMessage, useNotification, useSteps, useTable, useTabs };

package/package.json

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