@vuetkit/components 0.0.15 → 0.0.17

package/dist/index.d.ts

@@ -1,8 +1,27 @@
 import { RequestService } from "@vuetkit/core";
-import { ComponentSize, DescriptionItemProps, DescriptionProps, DialogProps, FormRules, MessageProps, MessageType, PaginationProps, StepProps, StepsProps, TabPaneName, TableProps, TabsPaneContext, TabsProps } from "element-plus";
+import { CollapseItemProps, CollapseModelValue, CollapseProps, ComponentSize, DescriptionItemProps, DescriptionProps, DialogProps, ElDropdown, 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/useCollapse/index.d.ts
+interface CollapseColumn extends Partial<CollapseItemProps> {
+  title?: string;
+  name?: string | number;
+  render?: (val: unknown) => VNode;
+  renderTitle?: (val: unknown) => VNode;
+  renderIcon?: (val: unknown) => VNode;
+}
+interface CollapseOptions<T> extends Partial<CollapseProps> {
+  columns: CollapseColumn[];
+  service?: RequestService<T>;
+  params?: unknown;
+  formatData?: (data: T) => CollapseColumn[];
+  defaultActive?: CollapseModelValue;
+  onChange?: (activeNames: CollapseModelValue) => void;
+}
+type CollapseReturnType = [Component, Ref<CollapseModelValue>];
+declare function useCollapse<T>(options: CollapseOptions<T>): CollapseReturnType;
+//#endregion
 //#region src/data/useDescriptions/index.d.ts
 interface DescriptionsColumn extends Partial<DescriptionItemProps> {
   value?: string;
@@ -105,6 +124,29 @@ 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/useDropdown/index.d.ts
+type ElDropdownProps = InstanceType<typeof ElDropdown>['$props'];
+interface DropdownItem {
+  label?: string;
+  command?: string | number | object;
+  disabled?: boolean;
+  divided?: boolean;
+  icon?: string | Component;
+  render?: (val: unknown) => VNode;
+}
+interface DropdownOptions<T> extends Partial<ElDropdownProps> {
+  items?: DropdownItem[];
+  service?: RequestService<T>;
+  params?: unknown;
+  formatData?: (data: T) => DropdownItem[];
+  defaultCommand?: string | number | object;
+  onCommand?: (command: string | number | object) => void;
+  onVisibleChange?: (visible: boolean) => void;
+  onClick?: () => void;
+}
+type DropdownReturnType = [Component, Ref<string | number | object | undefined>];
+declare function useDropdown<T>(options: DropdownOptions<T>): DropdownReturnType;
+//#endregion
 //#region src/navigation/useSteps/index.d.ts
 interface StepsColumn extends Partial<StepProps> {
   title?: string;
@@ -204,4 +246,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, StepsColumn, StepsOptions, StepsReturnType, TableColumnOptions, TableOptions, TableReturn, TabsColumn, TabsOptions, TabsReturnType, setDeepProperty, useAsyncConfirm, useDescriptions, useDialog, useForm, useMessage, useSteps, useTable, useTabs };
+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 };

package/dist/index.js

@@ -1,7 +1,68 @@
 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, 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, 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/useCollapse/index.ts
+function useCollapse(options) {
+	const { columns = [], service, params, formatData, defaultActive = [], onChange, ...rest } = options;
+	const { data, loading } = service ? useRequest(service, {
+		defaultParams: params,
+		formatData: formatData || void 0
+	}) : {};
+	const activeNames = ref(defaultActive);
+	const collapseColumns = computed(() => (data === null || data === void 0 ? void 0 : data.value) || columns);
+	return [defineComponent({
+		props: { modelValue: {
+			type: [
+				String,
+				Number,
+				Array
+			],
+			default: void 0
+		} },
+		setup(props, { slots, emit }) {
+			const renderColumns = () => {
+				var _collapseColumns$valu;
+				return (_collapseColumns$valu = collapseColumns.value) === null || _collapseColumns$valu === void 0 ? void 0 : _collapseColumns$valu.map((item, index) => {
+					var _item$name;
+					const itemName = (_item$name = item.name) !== null && _item$name !== void 0 ? _item$name : index;
+					return h(ElCollapseItem, {
+						...item,
+						name: itemName
+					}, {
+						default: () => {
+							if (item === null || item === void 0 ? void 0 : item.render) return item.render(item);
+							return "";
+						},
+						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
+					});
+				});
+			};
+			const handleChange = (val) => {
+				activeNames.value = val;
+				onChange === null || onChange === void 0 || onChange(val);
+				emit("change", val);
+			};
+			return () => {
+				var _ref, _props$modelValue, _loading$value;
+				const finalActiveNames = (_ref = (_props$modelValue = props.modelValue) !== null && _props$modelValue !== void 0 ? _props$modelValue : rest.modelValue) !== null && _ref !== void 0 ? _ref : activeNames.value;
+				return withDirectives(h(ElCollapse, {
+					...rest,
+					...props,
+					"modelValue": finalActiveNames,
+					"onUpdate:modelValue": handleChange,
+					"onChange": handleChange
+				}, { default: () => {
+					if (slots.default) return slots.default();
+					if (!collapseColumns.value.length) return "";
+					return renderColumns();
+				} }), [[vLoading, (_loading$value = loading === null || loading === void 0 ? void 0 : loading.value) !== null && _loading$value !== void 0 ? _loading$value : false]]);
+			};
+		}
+	}), activeNames];
+}
+//#endregion
 //#region src/data/useDescriptions/index.ts
 function useDescriptions(options) {
 	const { columns = [], service, params, formatData, ...rest } = options;
@@ -364,6 +425,67 @@ function useForm(options) {
 	}];
 }
 //#endregion
