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

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

@@ -1,4 +1,5 @@
 import { resetComponent, textEllipsis } from "../../style/index.js";
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
 import select_input_customize_default from "./select-input-customize.js";
 import select_input_multiple_default from "./select-input-multiple.js";
 import { unit } from "@antdv-next/cssinjs";
@@ -6,27 +7,28 @@ import { unit } from "@antdv-next/cssinjs";
 //#region src/select/style/select-input.ts
 /** Set CSS variables and hover/focus styles for a Select input based on provided colors. */
 function genSelectInputVariableStyle(token, colors) {
-	const { componentCls } = token;
+	const { componentCls, antCls } = token;
+	const [varName] = genCssVar(antCls, "select");
 	const { border, borderHover, borderActive, borderOutline } = colors;
-	const baseBG = colors.background || token.colorBgContainer;
+	const baseBG = colors.background || token.selectorBg || token.colorBgContainer;
 	return {
-		"--select-border-color": border,
-		"--select-background": baseBG,
-		"--select-color": colors.color || token.colorText,
+		[varName("border-color")]: border,
+		[varName("background-color")]: baseBG,
+		[varName("color")]: colors.color || token.colorText,
 		[`&:not(${componentCls}-disabled)`]: {
 			"&:hover": {
-				"--select-border-color": borderHover,
-				"--select-background": colors.backgroundHover || baseBG
+				[varName("border-color")]: borderHover,
+				[varName("background-color")]: colors.backgroundHover || baseBG
 			},
 			[`&${componentCls}-focused`]: {
-				"--select-border-color": borderActive,
-				"--select-background": colors.backgroundActive || baseBG,
-				"boxShadow": `0 0 0 ${unit(token.controlOutlineWidth)} ${borderOutline}`
+				[varName("border-color")]: borderActive,
+				[varName("background-color")]: colors.backgroundActive || baseBG,
+				boxShadow: `0 0 0 ${unit(token.controlOutlineWidth)} ${borderOutline}`
 			}
 		},
 		[`&${componentCls}-disabled`]: {
-			"--select-border-color": colors.borderDisabled || colors.border,
-			"--select-background": colors.backgroundDisabled || colors.background
+			[varName("border-color")]: colors.borderDisabled || colors.border,
+			[varName("background-color")]: colors.backgroundDisabled || colors.background
 		}
 	};
 }
