antdv-next 0.0.0 → 1.0.0-alpha.1

package/dist/select/index.js

@@ -0,0 +1,658 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import useToken from "../theme/useToken.js";
+import "../theme/internal.js";
+import { getAttrStyleAndClass, useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { devUseWarning, isDev } from "../_util/warning.js";
+import { useZIndex } from "../_util/hooks/useZIndex.js";
+import "../_util/hooks/index.js";
+import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
+import useCSSVarCls_default from "../config-provider/hooks/useCSSVarCls.js";
+import { useSize } from "../config-provider/hooks/useSize.js";
+import { useCompactItemContext } from "../space/Compact.js";
+import { useDisabledContext } from "../config-provider/DisabledContext.js";
+import { useFormItemInputContext } from "../form/context.js";
+import { getMergedStatus, getStatusClassNames } from "../_util/statusUtils.js";
+import { DefaultRenderEmpty } from "../config-provider/defaultRenderEmpty.js";
+import { useVariants } from "../form/hooks/useVariant.js";
+import mergedBuiltinPlacements_default from "./mergedBuiltinPlacements.js";
+import style_default from "./style/index.js";
+import useIcons from "./useIcons.js";
+import usePopupRender_default from "./usePopupRender.js";
+import useShowArrow from "./useShowArrow.js";
+import { computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+import { omit } from "es-toolkit";
+import { getTransitionName } from "@v-c/util/dist/utils/transition";
+import VcSelect, { OptGroup, Option } from "@v-c/select";
+
+//#region src/select/index.tsx
+const omitKeys = [
+	"onClear",
+	"onKeyUp",
+	"onKeyDown",
+	"onBlur",
+	"onClick",
+	"onActive",
+	"onChange",
+	"onDeselect",
+	"onInputKeyDown",
+	"onMouseDown",
+	"onMouseLeave",
+	"onMouseEnter",
+	"onFocus",
+	"onPopupScroll",
+	"onPopupVisibleChange",
+	"onSelect",
+	"popupRender",
+	"labelRender",
+	"optionRender",
+	"maxTagPlaceholder",
+	"notFoundContent"
+];
+const SECRET_COMBOBOX_MODE_DO_NOT_USE = "SECRET_COMBOBOX_MODE_DO_NOT_USE";
+const Select = /* @__PURE__ */ defineComponent((props, { slots, emit, expose, attrs }) => {
+	const { getTargetContainer: getContextPopupContainer, getPrefixCls, renderEmpty, direction: contextDirection, virtual, popupMatchSelectWidth: contextPopupMatchSelectWidth, popupOverflow, showSearch, style: contextStyle, styles: contextStyles, class: contextClassName, classes: contextClassNames, prefixCls } = useComponentBaseConfig("select", props, ["showSearch"]);
+	const { listItemHeight: customListItemHeight, direction: propDirection, variant: customizeVariant, bordered, size: customizeSize, classes, styles } = toPropsRefs(props, "listItemHeight", "direction", "variant", "bordered", "size", "classes", "styles");
+	const [, token] = useToken();
+	const value = shallowRef(props.value ?? props?.defaultValue);
+	watch(() => props.value, () => {
+		value.value = props.value;
+	});
+	const listItemHeight = computed(() => customListItemHeight.value ?? token?.value?.controlHeight);
+	const rootPrefixCls = computed(() => getPrefixCls());
+	const direction = computed(() => propDirection.value ?? contextDirection.value);
+	const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
+	const [variant, enableVariantCls] = useVariants("select", customizeVariant, bordered);
+	const rootCls = useCSSVarCls_default(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const mode = computed(() => {
+		const { mode: m } = props;
+		if (m === "combobox") return;
+		if (m === SECRET_COMBOBOX_MODE_DO_NOT_USE) return "combobox";
+		return m;
+	});
+	const isMultiple = computed(() => mode.value === "multiple" || mode.value === "tags");
+	const mergedOnOpenChange = (open) => {
+		emit("openChange", open);
+		emit("dropdownVisibleChange", open);
+	};
+	const formItemInputContext = useFormItemInputContext();
+	const mergedSize = useSize((ctx) => customizeSize.value ?? compactSize.value ?? ctx);
+	const disabled = useDisabledContext();
+	const mergedDisabled = computed(() => props.disabled ?? disabled.value);
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			variant: variant.value,
+			disabled: mergedDisabled.value,
+			size: mergedSize.value
+		};
+	});
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, styles), useToProps(mergedProps), computed(() => {
+		return { popup: { _default: "root" } };
+	}));
+	const memoPlacement = computed(() => {
+		const { placement } = props;
+		if (placement !== void 0) return placement;
+		return direction.value === "rtl" ? "bottomRight" : "bottomLeft";
+	});
+	if (isDev) {
+		const maxCount = props.maxCount;
+		const warning = devUseWarning("Select");
+		Object.entries({
+			dropdownMatchSelectWidth: "popupMatchSelectWidth",
+			dropdownStyle: "styles.popup.root",
+			dropdownClassName: "classNames.popup.root",
+			popupClassName: "classNames.popup.root",
+			dropdownRender: "popupRender",
+			onDropdownVisibleChange: "onOpenChange",
+			bordered: "variant"
+		}).forEach(([oldProp, newProp]) => {
+			warning.deprecated(!props[oldProp], oldProp, newProp);
+		});
+		warning(!props.showArrow, "deprecated", "`showArrow` is deprecated which will be removed in next major version. It will be a default behavior, you can hide it by setting `suffixIcon` to null.");
+		warning(!(typeof maxCount !== "undefined" && !isMultiple.value), "usage", "`maxCount` only works with mode `multiple` or `tags`");
+	}
+	const mergedPopupStyle = computed(() => {
+		const { popupStyle, dropdownStyle } = props;
+		return {
+			...mergedStyles.value.popup?.root,
+			...popupStyle ?? dropdownStyle
+		};
+	});
+	const [zIndex] = useZIndex("SelectLike", computed(() => mergedStyles.value?.popup?.root?.zIndex ?? mergedPopupStyle.value?.zIndex));
+	expose({});
+	return () => {
+		const { popupMatchSelectWidth, dropdownMatchSelectWidth, showArrow, dropdownRender, status: customStatus, allowClear, popupClassName, dropdownClassName, rootClass, popupStyle, dropdownStyle, transitionName, builtinPlacements, listHeight, getPopupContainer, maxCount,...rest } = props;
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const mergedSuffixIcon = getSlotPropsFnRun(slots, props, "suffixIcon", false);
+		const showSuffixIcon = useShowArrow(mergedSuffixIcon, showArrow);
+		const tagRender = slots?.tagRender ?? props?.tagRender;
+		const mergedPopupMatchSelectWidth = popupMatchSelectWidth ?? dropdownMatchSelectWidth ?? contextPopupMatchSelectWidth.value;
+		const mergedPopupRender = usePopupRender_default((slots?.popupRender ?? props?.popupRender) || dropdownRender);
+		const notFoundContent = getSlotPropsFnRun(slots, props, "notFoundContent", false);
+		const { status: contextStatus, hasFeedback, isFormItemInput, feedbackIcon } = formItemInputContext.value || {};
+		const mergedStatus = getMergedStatus(contextStatus, customStatus);
+		let mergedNotFound;
+		if (notFoundContent !== void 0) mergedNotFound = notFoundContent;
+		else if (mode.value === "combobox") mergedNotFound = null;
+		else mergedNotFound = renderEmpty?.("Select") || createVNode(DefaultRenderEmpty, { "componentName": "Select" }, null);
+		const { suffixIcon, itemIcon, removeIcon, clearIcon } = useIcons({
+			...rest,
+			multiple: isMultiple.value,
+			hasFeedback,
+			feedbackIcon,
+			showSuffixIcon,
+			suffixIcon: mergedSuffixIcon,
+			prefixCls: prefixCls.value,
+			componentName: "Select"
+		});
+		const mergedAllowClear = allowClear === true ? { clearIcon } : allowClear;
+		const selectProps = omit(rest, [
+			"suffixIcon",
+			"itemIcon",
+			"value",
+			...omitKeys
+		]);
+		const mergedPopupClassName = clsx(mergedClassNames.value?.popup?.root, popupClassName, dropdownClassName, { [`${prefixCls.value}-dropdown-${direction.value}`]: direction.value === "rtl" }, rootClass, cssVarCls.value, rootCls.value, hashId.value);
+		const mergedClassName = clsx({
+			[`${prefixCls.value}-lg`]: mergedSize.value === "large",
+			[`${prefixCls.value}-sm`]: mergedSize.value === "small",
+			[`${prefixCls.value}-rtl`]: direction.value === "rtl",
+			[`${prefixCls.value}-${variant.value}`]: enableVariantCls.value,
+			[`${prefixCls.value}-in-form-item`]: isFormItemInput
+		}, getStatusClassNames(prefixCls.value, mergedStatus, hasFeedback), compactItemClassnames.value, contextClassName.value, className, mergedClassNames.value?.root, rootClass, cssVarCls.value, rootCls.value, hashId.value);
+		const prefix = getSlotPropsFnRun(slots, props, "prefix");
+		const onAttrs = {
+			onSelect: (...args) => {
+				emit("select", ...args);
+			},
+			onClear: (...args) => {
+				emit("clear", ...args);
+			},
+			onKeyDown: (...args) => {
+				emit("keydown", ...args);
+			},
+			onKeyUp: (...args) => {
+				emit("keyup", ...args);
+			},
+			onBlur: (...args) => {
+				emit("blur", ...args);
+			},
+			onFocus: (...args) => {
+				emit("focus", ...args);
+			},
+			onClick: (...args) => {
+				emit("click", ...args);
+			},
+			onActive: (...args) => {
+				emit("active", ...args);
+			},
+			onChange: (...args) => {
+				emit("update:value", args[0]);
+				emit("change", ...args);
+			},
+			onDeselect: (...args) => {
+				emit("deselect", ...args);
+			},
+			onInputKeyDown: (...args) => {
+				emit("inputKeydown", ...args);
+			},
+			onMouseDown: (...args) => {
+				emit("mousedown", ...args);
+			},
+			onMouseLeave: (...args) => {
+				emit("mouseleave", ...args);
+			},
+			onMouseEnter: (...args) => {
+				emit("mouseenter", ...args);
+			},
+			onPopupScroll: (...args) => {
+				emit("popupScroll", ...args);
+			}
+		};
+		const labelRender = slots?.labelRender ?? props?.labelRender;
+		const optionRender = slots?.optionRender ?? props?.optionRender;
+		if (optionRender) selectProps.optionRender = (option, info) => {
+			return optionRender({
+				option,
+				info
+			});
+		};
+		if (notFoundContent) selectProps.notFoundContent = notFoundContent;
+		return createVNode(VcSelect, mergeProps(restAttrs, onAttrs, {
+			"virtual": virtual.value,
+			"classNames": mergedClassNames.value,
+			"styles": mergedStyles.value,
+			"showSearch": showSearch.value
+		}, selectProps, {
+			"maxTagPlaceholder": slots.maxTagPlaceholder,
+			"labelRender": labelRender,
+			"style": {
+				...mergedStyles.value.root,
+				...contextStyle.value,
+				...style
+			},
+			"popupMatchSelectWidth": mergedPopupMatchSelectWidth,
+			"transitionName": getTransitionName(rootPrefixCls.value, "slide-up", transitionName),
+			"builtinPlacements": mergedBuiltinPlacements_default(builtinPlacements, popupOverflow.value),
+			"listHeight": listHeight,
+			"listItemHeight": listItemHeight.value,
+			"mode": mode.value,
+			"prefixCls": prefixCls.value,
+			"placement": memoPlacement.value,
+			"direction": direction.value,
+			"prefix": prefix,
+			"value": value.value,
+			"suffixIcon": suffixIcon,
+			"menuItemSelectedIcon": itemIcon,
+			"removeIcon": removeIcon,
+			"allowClear": mergedAllowClear,
+			"notFoundContent": mergedNotFound,
+			"className": mergedClassName,
+			"getPopupContainer": getPopupContainer || getContextPopupContainer,
+			"popupClassName": mergedPopupClassName,
+			"disabled": mergedDisabled.value,
+			"popupStyle": {
+				...mergedStyles.value?.popup?.root,
+				...mergedPopupStyle.value,
+				zIndex: zIndex.value
+			},
+			"maxCount": isMultiple.value ? maxCount : void 0,
+			"tagRender": isMultiple.value ? tagRender : void 0,
+			"popupRender": mergedPopupRender,
+			"onPopupVisibleChange": mergedOnOpenChange
+		}), null);
+	};
+}, {
+	emits: [
+		"openChange",
+		"dropdownVisibleChange",
+		"clear",
+		"keydown",
+		"keyup",
+		"blur",
+		"update:value",
+		"click",
+		"active",
+		"change",
+		"deselect",
+		"inputKeydown",
+		"mousedown",
+		"mouseleave",
+		"mouseenter",
+		"focus",
+		"popupScroll",
+		"select"
+	],
+	props: /* @__PURE__ */ mergeDefaults({
+		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
+		},
+		popupMatchSelectWidth: {
+			type: [Boolean, Number],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		optionRender: {
+			type: Function,
+			required: false
+		},
+		prefix: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		suffixIcon: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		size: {
+			type: [String, null],
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		bordered: {
+			type: Boolean,
+			required: false
+		},
+		showArrow: {
+			type: Boolean,
+			required: false
+		},
+		variant: {
+			type: String,
+			required: false
+		},
+		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
+		},
+		searchValue: {
+			type: String,
+			required: false
+		},
+		autoClearSearchValue: {
+			type: Boolean,
+			required: false
+		},
+		filterOption: {
+			type: [Boolean, Function],
+			required: false
+		},
+		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
+		},
+		virtual: {
+			type: Boolean,
+			required: false
+		},
+		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
+		},
+		labelInValue: {
+			type: Boolean,
+			required: false
+		},
+		value: { required: false },
+		defaultValue: { required: false },
+		maxCount: {
+			type: Number,
+			required: false
+		},
+		tagRender: {
+			type: Function,
+			required: false
+		},
+		autoFocus: {
+			type: Boolean,
+			required: false
+		},
+		placeholder: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		tabIndex: {
+			type: Number,
+			required: false
+		},
+		notFoundContent: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false
+		},
+		maxLength: {
+			type: Number,
+			required: false
+		},
+		showScrollBar: {
+			type: [Boolean, String],
+			required: false
+		},
+		choiceTransitionName: {
+			type: String,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false
+		},
+		open: {
+			type: Boolean,
+			required: false
+		},
+		defaultOpen: {
+			type: Boolean,
+			required: false
+		},
+		maxTagTextLength: {
+			type: Number,
+			required: false
+		},
+		maxTagCount: {
+			type: [Number, String],
+			required: false
+		},
+		maxTagPlaceholder: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false
+		},
+		tokenSeparators: {
+			type: Array,
+			required: false
+		},
+		allowClear: {
+			type: [Boolean, Object],
+			required: false
+		},
+		suffix: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false
+		},
+		clearIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false
+		},
+		removeIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false
+		},
+		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
+		}
+	}, { listHeight: 256 }),
+	name: "ASelect",
+	inheritAttrs: false
+});
+Select.install = (app) => {
+	app.component(Select.name, Select);
+	app.component("ASelectOption", Option);
+	app.component("ASelectOptGroup", OptGroup);
+};
+Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE;
+Select.Option = Option;
+Select.OptGroup = OptGroup;
+var select_default = Select;
+const SelectOption = Option;
+const SelectOptGroup = OptGroup;
+
+//#endregion
+export { SelectOptGroup, SelectOption, select_default as default };

