@zboson/ui 0.0.0-stage → 0.0.2

package/dist/breadcrumb/style/index.js

@@ -0,0 +1,86 @@
+import { genFocusStyle, resetComponent } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { unit } from "@zboson/cssinjs";
+//#region src/breadcrumb/style/index.ts
+const genBreadcrumbStyle = (token) => {
+	const { componentCls, iconCls, calc } = token;
+	return { [componentCls]: {
+		...resetComponent(token),
+		color: token.itemColor,
+		fontSize: token.fontSize,
+		[iconCls]: { fontSize: token.iconFontSize },
+		ol: {
+			display: "flex",
+			flexWrap: "wrap",
+			margin: 0,
+			padding: 0,
+			listStyle: "none"
+		},
+		[`${componentCls}-item a`]: {
+			color: token.linkColor,
+			transition: `color ${token.motionDurationMid}`,
+			padding: `0 ${unit(token.paddingXXS)}`,
+			borderRadius: token.borderRadiusSM,
+			height: token.fontHeight,
+			display: "inline-block",
+			marginInline: calc(token.marginXXS).mul(-1).equal(),
+			"&:hover": {
+				color: token.linkHoverColor,
+				backgroundColor: token.colorBgTextHover
+			},
+			...genFocusStyle(token)
+		},
+		[`${componentCls}-item:last-child`]: { color: token.lastItemColor },
+		[`${componentCls}-separator`]: {
+			marginInline: token.separatorMargin,
+			color: token.separatorColor
+		},
+		[`${componentCls}-link`]: {
+			"> svg": {
+				display: "inline-block",
+				verticalAlign: "middle",
+				marginBlockEnd: "0.2em"
+			},
+			[`
+          > ${iconCls} + span,
+          > ${iconCls} + a,
+          > svg + span,
+          > svg + a
+        `]: { marginInlineStart: token.marginXXS }
+		},
+		[`${componentCls}-overlay-link`]: {
+			borderRadius: token.borderRadiusSM,
+			height: token.fontHeight,
+			display: "inline-block",
+			padding: `0 ${unit(token.paddingXXS)}`,
+			marginInline: calc(token.marginXXS).mul(-1).equal(),
+			[`> ${iconCls}`]: {
+				marginInlineStart: token.marginXXS,
+				fontSize: token.fontSizeIcon
+			},
+			"&:hover": {
+				color: token.linkHoverColor,
+				backgroundColor: token.colorBgTextHover,
+				a: { color: token.linkHoverColor }
+			},
+			a: { "&:hover": { backgroundColor: "transparent" } }
+		},
+		[`&${token.componentCls}-rtl`]: { direction: "rtl" }
+	} };
+};
+const prepareComponentToken = (token) => ({
+	itemColor: token.colorTextDescription,
+	lastItemColor: token.colorText,
+	iconFontSize: token.fontSize,
+	linkColor: token.colorTextDescription,
+	linkHoverColor: token.colorText,
+	separatorColor: token.colorTextDescription,
+	separatorMargin: token.marginXS
+});
+var style_default = genStyleHooks("Breadcrumb", (token) => {
+	const breadcrumbToken = mergeToken(token, {});
+	return genBreadcrumbStyle(breadcrumbToken);
+}, prepareComponentToken);
+//#endregion
+export { style_default as default, prepareComponentToken };

package/dist/breadcrumb/useItemRender.d.ts

@@ -0,0 +1,10 @@
+import { VueNode } from "../_util/type.js";
+import { BreadcrumbProps, ItemType } from "./Breadcrumb.js";
+//#region src/breadcrumb/useItemRender.d.ts
+type AddParameters<TFunction extends (...args: any) => any, TParameters extends [...args: any]> = (...args: [...Parameters<TFunction>, ...TParameters]) => ReturnType<TFunction>;
+type ItemRender = NonNullable<BreadcrumbProps['itemRender']>;
+type InternalItemRenderParams = AddParameters<ItemRender, [href?: string, index?: number]>;
+declare function renderItem(prefixCls: string, item: ItemType, children: VueNode, href?: string): import("vue/jsx-runtime").JSX.Element | null;
+declare function useItemRender(prefixCls: string, itemRender?: ItemRender, titleRender?: BreadcrumbProps['titleRender']): InternalItemRenderParams;
+//#endregion
+export { useItemRender as default, renderItem };