+//#region src/navigation/useDropdown/index.ts
+function useDropdown(options) {
+	const { items = [], service, params, formatData, defaultCommand, onCommand, onVisibleChange, onClick, ...rest } = options;
+	const { data, loading } = service ? useRequest(service, {
+		defaultParams: params,
+		formatData: formatData || void 0
+	}) : {};
+	const command = ref(defaultCommand);
+	const dropdownColumns = computed(() => (data === null || data === void 0 ? void 0 : data.value) || items);
+	return [defineComponent({ setup(_, { slots, emit }) {
+		const renderItems = () => {
+			var _dropdownColumns$valu;
+			return (_dropdownColumns$valu = dropdownColumns.value) === null || _dropdownColumns$valu === void 0 ? void 0 : _dropdownColumns$valu.map((item) => {
+				return h(ElDropdownItem, {
+					command: item.command,
+					disabled: item.disabled,
+					divided: item.divided,
+					icon: item.icon
+				}, { default: () => {
+					if (item === null || item === void 0 ? void 0 : item.render) return item.render(item);
+					return item.label || "";
+				} });
+			});
+		};
+		const handleCommand = (cmd) => {
+			command.value = cmd;
+			onCommand === null || onCommand === void 0 || onCommand(cmd);
+			emit("command", cmd);
+		};
+		const handleVisibleChange = (visible) => {
+			onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(visible);
+			emit("visible-change", visible);
+		};
+		const handleClick = () => {
+			onClick === null || onClick === void 0 || onClick();
+			emit("click");
+		};
+		return () => {
+			var _loading$value;
+			return withDirectives(h(ElDropdown, {
+				...rest,
+				"onCommand": handleCommand,
+				"onVisible-change": handleVisibleChange,
+				"onClick": handleClick
+			}, {
+				default: () => {
+					if (slots.default) return slots.default();
+					return "";
+				},
+				dropdown: () => {
+					if (slots.dropdown) return slots.dropdown();
+					return h(ElDropdownMenu, {}, { default: () => {
+						if (!dropdownColumns.value.length) return "";
+						return renderItems();
+					} });
+				}
+			}), [[vLoading, (_loading$value = loading === null || loading === void 0 ? void 0 : loading.value) !== null && _loading$value !== void 0 ? _loading$value : false]]);
+		};
+	} }), command];
+}
+//#endregion
 //#region src/navigation/useSteps/index.ts
 function useSteps(options) {
 	const { steps = [], service, params, formatData, defaultActive = 0, ...rest } = options;
@@ -637,4 +759,4 @@ function useTable(options) {
 	})];
 }
 //#endregion
-export { setDeepProperty, useAsyncConfirm, useDescriptions, useDialog, useForm, useMessage, useSteps, useTable, useTabs };
+export { setDeepProperty, useAsyncConfirm, useCollapse, useDescriptions, useDialog, useDropdown, useForm, useMessage, useSteps, useTable, useTabs };

package/package.json

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