antdv-next 1.0.0-alpha.3 → 1.0.0-alpha.5

package/dist/select/index.js

@@ -10,9 +10,9 @@ 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 { useFormItemInputContext } from "../form/context.js";
 import { useVariants } from "../form/hooks/useVariant.js";
 import mergedBuiltinPlacements_default from "./mergedBuiltinPlacements.js";
 import style_default from "./style/index.js";
@@ -219,7 +219,7 @@ const Select = /* @__PURE__ */ defineComponent((props, { slots, emit, expose, at
 				info
 			});
 		};
-		if (notFoundContent) selectProps.notFoundContent = notFoundContent;
+		if (mergedNotFound !== void 0) selectProps.notFoundContent = mergedNotFound;
 		return createVNode(VcSelect, mergeProps(restAttrs, onAttrs, {
 			"virtual": virtual.value,
 			"classNames": mergedClassNames.value,
@@ -288,51 +288,63 @@ const Select = /* @__PURE__ */ defineComponent((props, { slots, emit, expose, at
 	props: /* @__PURE__ */ mergeDefaults({
 		placement: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		mode: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		status: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		popupClassName: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		dropdownClassName: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		dropdownStyle: {
 			type: Object,
-			required: false
+			required: false,
+			default: void 0
 		},
 		dropdownRender: {
 			type: Function,
-			required: false
+			required: false,
+			default: void 0
 		},
 		dropdownMatchSelectWidth: {
 			type: [Boolean, Number],
-			required: false
+			required: false,
+			default: void 0
 		},
 		popupMatchSelectWidth: {
 			type: [Boolean, Number],
-			required: false
+			required: false,
+			default: void 0
 		},
 		styles: {
 			type: [Object, Function],
-			required: false
+			required: false,
+			default: void 0
 		},
 		classes: {
 			type: [Object, Function],
-			required: false
+			required: false,
+			default: void 0
 		},
 		optionRender: {
 			type: Function,
-			required: false
+			required: false,
+			default: void 0
 		},
 		prefix: {
 			type: [
@@ -343,7 +355,8 @@ const Select = /* @__PURE__ */ defineComponent((props, { slots, emit, expose, at
 				null,
 				Object
 			],
-			required: false
+			required: false,
+			default: void 0
 		},
 		suffixIcon: {
 			type: [
@@ -354,103 +367,128 @@ const Select = /* @__PURE__ */ defineComponent((props, { slots, emit, expose, at
 				null,
 				Object
 			],
-			required: false
+			required: false,
+			default: void 0
 		},
 		size: {
 			type: [String, null],
-			required: false
+			required: false,
+			default: void 0
 		},
 		disabled: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		bordered: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		showArrow: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		variant: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		rootClass: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		prefixCls: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		id: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		fieldNames: {
 			type: Object,
-			required: false
+			required: false,
+			default: void 0
 		},
 		onSearch: {
 			type: Function,
-			required: false
+			required: false,
+			default: void 0
 		},
 		showSearch: {
 			type: [Boolean, Object],
-			required: false
+			required: false,
+			default: void 0
 		},
 		searchValue: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		autoClearSearchValue: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		filterOption: {
 			type: [Boolean, Function],
-			required: false
+			required: false,
+			default: void 0
 		},
 		filterSort: {
 			type: Function,
-			required: false
+			required: false,
+			default: void 0
 		},
 		optionFilterProp: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		optionLabelProp: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		options: {
 			type: Array,
-			required: false
+			required: false,
+			default: void 0
 		},
 		defaultActiveFirstOption: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		virtual: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		direction: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		listHeight: {
 			type: Number,
-			required: false
+			required: false,
+			default: void 0
 		},
 		listItemHeight: {
 			type: Number,
-			required: false
+			required: false,
+			default: void 0
 		},
 		labelRender: {
 			type: Function,
-			required: false
+			required: false,
+			default: void 0
 		},
 		menuItemSelectedIcon: {
 			type: [
@@ -462,25 +500,36 @@ const Select = /* @__PURE__ */ defineComponent((props, { slots, emit, expose, at
 				Boolean,
 				Array
 			],
-			required: false
+			required: false,
+			default: void 0
 		},
 		labelInValue: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
+		},
+		value: {
+			required: false,
+			default: void 0
+		},
+		defaultValue: {
+			required: false,
+			default: void 0
 		},
-		value: { required: false },
-		defaultValue: { required: false },
 		maxCount: {
 			type: Number,
-			required: false
+			required: false,
+			default: void 0
 		},
 		tagRender: {
 			type: Function,
-			required: false
+			required: false,
+			default: void 0
 		},
 		autoFocus: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		placeholder: {
 			type: [
@@ -492,15 +541,18 @@ const Select = /* @__PURE__ */ defineComponent((props, { slots, emit, expose, at
 				Boolean,
 				Array
 			],
-			required: false
+			required: false,
+			default: void 0
 		},
 		title: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		tabIndex: {
 			type: Number,
-			required: false
+			required: false,
+			default: void 0
 		},
 		notFoundContent: {
 			type: [
@@ -512,39 +564,48 @@ const Select = /* @__PURE__ */ defineComponent((props, { slots, emit, expose, at
 				Boolean,
 				Array
 			],
-			required: false
+			required: false,
+			default: void 0
 		},
 		maxLength: {
 			type: Number,
-			required: false
+			required: false,
+			default: void 0
 		},
 		showScrollBar: {
 			type: [Boolean, String],
-			required: false
+			required: false,
+			default: void 0
 		},
 		choiceTransitionName: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		loading: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		open: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		defaultOpen: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		maxTagTextLength: {
 			type: Number,
-			required: false
+			required: false,
+			default: void 0
 		},
 		maxTagCount: {
 			type: [Number, String],
-			required: false
+			required: false,
+			default: void 0
 		},
 		maxTagPlaceholder: {
 			type: [
@@ -556,15 +617,18 @@ const Select = /* @__PURE__ */ defineComponent((props, { slots, emit, expose, at
 				Boolean,
 				Array
 			],
-			required: false
+			required: false,
+			default: void 0
 		},
 		tokenSeparators: {
 			type: Array,
-			required: false
+			required: false,
+			default: void 0
 		},
 		allowClear: {
 			type: [Boolean, Object],
-			required: false
+			required: false,
+			default: void 0
 		},
 		suffix: {
 			type: [
@@ -576,7 +640,8 @@ const Select = /* @__PURE__ */ defineComponent((props, { slots, emit, expose, at
 				Boolean,
 				Array
 			],
-			required: false
+			required: false,
+			default: void 0
 		},
 		clearIcon: {
 			type: [
@@ -588,7 +653,8 @@ const Select = /* @__PURE__ */ defineComponent((props, { slots, emit, expose, at
 				Boolean,
 				Array
 			],
-			required: false
+			required: false,
+			default: void 0
 		},
 		removeIcon: {
 			type: [
@@ -600,43 +666,53 @@ const Select = /* @__PURE__ */ defineComponent((props, { slots, emit, expose, at
 				Boolean,
 				Array
 			],
-			required: false
+			required: false,
+			default: void 0
 		},
 		animation: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		transitionName: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		popupStyle: {
 			type: Object,
-			required: false
+			required: false,
+			default: void 0
 		},
 		popupRender: {
 			type: Function,
-			required: false
+			required: false,
+			default: void 0
 		},
 		popupAlign: {
 			type: Object,
-			required: false
+			required: false,
+			default: void 0
 		},
 		builtinPlacements: {
 			type: Object,
-			required: false
+			required: false,
+			default: void 0
 		},
 		getPopupContainer: {
 			type: Function,
-			required: false
+			required: false,
+			default: void 0
 		},
 		showAction: {
 			type: Array,
-			required: false
+			required: false,
+			default: void 0
 		},
 		components: {
 			type: Object,
-			required: false
+			required: false,
+			default: void 0
 		}
 	}, { listHeight: 256 }),
 	name: "ASelect",

package/dist/select/style/select-input-multiple.js

@@ -1,29 +1,31 @@
 import { resetIcon, textEllipsis } from "../../style/index.js";
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
 
 //#region src/select/style/select-input-multiple.ts
 const FIXED_INPUT_MIN_WIDTH = 4;
 const genSelectInputMultipleStyle = (token) => {
-	const { componentCls, calc, iconCls, paddingXS, paddingXXS, INTERNAL_FIXED_ITEM_MARGIN, lineWidth, colorIcon, colorIconHover, inputPaddingHorizontalBase } = token;
+	const { componentCls, calc, iconCls, paddingXS, paddingXXS, INTERNAL_FIXED_ITEM_MARGIN, lineWidth, colorIcon, colorIconHover, inputPaddingHorizontalBase, antCls } = token;
+	const [varName, varRef] = genCssVar(antCls, "select");
 	return { "&-multiple": {
-		"--select-multi-item-background": token.multipleItemBg,
-		"--select-multi-item-border-color": "transparent",
-		"--select-multi-item-border-radius": token.borderRadiusSM,
-		"--select-multi-item-height": token.multipleItemHeight,
-		"--select-multi-padding-base": `calc((var(--select-height) - var(--select-multi-item-height)) / 2)`,
-		"--select-multi-padding-vertical": `calc(var(--select-multi-padding-base) - ${INTERNAL_FIXED_ITEM_MARGIN} - ${lineWidth})`,
-		"--select-multi-item-padding-horizontal": `calc(${inputPaddingHorizontalBase} - var(--select-multi-padding-vertical) - ${lineWidth} * 2)`,
-		"paddingBlock": `var(--select-multi-padding-vertical)`,
-		"paddingInlineStart": `calc(var(--select-multi-padding-base) - ${lineWidth})`,
-		[`${componentCls}-prefix`]: { marginInlineStart: "var(--select-multi-item-padding-horizontal)" },
+		[varName("multi-item-background")]: token.multipleItemBg,
+		[varName("multi-item-border-color")]: "transparent",
+		[varName("multi-item-border-radius")]: token.borderRadiusSM,
+		[varName("multi-item-height")]: token.multipleItemHeight,
+		[varName("multi-padding-base")]: `calc((${varRef("height")} - ${varRef("multi-item-height")}) / 2)`,
+		[varName("multi-padding-vertical")]: `calc(${varRef("multi-padding-base")} - ${INTERNAL_FIXED_ITEM_MARGIN} - ${lineWidth})`,
+		[varName("multi-item-padding-horizontal")]: `calc(${inputPaddingHorizontalBase} - ${varRef("multi-padding-vertical")} - ${lineWidth} * 2)`,
+		paddingBlock: varRef("multi-padding-vertical"),
+		paddingInlineStart: `calc(${varRef("multi-padding-base")} - ${lineWidth})`,
+		[`${componentCls}-prefix`]: { marginInlineStart: varRef("multi-item-padding-horizontal") },
 		[`${componentCls}-prefix + ${componentCls}-content`]: {
 			[`${componentCls}-placeholder`]: { insetInlineStart: 0 },
 			[`${componentCls}-content-item${componentCls}-content-item-suffix`]: { marginInlineStart: 0 }
 		},
 		[`${componentCls}-placeholder`]: {
 			position: "absolute",
-			lineHeight: "var(--select-line-height)",
-			insetInlineStart: "var(--select-multi-item-padding-horizontal)",
-			width: "calc(100% - var(--select-multi-item-padding-horizontal))",
+			lineHeight: varRef("line-height"),
+			insetInlineStart: varRef("multi-item-padding-horizontal"),
+			width: `calc(100% - ${varRef("multi-item-padding-horizontal")})`,
 			top: "50%",
 			transform: "translateY(-50%)"
 		},
@@ -31,21 +33,21 @@ const genSelectInputMultipleStyle = (token) => {
 			"flexWrap": "wrap",
 			"alignItems": "center",
 			"lineHeight": 1,
-			"&-item-prefix": { height: "var(--select-font-size)" },
+			"&-item-prefix": { height: varRef("font-size") },
 			"&-item": {
 				lineHeight: 1,
 				maxWidth: `calc(100% - ${FIXED_INPUT_MIN_WIDTH}px)`
 			},
 			[`${componentCls}-content-item-prefix + ${componentCls}-content-item-suffix,
-          ${componentCls}-content-item-suffix:first-child`]: { marginInlineStart: "var(--select-multi-item-padding-horizontal)" },
+          ${componentCls}-content-item-suffix:first-child`]: { marginInlineStart: varRef("multi-item-padding-horizontal") },
 			[`${componentCls}-selection-item`]: {
-				"lineHeight": `calc(var(--select-multi-item-height) - ${lineWidth} * 2)`,
-				"border": `${lineWidth} solid var(--select-multi-item-border-color)`,
+				"lineHeight": `calc(${varRef("multi-item-height")} - ${lineWidth} * 2)`,
+				"border": `${lineWidth} solid ${varRef("multi-item-border-color")}`,
 				"display": "flex",
 				"marginBlock": INTERNAL_FIXED_ITEM_MARGIN,
 				"marginInlineEnd": calc(INTERNAL_FIXED_ITEM_MARGIN).mul(2).equal(),
-				"background": `var(--select-multi-item-background)`,
-				"borderRadius": `var(--select-multi-item-border-radius)`,
+				"background": varRef("multi-item-background"),
+				"borderRadius": varRef("multi-item-border-radius"),
 				"paddingInlineStart": paddingXS,
 				"paddingInlineEnd": paddingXXS,
 				"transition": [
@@ -71,25 +73,25 @@ const genSelectInputMultipleStyle = (token) => {
 				}
 			},
 			[`${componentCls}-input`]: {
-				lineHeight: calc(INTERNAL_FIXED_ITEM_MARGIN).mul(2).add("var(--select-multi-item-height)").equal(),
-				width: "calc(var(--select-input-width, 0) * 1px)",
+				lineHeight: calc(INTERNAL_FIXED_ITEM_MARGIN).mul(2).add(varRef("multi-item-height")).equal(),
+				width: `calc(var(--select-input-width, 0) * 1px)`,
 				minWidth: FIXED_INPUT_MIN_WIDTH,
 				maxWidth: "100%",
 				transition: `line-height ${token.motionDurationSlow}`
 			}
 		},
 		[`&${componentCls}-sm`]: {
-			"--select-multi-item-height": token.multipleItemHeightSM,
-			"--select-multi-item-border-radius": token.borderRadiusXS
+			[varName("multi-item-height")]: token.multipleItemHeightSM,
+			[varName("multi-item-border-radius")]: token.borderRadiusXS
 		},
 		[`&${componentCls}-lg`]: {
-			"--select-multi-item-height": token.multipleItemHeightLG,
-			"--select-multi-item-border-radius": token.borderRadius
+			[varName("multi-item-height")]: token.multipleItemHeightLG,
+			[varName("multi-item-border-radius")]: token.borderRadius
 		},
 		[`&${componentCls}-filled`]: {
-			"--select-multi-item-border-color": token.colorSplit,
-			"--select-multi-item-background": token.colorBgContainer,
-			[`&${componentCls}-disabled`]: { "--select-multi-item-border-color": "transparent" }
+			[varName("multi-item-border-color")]: token.colorSplit,
+			[varName("multi-item-background")]: token.colorBgContainer,
+			[`&${componentCls}-disabled`]: { [varName("multi-item-border-color")]: "transparent" }
 		}
 	} };
 };