package/dist/breadcrumb/useItemRender.js

@@ -0,0 +1,39 @@
+import { getSlotPropsFnRun } from "../_util/tools.js";
+import { checkRenderNode } from "../_util/vueNode.js";
+import { createVNode, mergeProps } from "vue";
+import { clsx } from "@v-c/util";
+import pickAttrs from "@v-c/util/dist/pickAttrs";
+//#region src/breadcrumb/useItemRender.tsx
+function getBreadcrumbName(route, params, titleRender, index) {
+	const title = getSlotPropsFnRun({}, { title: route.title }, "title");
+	const _renderTitle = checkRenderNode(titleRender?.({
+		item: route,
+		index
+	}));
+	const _title = _renderTitle !== void 0 ? _renderTitle : title;
+	if (_title === void 0 || _title === null) return null;
+	const paramsKeys = Object.keys(params).join("|");
+	return typeof _title === "object" ? _title : String(_title).replace(new RegExp(`:(${paramsKeys})`, "g"), (replacement, key) => params[key] || replacement);
+}
+function renderItem(prefixCls, item, children, href) {
+	if (children === null || children === void 0) return null;
+	const { class: className, ...restItem } = item;
+	const passedProps = { ...pickAttrs(restItem, {
+		data: true,
+		aria: true
+	}) };
+	if (href !== void 0) return createVNode("a", mergeProps(passedProps, {
+		"class": clsx(`${prefixCls}-link`, className),
+		"href": href
+	}), [children]);
+	return createVNode("span", mergeProps(passedProps, { "class": clsx(`${prefixCls}-link`, className) }), [children]);
+}
+function useItemRender(prefixCls, itemRender, titleRender) {
+	const mergedItemRender = (item, params, routes, path, href, index) => {
+		if (itemRender) return itemRender(item, params, routes, path);
+		return renderItem(prefixCls, item, getBreadcrumbName(item, params, titleRender, index), href);
+	};
+	return mergedItemRender;
+}
+//#endregion
+export { useItemRender as default, renderItem };

package/dist/button/Button.d.ts