@@ -51,20 +53,21 @@ function genSelectInputVariantStyle(token, variant, colors, errorColors = {}, wa
 	] };
 }
 const genSelectInputStyle = (token) => {
-	const { componentCls, calc, fontHeight, controlHeight, iconCls } = token;
+	const { componentCls, fontHeight, controlHeight, iconCls, antCls, calc } = token;
+	const [varName, varRef] = genCssVar(antCls, "select");
 	return { [componentCls]: [
 		{
-			"--select-border-radius": token.borderRadius,
-			"--select-border-color": "#000",
-			"--select-border-size": token.lineWidth,
-			"--select-background": token.colorBgContainer,
-			"--select-font-size": token.fontSize,
-			"--select-line-height": token.lineHeight,
-			"--select-font-height": fontHeight,
-			"--select-color": token.colorText,
-			"--select-height": controlHeight,
-			"--select-padding-horizontal": calc(token.paddingSM).sub(token.lineWidth).equal(),
-			"--select-padding-vertical": "calc((var(--select-height) - var(--select-font-height)) / 2 - var(--select-border-size))",
+			[varName("border-radius")]: token.borderRadius,
+			[varName("border-color")]: "#000",
+			[varName("border-size")]: token.lineWidth,
+			[varName("background-color")]: token.colorBgContainer,
+			[varName("font-size")]: token.fontSize,
+			[varName("line-height")]: token.lineHeight,
+			[varName("font-height")]: fontHeight,
+			[varName("color")]: token.colorText,
+			[varName("height")]: controlHeight,
+			[varName("padding-horizontal")]: calc(token.paddingSM).sub(token.lineWidth).equal(),
+			[varName("padding-vertical")]: `calc((${varRef("height")} - ${varRef("font-height")}) / 2 - ${varRef("border-size")})`,
 			...resetComponent(token, true),
 			"display": "inline-flex",
 			"flexWrap": "nowrap",
@@ -73,16 +76,16 @@ const genSelectInputStyle = (token) => {
 			"alignItems": "flex-start",
 			"outline": 0,
 			"cursor": "pointer",
-			"borderRadius": "var(--select-border-radius)",
-			"borderWidth": "var(--select-border-size)",
+			"borderRadius": varRef("border-radius"),
+			"borderWidth": varRef("border-size"),
 			"borderStyle": token.lineType,
-			"borderColor": "var(--select-border-color)",
-			"background": "var(--select-background)",
-			"fontSize": "var(--select-font-size)",
-			"lineHeight": "var(--select-line-height)",
-			"color": "var(--select-color)",
-			"paddingInline": "var(--select-padding-horizontal)",
-			"paddingBlock": "var(--select-padding-vertical)",
+			"borderColor": varRef("border-color"),
+			"background": varRef("background-color"),
+			"fontSize": varRef("font-size"),
+			"lineHeight": varRef("line-height"),
+			"color": varRef("color"),
+			"paddingInline": varRef("padding-horizontal"),
+			"paddingBlock": varRef("padding-vertical"),
 			[`${componentCls}-prefix`]: {
 				flex: "none",
 				lineHeight: 1
@@ -129,19 +132,21 @@ const genSelectInputStyle = (token) => {
 			"&-disabled": {
 				background: token.colorBgContainerDisabled,
 				color: token.colorTextDisabled,
-				cursor: "not-allowed"
+				cursor: "not-allowed",
+				input: { cursor: "not-allowed" }
 			},
 			"&-sm": {
-				"--select-height": token.controlHeightSM,
-				"--select-padding-horizontal": calc(token.paddingXS).sub(token.lineWidth).equal(),
-				"--select-border-radius": token.borderRadiusSM
+				[varName("height")]: token.controlHeightSM,
+				[varName("padding-horizontal")]: calc(token.paddingXS).sub(token.lineWidth).equal(),
+				[varName("border-radius")]: token.borderRadiusSM,
+				[`${componentCls}-clear`]: { insetInlineEnd: varRef("padding-horizontal") }
 			},
 			"&-lg": {
-				"--select-height": token.controlHeightLG,
-				"--select-font-size": token.fontSizeLG,
-				"--select-line-height": token.lineHeightLG,
-				"--select-font-height": token.fontHeightLG,
-				"--select-border-radius": token.borderRadiusLG
+				[varName("height")]: token.controlHeightLG,
+				[varName("font-size")]: token.fontSizeLG,
+				[varName("line-height")]: token.lineHeightLG,
+				[varName("font-height")]: token.fontHeightLG,
+				[varName("border-radius")]: token.borderRadiusLG
 			}
 		},
 		{ [`&:not(${componentCls}-customize)`]: { [`${componentCls}-input`]: {
@@ -161,11 +166,12 @@ const genSelectInputStyle = (token) => {
 			[`${componentCls}-input`]: {
 				position: "absolute",
 				insetInline: 0,
-				insetBlock: "calc(var(--select-padding-vertical) * -1)",
-				lineHeight: "calc(var(--select-font-height) + var(--select-padding-vertical) * 2)"
+				insetBlock: `calc(${varRef("padding-vertical")} * -1)`,
+				lineHeight: `calc(${varRef("font-height")} + ${varRef("padding-vertical")} * 2)`
 			},
 			[`${componentCls}-content`]: { alignSelf: "center" }
 		} },
+		{ [`&-show-search:not(${componentCls}-customize-input):not(${componentCls}-disabled)`]: { cursor: "text" } },
 		select_input_multiple_default(token),
 		genSelectInputVariantStyle(token, "outlined", {
 			border: token.colorBorder,

package/dist/skeleton/Avatar.d.ts

@@ -1,10 +1,10 @@
 import { SkeletonElementProps } from "./Element.js";
-import * as vue430 from "vue";
+import * as vue436 from "vue";
 
 //#region src/skeleton/Avatar.d.ts
 interface SkeletonAvatarProps extends Omit<SkeletonElementProps, 'shape'> {
   shape?: 'circle' | 'square';
 }
-declare const SkeletonAvatar: vue430.DefineSetupFnComponent<SkeletonAvatarProps, {}, {}, SkeletonAvatarProps & {}, vue430.PublicProps>;
+declare const SkeletonAvatar: vue436.DefineSetupFnComponent<SkeletonAvatarProps, {}, {}, SkeletonAvatarProps & {}, vue436.PublicProps>;
 //#endregion
 export { SkeletonAvatar, SkeletonAvatarProps };

package/dist/skeleton/Avatar.js

@@ -23,23 +23,28 @@ const SkeletonAvatar = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 	props: /* @__PURE__ */ mergeDefaults({
 		shape: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		size: {
 			type: [String, Number],
-			required: false
+			required: false,
+			default: void 0
 		},
 		active: {
 			type: Boolean,
-			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
 		}
 	}, {
 		shape: "circle",

package/dist/skeleton/Button.d.ts

@@ -1,11 +1,11 @@
 import { SkeletonElementProps } from "./Element.js";
-import * as vue436 from "vue";
+import * as vue430 from "vue";
 
 //#region src/skeleton/Button.d.ts
 interface SkeletonButtonProps extends Omit<SkeletonElementProps, 'size'> {
   size?: 'large' | 'small' | 'default';
   block?: boolean;
 }
-declare const SkeletonButton: vue436.DefineSetupFnComponent<SkeletonButtonProps, {}, {}, SkeletonButtonProps & {}, vue436.PublicProps>;
+declare const SkeletonButton: vue430.DefineSetupFnComponent<SkeletonButtonProps, {}, {}, SkeletonButtonProps & {}, vue430.PublicProps>;
 //#endregion
 export { SkeletonButton };

package/dist/skeleton/Button.js

@@ -25,27 +25,33 @@ const SkeletonButton = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 	props: /* @__PURE__ */ mergeDefaults({
 		size: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		block: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		shape: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		active: {
 			type: Boolean,
-			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
 		}
 	}, { size: "small" }),
 	name: "ASkeletonButton",

package/dist/skeleton/Element.js

@@ -27,23 +27,28 @@ const Element = /* @__PURE__ */ defineComponent((props) => {
 }, { props: {
 	size: {
 		type: [String, Number],
-		required: false
+		required: false,
+		default: void 0
 	},
 	shape: {
 		type: String,
-		required: false
+		required: false,
+		default: void 0
 	},
 	active: {
 		type: Boolean,
-		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
 	}
 } });
 var Element_default = Element;

package/dist/skeleton/Image.d.ts

@@ -1,8 +1,8 @@
 import { SkeletonElementProps } from "./Element.js";
-import * as vue438 from "vue";
+import * as vue432 from "vue";
 
 //#region src/skeleton/Image.d.ts
 interface SkeletonImageProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {}
-declare const SkeletonImage: vue438.DefineSetupFnComponent<SkeletonImageProps, {}, {}, SkeletonImageProps & {}, vue438.PublicProps>;
+declare const SkeletonImage: vue432.DefineSetupFnComponent<SkeletonImageProps, {}, {}, SkeletonImageProps & {}, vue432.PublicProps>;
 //#endregion
 export { SkeletonImage };

package/dist/skeleton/Image.js

@@ -27,15 +27,18 @@ const SkeletonImage = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 	props: {
 		active: {
 			type: Boolean,
-			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
 		}
 	},
 	name: "ASkeletonImage",

package/dist/skeleton/Input.d.ts

@@ -1,11 +1,11 @@
 import { SkeletonElementProps } from "./Element.js";
-import * as vue442 from "vue";
+import * as vue438 from "vue";
 
 //#region src/skeleton/Input.d.ts
 interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
   size?: 'large' | 'small' | 'default';
   block?: boolean;
 }
-declare const SkeletonInput: vue442.DefineSetupFnComponent<SkeletonInputProps, {}, {}, SkeletonInputProps & {}, vue442.PublicProps>;
+declare const SkeletonInput: vue438.DefineSetupFnComponent<SkeletonInputProps, {}, {}, SkeletonInputProps & {}, vue438.PublicProps>;
 //#endregion
 export { SkeletonInput };

package/dist/skeleton/Input.js

@@ -25,23 +25,28 @@ const SkeletonInput = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 	props: /* @__PURE__ */ mergeDefaults({
 		size: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		block: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		active: {
 			type: Boolean,
-			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
 		}
 	}, { size: "default" }),
 	name: "ASkeletonInput",

package/dist/skeleton/Node.d.ts

@@ -1,6 +1,6 @@
 import { EmptyEmit } from "../_util/type.js";
 import { SkeletonElementProps } from "./Element.js";
-import * as vue440 from "vue";
+import * as vue428 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/skeleton/Node.d.ts
@@ -10,8 +10,8 @@ interface SkeletonNodeProps extends Omit<SkeletonElementProps, 'size' | 'shape'>
 interface SkeletonNodeSlots {
   default?: () => any;
 }
-declare const SkeletonNode: vue440.DefineSetupFnComponent<SkeletonNodeProps, EmptyEmit, SlotsType<SkeletonNodeSlots>, SkeletonNodeProps & {
+declare const SkeletonNode: vue428.DefineSetupFnComponent<SkeletonNodeProps, EmptyEmit, SlotsType<SkeletonNodeSlots>, SkeletonNodeProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue440.PublicProps>;
+}, vue428.PublicProps>;
 //#endregion
 export { SkeletonNode };

package/dist/skeleton/Node.js

@@ -19,19 +19,23 @@ const SkeletonNode = /* @__PURE__ */ defineComponent((props, { attrs, slots }) =
 	props: {
 		fullSize: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		active: {
 			type: Boolean,
-			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
 		}
 	},
 	name: "ASkeletonNode",

package/dist/skeleton/Paragraph.js

@@ -21,11 +21,13 @@ const Paragraph = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 	props: /* @__PURE__ */ mergeDefaults({
 		prefixCls: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		rootClass: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		width: {
 			type: [
@@ -33,11 +35,13 @@ const Paragraph = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 				String,
 				Array
 			],
-			required: false
+			required: false,
+			default: void 0
 		},
 		rows: {
 			type: Number,
-			required: false
+			required: false,
+			default: void 0
 		}
 	}, { rows: 0 }),
 	name: "ASkeletonParagraph",

package/dist/skeleton/Skeleton.d.ts

@@ -9,7 +9,7 @@ import { SkeletonImage } from "./Image.js";
 import { SkeletonInput } from "./Input.js";
 import { SkeletonNode } from "./Node.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue275 from "vue";
+import * as vue282 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/skeleton/Skeleton.d.ts
@@ -30,9 +30,9 @@ interface SkeletonProps extends ComponentBaseProps {
 interface SkeletonSlots {
   default?: () => any;
 }
-declare const Skeleton: vue275.DefineSetupFnComponent<SkeletonProps, EmptyEmit, SlotsType<SkeletonSlots>, SkeletonProps & {
+declare const Skeleton: vue282.DefineSetupFnComponent<SkeletonProps, EmptyEmit, SlotsType<SkeletonSlots>, SkeletonProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue275.PublicProps>;
+}, vue282.PublicProps>;
 type SkeletonType = typeof Skeleton & {
   Button: typeof SkeletonButton;
   Avatar: typeof SkeletonAvatar;

package/dist/skeleton/Skeleton.js

@@ -109,43 +109,53 @@ const Skeleton = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 	props: /* @__PURE__ */ mergeDefaults({
 		active: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		loading: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		avatar: {
 			type: [Object, Boolean],
-			required: false
+			required: false,
+			default: void 0
 		},
 		title: {
 			type: [Object, Boolean],
-			required: false
+			required: false,
+			default: void 0
 		},
 		paragraph: {
 			type: [Object, Boolean],
-			required: false
+			required: false,
+			default: void 0
 		},
 		round: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		classes: {
 			type: [Object, Function],
-			required: false
+			required: false,
+			default: void 0
 		},
 		styles: {
 			type: [Object, Function],
-			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
 		}
 	}, {
 		avatar: false,

package/dist/skeleton/Title.js

@@ -15,19 +15,23 @@ const Title = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 	props: {
 		prefixCls: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		rootClass: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		style: {
 			type: Object,
-			required: false
+			required: false,
+			default: void 0
 		},
 		width: {
 			type: [Number, String],
-			required: false
+			required: false,
+			default: void 0
 		}
 	},
 	name: "ASkeletonTitle",