@antdv-next1/pro-field 1.0.0

package/dist/components/Select/LightSelect/index.js

@@ -0,0 +1,621 @@
+import { useStyle } from "./style/index.js";
+import { Fragment, computed, createVNode, defineComponent, mergeProps } from "vue";
+import { FieldLabel, useMemo, useState } from "@antdv-next1/pro-utils";
+import { Input, Select } from "antdv-next";
+import { SearchOutlined } from "@antdv-next/icons";
+import { classNames } from "@v-c/util";
+import { useConfig as useConfig$1 } from "antdv-next/dist/config-provider/context";
+import { toArray } from "@v-c/util/dist/Children/toArray";
+//#region src/components/Select/LightSelect/index.tsx
+/**
+* 如果有 label 就优先使用 label
+*
+* @param valueMap
+* @param v
+*/
+function getValueOrLabel(valueMap, v) {
+	if (typeof v !== "object") return valueMap[v] || v;
+	return valueMap[v?.value] || v.label;
+}
+const LightSelect = /* @__PURE__ */ defineComponent((props, { attrs }) => {
+	const config = useConfig$1();
+	const prefixCls = computed(() => config.value.getPrefixCls("pro"));
+	const baseClassName = computed(() => `${prefixCls.value}-field-select-light-select`);
+	const [open, setOpen] = useState(props.open || false);
+	const [keyword, setKeyword] = useState("");
+	const { wrapSSR, hashId } = useStyle(baseClassName);
+	const fieldNames = computed(() => ({
+		label: props.fieldNames?.label || "label",
+		value: props.fieldNames?.value || "value"
+	}));
+	const valueMap = useMemo(() => {
+		const values = {};
+		props.options?.forEach((item) => {
+			const optionLabel = item[props.optionLabelProp || ""] || item[fieldNames.value.label];
+			const optionValue = item[fieldNames.value.value];
+			values[optionValue] = optionLabel || optionValue;
+		});
+		return values;
+	}, [
+		() => fieldNames.value.label,
+		() => props.options,
+		() => fieldNames.value.value,
+		() => props.optionLabelProp
+	]);
+	const filterValue = computed(() => Array.isArray(props.value) ? props.value.map((v) => getValueOrLabel(valueMap.value, v)) : getValueOrLabel(valueMap.value, props.value));
+	return () => {
+		const { label, prefixCls: customizePrefixCls, onChange, value, mode, defaultValue, labelVariant, size, showSearch, "onUpdate:value": onUpdateValue, disabled, options, allowClear, labelInValue, fieldNames = {}, lightLabel, labelTrigger, optionLabelProp = "", valueMaxLength = 41, fetchDataOnSearch = false, fetchData, variant = "outlined", searchPlaceholder, ...restProps } = props;
+		const { placeholder = label } = props;
+		return wrapSSR(createVNode("div", {
+			"class": classNames(baseClassName.value, attrs.class, hashId.value, { [`${baseClassName.value}-searchable`]: showSearch }, `${baseClassName.value}-container-${restProps.placement || "bottomLeft"}`),
+			"onClick": (e) => {
+				if (disabled) return;
+				if (!lightLabel?.value?.labelRef.value?.contains(e.target)) setOpen(true);
+			}
+		}, [createVNode(Select, mergeProps(restProps, {
+			"allowClear": allowClear,
+			"value": value,
+			"mode": mode,
+			"labelInValue": labelInValue,
+			"size": size,
+			"disabled": disabled,
+			"variant": variant,
+			"onUpdate:value": onUpdateValue,
+			"onChange": (v, option) => {
+				onChange?.(v, option);
+				if (mode !== "multiple") setOpen(false);
+			},
+			"showSearch": showSearch && typeof showSearch !== "boolean" ? {
+				...showSearch,
+				onSearch: (keyValue) => {
+					if (fetchDataOnSearch && fetchData) {
+						fetchData(keyValue);
+						showSearch?.onSearch?.(keyValue);
+					}
+				}
+			} : showSearch,
+			"popupRender": (menuNode) => createVNode(Fragment, null, [showSearch && createVNode("div", { "style": { margin: "4px 8px" } }, [createVNode(Input, {
+				"value": keyword.value,
+				"allowClear": !!allowClear,
+				"onChange": (e) => {
+					setKeyword(e.target.value);
+					if (fetchDataOnSearch && fetchData) fetchData(e.target.value);
+					showSearch && typeof showSearch !== "boolean" && showSearch.onSearch?.(e.target.value);
+				},
+				"placeholder": searchPlaceholder,
+				"onKeydown": (e) => {
+					if (e.key === "Backspace") {
+						e.stopPropagation();
+						return;
+					}
+					if (e.key === "ArrowUp" || e.key === "ArrowDown") e.preventDefault();
+				},
+				"style": { width: "100%" },
+				"prefix": createVNode(SearchOutlined, null, null)
+			}, null)]), menuNode]),
+			"open": open.value,
+			"onOpenChange": (isOpen) => {
+				if (!isOpen) setKeyword("");
+				if (!labelTrigger) setOpen(isOpen);
+				restProps?.onDropdownVisibleChange?.(isOpen);
+			},
+			"prefixCls": customizePrefixCls,
+			"options": typeof showSearch !== "boolean" && showSearch?.onSearch || !keyword.value ? options : options?.filter((o) => {
+				if (typeof showSearch !== "boolean" && showSearch?.optionFilterProp) return toArray(o[showSearch.optionFilterProp]).join("").toLowerCase().includes(keyword.value);
+				return String(o[fieldNames.label || "label"]).toLowerCase()?.includes(keyword.value?.toLowerCase()) || o[fieldNames.value || "value"].toString()?.toLowerCase()?.includes(keyword.value?.toLowerCase());
+			})
+		}), null), createVNode(FieldLabel, {
+			"ellipsis": true,
+			"label": label,
+			"placeholder": placeholder,
+			"disabled": disabled,
+			"variant": labelVariant,
+			"allowClear": !!allowClear,
+			"value": filterValue.value || value?.label || value,
+			"onClear": () => {
+				onChange?.(void 0, void 0);
+				onUpdateValue?.(void 0);
+			},
+			"onClick": () => {
+				if (disabled) return;
+				setOpen(!open.value);
+			},
+			"ref": lightLabel,
+			"valueMaxLength": valueMaxLength
+		}, null)]));
+	};
+}, {
+	props: {
+		label: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		valueMaxLength: {
+			type: Number,
+			required: false
+		},
+		fetchData: {
+			type: Function,
+			required: true
+		},
+		fetchDataOnSearch: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		variant: {
+			type: String,
+			required: false
+		},
+		searchPlaceholder: {
+			type: String,
+			required: false
+		},
+		labelVariant: {
+			type: String,
+			required: false
+		},
+		lightLabel: {
+			type: Object,
+			required: false
+		},
+		labelTrigger: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		placement: {
+			type: String,
+			required: false
+		},
+		mode: {
+			type: String,
+			required: false
+		},
+		status: {
+			type: String,
+			required: false
+		},
+		popupClassName: {
+			type: String,
+			required: false
+		},
+		dropdownClassName: {
+			type: String,
+			required: false
+		},
+		dropdownStyle: {
+			type: Object,
+			required: false
+		},
+		dropdownRender: {
+			type: Function,
+			required: false
+		},
+		dropdownMatchSelectWidth: {
+			type: [Boolean, Number],
+			required: false,
+			default: void 0
+		},
+		popupMatchSelectWidth: {
+			type: [Boolean, Number],
+			required: false,
+			default: void 0
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		optionRender: {
+			type: Function,
+			required: false
+		},
+		prefix: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		suffixIcon: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		size: {
+			type: [String, null],
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		bordered: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		showArrow: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		fieldNames: {
+			type: Object,
+			required: false
+		},
+		onSearch: {
+			type: Function,
+			required: false
+		},
+		showSearch: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		searchValue: {
+			type: String,
+			required: false
+		},
+		autoClearSearchValue: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		filterOption: {
+			type: [Boolean, Function],
+			required: false,
+			default: void 0
+		},
+		filterSort: {
+			type: Function,
+			required: false
+		},
+		optionFilterProp: {
+			type: String,
+			required: false
+		},
+		optionLabelProp: {
+			type: String,
+			required: false
+		},
+		options: {
+			type: Array,
+			required: false
+		},
+		defaultActiveFirstOption: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		virtual: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		direction: {
+			type: String,
+			required: false
+		},
+		listHeight: {
+			type: Number,
+			required: false
+		},
+		listItemHeight: {
+			type: Number,
+			required: false
+		},
+		labelRender: {
+			type: Function,
+			required: false
+		},
+		menuItemSelectedIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		labelInValue: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		value: { required: false },
+		defaultValue: { required: false },
+		maxCount: {
+			type: Number,
+			required: false
+		},
+		tagRender: {
+			type: Function,
+			required: false
+		},
+		autoFocus: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		placeholder: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		tabIndex: {
+			type: Number,
+			required: false
+		},
+		notFoundContent: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		maxLength: {
+			type: Number,
+			required: false
+		},
+		showScrollBar: {
+			type: [Boolean, String],
+			required: false,
+			default: void 0
+		},
+		choiceTransitionName: {
+			type: String,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		open: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		maxTagTextLength: {
+			type: Number,
+			required: false
+		},
+		maxTagCount: {
+			type: [Number, String],
+			required: false
+		},
+		maxTagPlaceholder: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		tokenSeparators: {
+			type: [Array, Function],
+			required: false
+		},
+		allowClear: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		suffix: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		clearIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		removeIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		animation: {
+			type: String,
+			required: false
+		},
+		transitionName: {
+			type: String,
+			required: false
+		},
+		popupStyle: {
+			type: Object,
+			required: false
+		},
+		popupRender: {
+			type: Function,
+			required: false
+		},
+		popupAlign: {
+			type: Object,
+			required: false
+		},
+		builtinPlacements: {
+			type: Object,
+			required: false
+		},
+		getPopupContainer: {
+			type: Function,
+			required: false
+		},
+		showAction: {
+			type: Array,
+			required: false
+		},
+		components: {
+			type: Object,
+			required: false
+		},
+		onOpenChange: {
+			type: Function,
+			required: false
+		},
+		onDropdownVisibleChange: {
+			type: Function,
+			required: false
+		},
+		onClear: {
+			type: Function,
+			required: false
+		},
+		onKeydown: {
+			type: Function,
+			required: false
+		},
+		onKeyup: {
+			type: Function,
+			required: false
+		},
+		onBlur: {
+			type: Function,
+			required: false
+		},
+		"onUpdate:value": {
+			type: Function,
+			required: false
+		},
+		onClick: {
+			type: Function,
+			required: false
+		},
+		onActive: {
+			type: Function,
+			required: false
+		},
+		onChange: {
+			type: Function,
+			required: false
+		},
+		onDeselect: { required: false },
+		onInputKeydown: {
+			type: Function,
+			required: false
+		},
+		onMousedown: {
+			type: Function,
+			required: false
+		},
+		onMouseleave: {
+			type: Function,
+			required: false
+		},
+		onMouseenter: {
+			type: Function,
+			required: false
+		},
+		onFocus: {
+			type: Function,
+			required: false
+		},
+		onPopupScroll: {
+			type: Function,
+			required: false
+		},
+		onSelect: { required: false }
+	},
+	name: "LightSelect",
+	inheritAttrs: false
+});
+//#endregion
+export { LightSelect as default };

package/dist/components/Select/LightSelect/style/index.d.ts

@@ -0,0 +1,11 @@
+import { ComputedRef } from "vue";
+import * as _$_antdv_next1_pro_provider0 from "@antdv-next1/pro-provider";
+import { ProAliasToken } from "@antdv-next1/pro-provider";
+
+//#region src/components/Select/LightSelect/style/index.d.ts
+interface ProToken extends ProAliasToken {
+  componentCls: string;
+}
+declare function useStyle(prefixCls: ComputedRef<string>): _$_antdv_next1_pro_provider0.UseStyleResult;
+//#endregion
+export { ProToken, useStyle };

package/dist/components/Select/LightSelect/style/index.js

@@ -0,0 +1,28 @@
+import { useStyle as useStyle$1 } from "@antdv-next1/pro-provider";
+//#region src/components/Select/LightSelect/style/index.ts
+const genProStyle = (token) => {
+	return { [token.componentCls]: {
+		[`${token.antCls}-select`]: {
+			position: "absolute",
+			width: 153,
+			height: 28,
+			visibility: "hidden",
+			opacity: 0,
+			"&-selector": { height: 28 }
+		},
+		[`&${token.componentCls}-searchable`]: { [`${token.antCls}-select`]: {
+			width: 200,
+			"&-selector": { height: 28 }
+		} }
+	} };
+};
+function useStyle(prefixCls) {
+	return useStyle$1("LightSelect", (token) => {
+		return [genProStyle({
+			...token,
+			componentCls: `.${prefixCls.value}`
+		})];
+	});
+}
+//#endregion
+export { useStyle };