@@ -0,0 +1,71 @@
+import { RenderNodeFn, VueNode } from "../_util/type.js";
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { SizeType } from "../config-provider/SizeContext.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import { ButtonColorType, ButtonHTMLType, ButtonShape, ButtonType, ButtonVariantType } from "./buttonHelper.js";
+import { CSSProperties, SlotsType } from "vue";
+//#region src/button/Button.d.ts
+type LegacyButtonType = ButtonType | 'danger';
+type ButtonSemanticName = keyof ButtonSemanticClassNames & keyof ButtonSemanticStyles;
+interface ButtonSemanticClassNames {
+  root?: string;
+  icon?: string;
+  content?: string;
+}
+interface ButtonSemanticStyles {
+  root?: CSSProperties;
+  icon?: CSSProperties;
+  content?: CSSProperties;
+}
+type ButtonClassNamesType = SemanticClassNamesType<BaseButtonProps, ButtonSemanticClassNames>;
+type ButtonStylesType = SemanticStylesType<BaseButtonProps, ButtonSemanticStyles>;
+interface BaseButtonProps extends ComponentBaseProps {
+  type?: ButtonType;
+  color?: ButtonColorType;
+  variant?: ButtonVariantType;
+  icon?: VueNode;
+  iconPlacement?: 'start' | 'end';
+  shape?: ButtonShape;
+  size?: SizeType;
+  disabled?: boolean;
+  loading?: boolean | {
+    delay?: number;
+    icon?: RenderNodeFn;
+  };
+  ghost?: boolean;
+  danger?: boolean;
+  block?: boolean;
+  [key: `data-${string}`]: string;
+  classes?: ButtonClassNamesType;
+  styles?: ButtonStylesType;
+  autoFocus?: boolean;
+  /** @private Only for internal usage. Do not use in your production */
+  _skipSemantic?: boolean;
+}
+declare function convertLegacyProps(type?: LegacyButtonType): Pick<BaseButtonProps, 'danger' | 'type'>;
+interface ButtonEmitsProps {
+  onClick?: ButtonEmits['click'];
+}
+interface ButtonProps extends BaseButtonProps, ButtonEmitsProps {
+  href?: string;
+  htmlType?: ButtonHTMLType;
+  target?: '_self' | '_blank' | '_parent' | '_top' | string;
+  autoInsertSpace?: boolean;
+}
+interface ButtonEmits {
+  click: (e: MouseEvent) => void;
+}
+interface ButtonSlots {
+  default?: () => any;
+  icon?: () => any;
+  loadingIcon?: () => any;
+}
+declare const InternalCompoundedButton: import("vue").DefineSetupFnComponent<ButtonProps, ButtonEmits, SlotsType<ButtonSlots>, ButtonProps, import("vue").PublicProps>;
+type CompoundedComponent = typeof InternalCompoundedButton & {
+  /** @internal */
+  __ANT_BUTTON: boolean;
+};
+declare const Button: CompoundedComponent;
+//#endregion
+export { BaseButtonProps, ButtonClassNamesType, ButtonEmits, ButtonEmitsProps, ButtonProps, ButtonSemanticClassNames, ButtonSemanticName, ButtonSemanticStyles, ButtonSlots, ButtonStylesType, LegacyButtonType, convertLegacyProps, Button as default };

package/dist/button/Button.js

