@oiij/naive-ui/dist/components/preset-select/PresetSelect.js

Some Composable Functions And Components for Vue 3

import { useDataRequest } from "../../composables/useDataRequest.js";
import { useDebounceFn } from "@vueuse/core";
import { computed, createBlock, createCommentVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, reactive, ref, renderSlot, toRaw, toValue, unref, useTemplateRef, withCtx } from "vue";
import { NFlex, NPagination, NSelect } from "naive-ui";

//#region src/components/preset-select/PresetSelect.vue
const _sfc_main = /* @__PURE__ */ defineComponent({
	__name: "PresetSelect",
	props: {
		api: { type: Function },
		defaultParams: {},
		manual: {
			type: Boolean,
			default: true
		},
		fields: {},
		requestOptions: {},
		requestPlugins: {},
		value: {},
		fallbackLabel: { type: [String, Function] },
		multiple: {
			type: Boolean,
			default: false
		},
		disabled: { type: Boolean },
		clearable: { type: Boolean },
		debounce: {
			type: [Boolean, Number],
			default: true
		},
		optionFormat: { type: Function },
		selectProps: {},
		pagination: { type: [Object, Boolean] }
	},
	emits: [
		"before",
		"success",
		"error",
		"finally",
		"blur",
		"clear",
		"create",
		"focus",
		"scroll",
		"search",
		"update:value",
		"update:page",
		"update:pageSize"
	],
	setup(__props, { expose: __expose, emit: __emit }) {
		const emit = __emit;
		const selectRef = useTemplateRef("select-ref");
		const _fields = {
			page: "page",
			pageSize: "pageSize",
			search: "search",
			list: "list",
			count: "count",
			label: "label",
			value: "value",
			rowKey: "id",
			children: "children",
			...__props.fields
		};
		const paginationProps = reactive({ ...__props.pagination && typeof __props.pagination === "boolean" ? {} : __props.pagination });
		const _dataCache = [];
		const { loading, data, error, params, list, pagination: paginationRef, run, runAsync, refresh, refreshAsync, cancel, mutate, setParams, runParams, runParamsAsync, onBefore, onSuccess, onError, onFinally } = useDataRequest(__props.api, {
			defaultParams: {
				[_fields.search]: null,
				...__props.defaultParams
			},
			manual: __props.manual,
			fields: _fields,
			requestOptions: __props.requestOptions,
			requestPlugins: __props.requestPlugins
		});
		onBefore((params$1) => {
			emit("before", params$1);
		});
		onSuccess((data$1, params$1) => {
			emit("success", data$1, params$1);
			data$1?.[_fields.list]?.forEach((f) => {
				if (!_dataCache.some((s) => s?.[_fields.rowKey] === f?.[_fields.rowKey])) _dataCache.push(f);
			});
		});
		onError((err, params$1) => {
			emit("error", err, params$1);
		});
		onFinally((params$1, data$1, err) => {
			emit("finally", params$1, data$1, err);
		});
		const optionsReactive = computed(() => {
			return typeof __props.optionFormat === "function" ? list.value.map((m) => __props.optionFormat(m)).filter((f) => !!f) : list.value.map((m) => {
				return {
					[_fields.label]: m?.[_fields.label],
					[_fields.value]: m?.[_fields.value],
					[_fields.children]: m?.[_fields.children]
				};
			});
		});
		const searchValue = ref("");
		const debounceSearch = useDebounceFn(() => {
			runParams({
				[_fields.page]: 1,
				[_fields.search]: searchValue.value
			});
		}, typeof __props.debounce === "number" ? __props.debounce : 500);
		const vOnSelect = {
			onBlur: (ev) => {
				emit("blur", ev);
			},
			onClear: () => {
				emit("clear");
			},
			onCreate: (label) => {
				return emit("create", label);
			},
			onFocus: (ev) => {
				emit("focus", ev);
			},
			onScroll: (ev) => {
				emit("scroll", ev);
			},
			onUpdateValue: (val, option) => {
				emit("update:value", val, option, toRaw(toValue(Array.isArray(val) ? list.value.filter((f) => val.includes(f?.[_fields.value])) : list.value.find((f) => f?.[_fields.value] === val) ?? null)));
			},
			onSearch: (val) => {
				searchValue.value = val;
				if (loading.value) return;
				__props.debounce ? debounceSearch() : runParams({
					[_fields.page]: 1,
					[_fields.search]: searchValue.value
				});
			},
			onUpdateShow: (show) => {
				if (show) {
					if (!data.value) {
						if (__props.manual) runParams({
							[_fields.page]: 1,
							[_fields.pageSize]: 10,
							[_fields.search]: null,
							...__props.defaultParams ?? {}
						});
					}
				}
			}
		};
		const vOnPagination = {
			onUpdatePage: (page) => {
				emit("update:page", page);
				if (loading.value) return;
				runParams({ [_fields.page]: page });
			},
			onUpdatePageSize: (pageSize) => {
				emit("update:pageSize", pageSize);
				if (loading.value) return;
				runParams({ [_fields.pageSize]: pageSize });
			}
		};
		function fallbackOption(val) {
			return typeof __props.fallbackLabel === "function" ? __props.fallbackLabel(val) : {
				[_fields.label]: __props.fallbackLabel ?? `${val}`,
				[_fields.value]: val
			};
		}
		const expose = {
			loading,
			data,
			error,
			params,
			list,
			pagination: paginationRef,
			run,
			runAsync,
			refresh,
			refreshAsync,
			cancel,
			mutate,
			setParams,
			runParams,
			runParamsAsync,
			onBefore,
			onSuccess,
			onError,
			onFinally,
			selectRef
		};
		const templateBind = computed(() => {
			return {
				...expose,
				loading: toValue(loading),
				data: toValue(data),
				error: toValue(error),
				params: toValue(params),
				list: toValue(list),
				pagination: toValue(paginationRef),
				selectRef: toValue(selectRef)
			};
		});
		__expose(expose);
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(NSelect), mergeProps({
				ref: "select-ref",
				remote: "",
				filterable: "",
				multiple: __props.multiple,
				disabled: __props.disabled,
				clearable: __props.clearable,
				options: optionsReactive.value,
				"label-field": _fields.label,
				"value-field": _fields.value,
				"children-field": _fields.children,
				value: __props.value,
				"fallback-option": fallbackOption,
				loading: unref(loading)
			}, __props.selectProps, {
				onBlur: vOnSelect.onBlur,
				onClear: vOnSelect.onClear,
				onCreate: vOnSelect.onCreate,
				onFocus: vOnSelect.onFocus,
				onScroll: vOnSelect.onScroll,
				onSearch: vOnSelect.onSearch,
				"onUpdate:show": vOnSelect.onUpdateShow,
				"onUpdate:value": vOnSelect.onUpdateValue
			}), {
				header: withCtx(() => [renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps(templateBind.value)))]),
				action: withCtx(() => [renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps(templateBind.value)), () => [createVNode(unref(NFlex), null, {
					default: withCtx(() => [renderSlot(_ctx.$slots, "footer-extra", normalizeProps(guardReactiveProps(templateBind.value))), __props.pagination ? (openBlock(), createBlock(unref(NPagination), mergeProps({
						key: 0,
						style: { marginLeft: "auto" },
						simple: "",
						disabled: unref(loading)
					}, {
						...paginationProps,
						...unref(paginationRef)
					}, {
						"onUpdate:page": vOnPagination.onUpdatePage,
						"onUpdate:pageSize": vOnPagination.onUpdatePageSize
					}), null, 16, [
						"disabled",
						"onUpdate:page",
						"onUpdate:pageSize"
					])) : createCommentVNode("v-if", true)]),
					_: 3
				})])]),
				empty: withCtx(() => [renderSlot(_ctx.$slots, "empty", normalizeProps(guardReactiveProps(templateBind.value)))]),
				arrow: withCtx(() => [renderSlot(_ctx.$slots, "arrow", normalizeProps(guardReactiveProps(templateBind.value)))]),
				_: 3
			}, 16, [
				"multiple",
				"disabled",
				"clearable",
				"options",
				"label-field",
				"value-field",
				"children-field",
				"value",
				"loading",
				"onBlur",
				"onClear",
				"onCreate",
				"onFocus",
				"onScroll",
				"onSearch",
				"onUpdate:show",
				"onUpdate:value"
			]);
		};
	}
});
var PresetSelect_default = _sfc_main;

//#endregion
export { PresetSelect_default as default };