package/dist/select/mergedBuiltinPlacements.js

@@ -0,0 +1,41 @@
+//#region src/select/mergedBuiltinPlacements.ts
+function getBuiltInPlacements(popupOverflow) {
+	const sharedConfig = {
+		overflow: {
+			adjustX: true,
+			adjustY: true,
+			shiftY: true
+		},
+		htmlRegion: popupOverflow === "scroll" ? "scroll" : "visible",
+		dynamicInset: true
+	};
+	return {
+		bottomLeft: {
+			...sharedConfig,
+			points: ["tl", "bl"],
+			offset: [0, 4]
+		},
+		bottomRight: {
+			...sharedConfig,
+			points: ["tr", "br"],
+			offset: [0, 4]
+		},
+		topLeft: {
+			...sharedConfig,
+			points: ["bl", "tl"],
+			offset: [0, -4]
+		},
+		topRight: {
+			...sharedConfig,
+			points: ["br", "tr"],
+			offset: [0, -4]
+		}
+	};
+}
+function mergedBuiltinPlacements(buildInPlacements, popupOverflow) {
+	return buildInPlacements || getBuiltInPlacements(popupOverflow);
+}
+var mergedBuiltinPlacements_default = mergedBuiltinPlacements;
+
+//#endregion
+export { mergedBuiltinPlacements_default as default };