@@ -0,0 +1,366 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { useSize } from "../config-provider/hooks/useSize.js";
+import { useCompactItemContext } from "../space/Compact.js";
+import { useMergeSemantic, useSemanticRootStyle, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { getSlotPropsFnRun, toPropsRefs as toPropsRefs$1 } from "../_util/tools.js";
+import { useDisabledContext } from "../config-provider/DisabledContext.js";
+import wave_default from "../_util/wave/index.js";
+import { isTwoCNChar, isUnBorderedButtonVariant, spaceChildren } from "./buttonHelper.js";
+import IconWrapper from "./IconWrapper.js";
+import DefaultLoadingIcon from "./DefaultLoadingIcon.js";
+import style_default from "./style/index.js";
+import compact_default from "./style/compact.js";
+import { computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue";
+import { classNames } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+import { omit } from "es-toolkit";
+import { toArray } from "es-toolkit/compat";
+import useDelayState from "@v-c/util/dist/hooks/useDelayState";
+//#region src/button/Button.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+function convertLegacyProps(type) {
+	if (type === "danger") return { danger: true };
+	if (type) return { type };
+	return {};
+}
+function getLoadingConfig(loading) {
+	if (typeof loading === "object" && loading) {
+		let delay = loading?.delay;
+		delay = !Number.isNaN(delay) && typeof delay === "number" ? delay : 0;
+		return {
+			loading: delay <= 0,
+			delay
+		};
+	}
+	return {
+		loading: !!loading,
+		delay: 0
+	};
+}
+const ButtonTypeMap = {
+	default: ["default", "outlined"],
+	primary: ["primary", "solid"],
+	dashed: ["default", "dashed"],
+	link: ["link", "link"],
+	text: ["default", "text"]
+};
+const InternalCompoundedButton = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) => {
+	const mergedType = computed(() => props.type || "default");
+	const { prefixCls, direction, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, loadingIcon: contextLoadingIcon, shape: contextShape, color: contextColor, variant: contextVariant, autoInsertSpace: contextAutoInsertSpace } = useComponentBaseConfig("button", props, [
+		"autoInsertSpace",
+		"variant",
+		"shape",
+		"color",
+		"loadingIcon"
+	], "btn");
+	const { classes, styles } = toPropsRefs$1(props, "classes", "styles");
+	const mergedShape = computed(() => props.shape || contextShape.value || "default");
+	const parsedColorVariant = computed(() => {
+		const { color, variant, type, danger } = props;
+		if (color && variant) return [color, variant];
+		if (type || danger) {
+			const colorVariantPair = ButtonTypeMap[mergedType.value] || [];
+			if (danger) return ["danger", colorVariantPair[1]];
+			return colorVariantPair;
+		}
+		if (variant === "solid") return ["primary", variant];
+		if (contextColor?.value && contextVariant?.value) return [contextColor.value, contextVariant.value];
+		if (contextVariant?.value === "solid") return ["primary", contextVariant.value];
+		return ["default", "outlined"];
+	});
+	const mergedColorVariant = computed(() => {
+		const [parsedColor, parsedVariant] = parsedColorVariant.value;
+		if (props.ghost && parsedVariant === "solid") return [parsedColor, "outlined"];
+		return [parsedColor, parsedVariant];
+	});
+	const mergedColor = computed(() => mergedColorVariant.value[0]);
+	const mergedVariant = computed(() => mergedColorVariant.value[1]);
+	const isDanger = computed(() => mergedColor.value === "danger");
+	const mergedColorText = computed(() => isDanger.value ? "dangerous" : mergedColor.value);
+	const mergedInsertSpace = computed(() => {
+		return props?.autoInsertSpace ?? contextAutoInsertSpace?.value ?? true;
+	});
+	const [hashId, cssVarCls] = style_default(prefixCls);
+	const disabled = useDisabledContext();
+	const mergedDisabled = computed(() => {
+		return props?.disabled ?? disabled.value;
+	});
+	const loadingOrDelay = computed(() => {
+		return getLoadingConfig(props.loading);
+	});
+	const [innerLoading, setInnerLoading] = useDelayState(loadingOrDelay.value.loading);
+	const hasTwoCNChar = shallowRef(false);
+	const buttonRef = shallowRef();
+	const isMountRef = shallowRef(true);
+	onMounted(() => {
+		isMountRef.value = false;
+		if (props.autoFocus && buttonRef.value) buttonRef.value?.focus?.();
+	});
+	onBeforeUnmount(() => {
+		isMountRef.value = true;
+	});
+	watch([() => loadingOrDelay.value.delay, () => loadingOrDelay.value.loading], () => {
+		if (loadingOrDelay.value.delay > 0) setInnerLoading(true, { ms: loadingOrDelay.value.delay });
+		else setInnerLoading(loadingOrDelay.value.loading, true);
+	}, {
+		flush: "sync",
+		immediate: true
+	});
+	watch([
+		mergedInsertSpace,
+		buttonRef,
+		mergedVariant
+	], async () => {
+		await nextTick();
+		if (!buttonRef.value || !mergedInsertSpace.value) return;
+		const buttonText = buttonRef.value.textContent || "";
+		const children = filterEmpty(slots?.default?.());
+		const iconChildren = toArray(getSlotPropsFnRun(slots, props, "icon"));
+		if (children.length === 1 && iconChildren.length === 0 && !isUnBorderedButtonVariant(mergedVariant.value) && isTwoCNChar(buttonText.trim())) {
+			if (!hasTwoCNChar.value) hasTwoCNChar.value = true;
+		} else if (hasTwoCNChar.value) hasTwoCNChar.value = false;
+	}, { immediate: true });
+	const handleClick = (e) => {
+		if (innerLoading.value || mergedDisabled.value) {
+			e.preventDefault();
+			return;
+		}
+		emit("click", e);
+	};
+	const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
+	const sizeClassNameMap = {
+		large: "lg",
+		small: "sm",
+		middle: void 0,
+		medium: void 0
+	};
+	const sizeFullName = useSize((ctxSize) => props?.size ?? compactSize.value ?? ctxSize);
+	const mergedIconPlacement = computed(() => props?.iconPlacement ?? "start");
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			type: mergedType.value,
+			color: mergedColor.value,
+			variant: mergedVariant.value,
+			danger: isDanger.value,
+			shape: mergedShape.value,
+			size: sizeFullName.value,
+			disabled: mergedDisabled.value,
+			loading: innerLoading.value,
+			iconPlacement: mergedIconPlacement.value
+		};
+	});
+	const contextStyleRoot = useSemanticRootStyle(contextStyle);
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(...props._skipSemantic ? [ref(), classes] : [contextClassNames, classes]), useToArr(...props._skipSemantic ? [ref(), styles] : [
+		contextStyles,
+		contextStyleRoot,
+		styles
+	]), useToProps(mergedProps));
+	return () => {
+		const { loading } = props;
+		const sizeCls = sizeFullName.value ? sizeClassNameMap?.[sizeFullName.value] ?? "" : "";
+		const iconChildren = getSlotPropsFnRun(slots, props, "icon");
+		const hasIcon = !!iconChildren;
+		const iconType = innerLoading.value ? "loading" : hasIcon;
+		const children = filterEmpty(slots?.default?.());
+		const needInserted = children.length === 1 && !hasIcon && !isUnBorderedButtonVariant(mergedVariant.value);
+		const kids = children.length ? spaceChildren(children, needInserted && mergedInsertSpace.value, mergedStyles.value.content, mergedClassNames.value.content) : null;
+		const cls = classNames(prefixCls.value, hashId.value, cssVarCls.value, {
+			[`${prefixCls.value}-${mergedShape.value}`]: mergedShape.value !== "default" && mergedShape.value,
+			[`${prefixCls.value}-${mergedType.value}`]: mergedType.value,
+			[`${prefixCls.value}-dangerous`]: props.danger,
+			[`${prefixCls.value}-color-${mergedColorText.value}`]: mergedColorText.value,
+			[`${prefixCls.value}-variant-${mergedVariant.value}`]: mergedVariant.value,
+			[`${prefixCls.value}-${sizeCls}`]: sizeCls,
+			[`${prefixCls.value}-icon-only`]: !children.length && !!iconType,
+			[`${prefixCls.value}-background-ghost`]: props.ghost && !isUnBorderedButtonVariant(mergedVariant.value),
+			[`${prefixCls.value}-loading`]: innerLoading.value,
+			[`${prefixCls.value}-two-chinese-chars`]: hasTwoCNChar.value && mergedInsertSpace.value && !innerLoading.value,
+			[`${prefixCls.value}-block`]: props.block,
+			[`${prefixCls.value}-rtl`]: direction.value === "rtl",
+			[`${prefixCls.value}-icon-end`]: mergedIconPlacement.value === "end"
+		}, compactItemClassnames.value, attrs.class, props.rootClass, contextClassName.value, mergedClassNames.value.root);
+		const fullStyle = [mergedStyles.value.root, attrs.style];
+		const iconSharedProps = {
+			class: mergedClassNames.value.icon,
+			style: mergedStyles.value.icon
+		};
+		/**
+		* Extract icon node.
+		* If there is a custom icon and not in loading state: show custom icon
+		*/
+		const iconWrapperElement = (child) => createVNode(IconWrapper, mergeProps({ "prefixCls": prefixCls.value }, iconSharedProps), _isSlot(child) ? child : { default: () => [child] });
+		const defaultLoadingIconElement = createVNode(DefaultLoadingIcon, mergeProps({
+			"existIcon": hasIcon,
+			"prefixCls": prefixCls.value,
+			"loading": innerLoading.value,
+			"mount": isMountRef.value
+		}, iconSharedProps), null);
+		const slotLoadingIcon = getSlotPropsFnRun(slots, {}, "loadingIcon");
+		const propLoadingIcon = loading && typeof loading === "object" && loading.icon ? typeof loading.icon === "function" ? loading.icon() : loading.icon : null;
+		const contextLoadingIconNode = getSlotPropsFnRun({}, { loadingIcon: contextLoadingIcon.value }, "loadingIcon");
+		const mergedLoadingIcon = slotLoadingIcon || propLoadingIcon || contextLoadingIconNode;
+		/**
+		* Using if-else statements can improve code readability without affecting future expansion.
+		*/
+		let iconNode;
+		if (hasIcon && !innerLoading.value) iconNode = iconWrapperElement(iconChildren);
+		else if (innerLoading.value && mergedLoadingIcon) iconNode = iconWrapperElement(mergedLoadingIcon);
+		else iconNode = defaultLoadingIconElement;
+		const mergedHref = props.href;
+		const htmlType = props.htmlType ?? "button";
+		if (mergedHref !== void 0) return createVNode("a", mergeProps(omit(attrs, ["class", "style"]), {
+			"ref": buttonRef,
+			"class": [cls, { [`${prefixCls.value}-disabled`]: mergedDisabled.value }],
+			"style": fullStyle,
+			"href": mergedDisabled.value ? void 0 : mergedHref,
+			"onClick": handleClick,
+			"target": props.target,
+			"aria-disabled": mergedDisabled.value
+		}), [iconNode, kids]);
+		let buttonNodes = createVNode("button", mergeProps(omit(attrs, ["class", "style"]), {
+			"ref": buttonRef,
+			"type": htmlType,
+			"class": cls,
+			"style": fullStyle,
+			"onClick": handleClick,
+			"disabled": mergedDisabled.value
+		}), [
+			iconNode,
+			kids,
+			compactItemClassnames.value ? createVNode(compact_default, { "prefixCls": prefixCls.value }, null) : null
+		]);
+		if (!isUnBorderedButtonVariant(mergedVariant.value)) {
+			const _buttonNodes = function() {
+				return buttonNodes;
+			}();
+			buttonNodes = createVNode(wave_default, {
+				"component": "Button",
+				"disabled": innerLoading.value
+			}, _isSlot(buttonNodes) ? buttonNodes : { default: () => [_buttonNodes] });
+		}
+		return buttonNodes;
+	};
+}, {
+	props: /*@__PURE__*/ mergeDefaults({
+		href: {
+			type: String,
+			required: false
+		},
+		htmlType: {
+			type: String,
+			required: false
+		},
+		target: {
+			type: String,
+			required: false
+		},
+		autoInsertSpace: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		color: { required: false },
+		variant: {
+			type: String,
+			required: false
+		},
+		icon: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		iconPlacement: {
+			type: String,
+			required: false
+		},
+		shape: {
+			type: String,
+			required: false
+		},
+		size: {
+			type: [String, null],
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		loading: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		ghost: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		danger: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		block: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		autoFocus: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		_skipSemantic: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	}, {
+		iconPlacement: "start",
+		htmlType: "button",
+		autoInsertSpace: void 0,
+		disabled: void 0,
+		size: void 0
+	}),
+	emits: ["click"],
+	name: "AButton",
+	inheritAttrs: false
+});
+const Button = InternalCompoundedButton;
+Button.__ANT_BUTTON = true;
+Button.install = (app) => {
+	app.component(InternalCompoundedButton.name, Button);
+};
+//#endregion
+export { convertLegacyProps, Button as default };

