@vuetkit/components 0.0.19 → 0.0.21

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { RequestService } from "@vuetkit/core";
-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 { 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 { CSSProperties, Component, MaybeRef, Ref, VNode } from "vue";
 import { TableColumnProps } from "element-plus/es/components/table/src/table-column/defaults.mjs";
 
@@ -37,6 +37,25 @@ interface DescriptionsOptions<T> extends DescriptionProps {
 type DescriptionsReturnType = [Component];
 declare function useDescriptions<T>(options: DescriptionsOptions<T>): import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>[];
 //#endregion
+//#region src/data/useSegmented/index.d.ts
+type SegmentedOptionValue = string | number | boolean;
+interface SegmentedColumn {
+  value?: SegmentedOptionValue;
+  label?: string;
+  disabled?: boolean;
+  render?: (item: SegmentedColumn) => VNode;
+}
+interface SegmentedOptions<T> extends Partial<SegmentedProps> {
+  columns?: SegmentedColumn[];
+  service?: RequestService<T>;
+  params?: unknown;
+  formatData?: (data: T) => SegmentedColumn[];
+  defaultValue?: SegmentedOptionValue;
+  onChange?: (val: SegmentedOptionValue) => void;
+}
+type SegmentedReturnType = [Component, Ref<SegmentedOptionValue | undefined>];
+declare function useSegmented<T>(options: SegmentedOptions<T>): SegmentedReturnType;
+//#endregion
 //#region src/feedback/useAsyncConfirm/index.d.ts
 interface AsyncConfirmOptions {
   title?: string;
@@ -134,6 +153,23 @@ 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/useBreadcrumb/index.d.ts
+type ElBreadcrumbProps = InstanceType<typeof ElBreadcrumb>['$props'];
+interface BreadcrumbColumn {
+  label?: string;
+  to?: unknown;
+  replace?: boolean;
+  render?: (val: unknown) => VNode;
+}
+interface BreadcrumbOptions<T> extends Partial<ElBreadcrumbProps> {
+  items?: BreadcrumbColumn[];
+  service?: RequestService<T>;
+  params?: unknown;
+  formatData?: (data: T) => BreadcrumbColumn[];
+}
+type BreadcrumbReturnType = [Component];
+declare function useBreadcrumb<T>(options: BreadcrumbOptions<T>): BreadcrumbReturnType;
+//#endregion
 //#region src/navigation/useDropdown/index.d.ts
 type ElDropdownProps = InstanceType<typeof ElDropdown>['$props'];
 interface DropdownItem {
@@ -291,4 +327,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, 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 };
+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 };

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, 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 { 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 { 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
@@ -111,6 +111,56 @@ function useDescriptions(options) {
 	})];
 }
 //#endregion
+//#region src/data/useSegmented/index.ts
+function useSegmented(options) {
+	const { columns = [], service, params, formatData, defaultValue, onChange, ...rest } = options;
+	const { data, loading } = service ? useRequest(service, {
+		defaultParams: params,
+		formatData: formatData || void 0
+	}) : {};
+	const modelValue = ref(defaultValue);
+	const segmentedColumns = computed(() => (data === null || data === void 0 ? void 0 : data.value) || columns);
+	return [defineComponent({
+		props: { modelValue: {
+			type: [
+				String,
+				Number,
+				Boolean
+			],
+			default: void 0
+		} },
+		setup(props, { slots, emit }) {
+			const hasCustomRender = computed(() => segmentedColumns.value.some((col) => col && typeof col === "object" && typeof col.render === "function"));
+			const renderDefault = (scope) => {
+				var _slots$default;
+				const item = scope === null || scope === void 0 ? void 0 : scope.item;
+				if (item && typeof item === "object" && typeof item.render === "function") return item.render(item);
+				return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots, scope);
+			};
+			const handleChange = (val) => {
+				modelValue.value = val;
+				onChange === null || onChange === void 0 || onChange(val);
+				emit("change", val);
+				emit("update:modelValue", val);
+			};
+			return () => {
+				var _ref, _props$modelValue, _loading$value;
+				const finalModelValue = (_ref = (_props$modelValue = props.modelValue) !== null && _props$modelValue !== void 0 ? _props$modelValue : rest.modelValue) !== null && _ref !== void 0 ? _ref : modelValue.value;
+				const slotsObj = {};
+				if (hasCustomRender.value || slots.default) slotsObj.default = renderDefault;
+				return withDirectives(h(ElSegmented, {
+					...rest,
+					...props,
+					"options": segmentedColumns.value,
+					"modelValue": finalModelValue,
+					"onUpdate:modelValue": handleChange,
+					"onChange": handleChange
+				}, slotsObj), [[vLoading, (_loading$value = loading === null || loading === void 0 ? void 0 : loading.value) !== null && _loading$value !== void 0 ? _loading$value : false]]);
+			};
+		}
+	}), modelValue];
+}
+//#endregion
 //#region src/feedback/useMessage/index.ts
 const DEFAULT_DURATION$1 = 3e3;
 const DEFAULT_SHOW_CLOSE$1 = true;
@@ -473,6 +523,35 @@ function useForm(options) {
 	}];
 }
 //#endregion
+//#region src/navigation/useBreadcrumb/index.ts
+function useBreadcrumb(options) {
+	const { items = [], service, params, formatData, ...rest } = options;
+	const { data, loading } = service ? useRequest(service, {
+		defaultParams: params,
+		formatData: formatData || void 0
+	}) : {};
+	const breadcrumbColumns = computed(() => (data === null || data === void 0 ? void 0 : data.value) || items);
+	const renderBreadcrumbItem = (item) => {
+		return h(ElBreadcrumbItem, {
+			to: item.to,
+			replace: item.replace
+		}, { default: () => {
+			if (item === null || item === void 0 ? void 0 : item.render) return item.render(item);
+			return item.label || "";
+		} });
+	};
+	return [defineComponent({ setup(_, { slots }) {
+		return () => {
+			var _loading$value;
+			return withDirectives(h(ElBreadcrumb, { ...rest }, { default: () => {
+				if (slots.default) return slots.default();
+				if (!breadcrumbColumns.value.length) return "";
+				return breadcrumbColumns.value.map((item) => renderBreadcrumbItem(item));
+			} }), [[vLoading, (_loading$value = loading === null || loading === void 0 ? void 0 : loading.value) !== null && _loading$value !== void 0 ? _loading$value : false]]);
+		};
+	} })];
+}
+//#endregion
 //#region src/navigation/useDropdown/index.ts
 function useDropdown(options) {
 	const { items = [], service, params, formatData, defaultCommand, onCommand, onVisibleChange, onClick, ...rest } = options;
@@ -879,4 +958,4 @@ function useTable(options) {
 	})];
 }
 //#endregion
-export { setDeepProperty, useAsyncConfirm, useCollapse, useDescriptions, useDialog, useDropdown, useForm, useMenu, useMessage, useNotification, useSteps, useTable, useTabs };
+export { setDeepProperty, useAsyncConfirm, useBreadcrumb, useCollapse, useDescriptions, useDialog, useDropdown, useForm, useMenu, useMessage, useNotification, useSegmented, useSteps, useTable, useTabs };

package/package.json

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