package/dist/button/DefaultLoadingIcon.d.ts

@@ -0,0 +1,10 @@
+//#region src/button/DefaultLoadingIcon.d.ts
+interface DefaultLoadingIconProps {
+  prefixCls: string;
+  existIcon: boolean;
+  loading?: boolean | object;
+  mount: boolean;
+}
+declare const DefaultLoadingIcon: import("vue").DefineSetupFnComponent<DefaultLoadingIconProps, {}, {}, DefaultLoadingIconProps & {}, import("vue").PublicProps>;
+//#endregion
+export { DefaultLoadingIconProps, DefaultLoadingIcon as default };

package/dist/button/DefaultLoadingIcon.js

@@ -0,0 +1,101 @@
+import IconWrapper from "./IconWrapper.js";
+import { Transition, createVNode, defineComponent, mergeProps } from "vue";
+import { classNames } from "@v-c/util";
+import { LoadingOutlined } from "@zboson/icons";
+import { getTransitionProps } from "@v-c/util/dist/utils/transition";
+//#region src/button/DefaultLoadingIcon.tsx
+const InnerLoadingIcon = /* @__PURE__ */ defineComponent((props) => {
+	return () => {
+		const { prefixCls, iconClassName } = props;
+		return createVNode(IconWrapper, {
+			"prefixCls": prefixCls,
+			"class": classNames(`${prefixCls}-loading-icon`)
+		}, { default: () => [createVNode(LoadingOutlined, { "class": iconClassName }, null)] });
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		iconClassName: {
+			type: String,
+			required: false
+		}
+	},
+	name: "InnerLoadingIcon"
+});
+const DefaultLoadingIcon = /* @__PURE__ */ defineComponent((props, { attrs }) => {
+	const scheduleMotionFrame = (cb) => {
+		if (typeof requestAnimationFrame === "function") requestAnimationFrame(cb);
+		else setTimeout(cb, 0);
+	};
+	function resetStyle(el) {
+		const element = el;
+		element.style.width = "";
+		element.style.opacity = "";
+		element.style.transform = "";
+	}
+	function onBeforeEnter(el) {
+		const element = el;
+		element.style.width = "0px";
+		element.style.opacity = "0";
+		element.style.transform = "scale(0)";
+	}
+	function onEnter(el) {
+		const element = el;
+		element.offsetWidth;
+		scheduleMotionFrame(() => {
+			element.style.width = `${element.scrollWidth}px`;
+			element.style.opacity = "1";
+			element.style.transform = "scale(1)";
+		});
+	}
+	function onBeforeLeave(el) {
+		const element = el;
+		element.style.width = `${element.scrollWidth}px`;
+		element.style.opacity = "1";
+		element.style.transform = "scale(1)";
+	}
+	function onLeave(el) {
+		const element = el;
+		element.offsetWidth;
+		scheduleMotionFrame(() => {
+			element.style.width = "0px";
+			element.style.opacity = "0";
+			element.style.transform = "scale(0)";
+		});
+	}
+	return () => {
+		const { prefixCls, loading, existIcon, mount } = props;
+		const visible = !!loading;
+		if (existIcon) return createVNode(InnerLoadingIcon, mergeProps({ "prefixCls": prefixCls }, attrs), null);
+		return createVNode(Transition, mergeProps(getTransitionProps(`${prefixCls}-loading-icon-motion`, { appear: !mount }), {
+			"onBeforeEnter": onBeforeEnter,
+			"onEnter": onEnter,
+			"onAfterEnter": resetStyle,
+			"onBeforeLeave": onBeforeLeave,
+			"onLeave": onLeave
+		}), { default: () => [visible ? createVNode(InnerLoadingIcon, mergeProps({ "prefixCls": prefixCls }, attrs), null) : null] });
+	};
+}, { props: {
+	prefixCls: {
+		type: String,
+		required: true
+	},
+	existIcon: {
+		type: Boolean,
+		required: true
+	},
+	loading: {
+		type: [Boolean, Object],
+		required: false,
+		default: void 0
+	},
+	mount: {
+		type: Boolean,
+		required: true
+	}
+} });
+//#endregion
+export { DefaultLoadingIcon as default };