antdv-next 0.0.111 → 1.0.0-alpha.2

package/dist/app/App.d.ts

@@ -0,0 +1,11 @@
+import { ComponentBaseProps } from "../config-provider/context.js";
+import { AppConfig } from "./context.js";
+import * as vue225 from "vue";
+
+//#region src/app/App.d.ts
+interface AppProps extends ComponentBaseProps, AppConfig {
+  component?: any;
+}
+declare const App$1: vue225.DefineSetupFnComponent<AppProps, {}, {}, AppProps & {}, vue225.PublicProps>;
+//#endregion
+export { App$1 as App, AppProps };

package/dist/app/App.js

@@ -0,0 +1,88 @@
+import { useBaseConfig } from "../config-provider/context.js";
+import { devUseWarning } from "../_util/warning.js";
+import { AppConfigProvider, useAppConfig, useAppContextProvider } from "./context.js";
+import useMessage from "../message/useMessage.js";
+import "../message/index.js";
+import useModal from "../modal/useModal/index.js";
+import "../modal/index.js";
+import useNotification from "../notification/useNotification.js";
+import "../notification/index.js";
+import style_default from "./style/index.js";
+import { Fragment, computed, createVNode, defineComponent } from "vue";
+import { clsx } from "@v-c/util";
+import { getAttrStyleAndClass } from "@v-c/util/dist/props-util";
+
+//#region src/app/App.tsx
+const App$1 = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const { prefixCls, direction } = useBaseConfig("app", props);
+	const [hashId, cssVarCls] = style_default(prefixCls);
+	const appConfig = useAppConfig();
+	const mergedAppConfig = computed(() => {
+		return {
+			message: {
+				...appConfig.message,
+				...props?.message
+			},
+			notification: {
+				...appConfig.notification,
+				...props?.notification
+			}
+		};
+	});
+	const [messageApi, MessageContextHolder] = useMessage(computed(() => mergedAppConfig?.value?.message));
+	const [notificationApi, NotificationContextHolder] = useNotification(computed(() => mergedAppConfig?.value?.notification));
+	const [ModalApi, ModalContextHolder] = useModal();
+	useAppContextProvider({
+		message: messageApi,
+		notification: notificationApi,
+		modal: ModalApi
+	});
+	return () => {
+		const { rootClass } = props;
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const customClassName = clsx(hashId.value, prefixCls.value, className, rootClass, cssVarCls.value, { [`${prefixCls.value}-rtl`]: direction.value === "rtl" });
+		const { component = "div" } = props;
+		devUseWarning("App")(!(cssVarCls.value && component === false), "usage", "When using cssVar, ensure `component` is assigned a valid React component string.");
+		const Component$1 = component === false ? Fragment : component;
+		const rootProps = {
+			...restAttrs,
+			class: customClassName,
+			style
+		};
+		return createVNode(AppConfigProvider, mergedAppConfig.value, { default: () => [createVNode(Component$1, component === false ? void 0 : rootProps, { default: () => [
+			createVNode(MessageContextHolder, null, null),
+			createVNode(NotificationContextHolder, null, null),
+			createVNode(ModalContextHolder, null, null),
+			slots?.default?.()
+		] })] });
+	};
+}, {
+	props: {
+		component: { required: false },
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		message: {
+			type: Object,
+			required: false
+		},
+		notification: {
+			type: Object,
+			required: false
+		}
+	},
+	name: "AApp",
+	inheritAttrs: false
+});
+App$1.install = (app) => {
+	app.component(App$1.name, App$1);
+};
+var App_default = App$1;
+
+//#endregion
+export { App_default as default };

package/dist/app/context.d.ts

@@ -0,0 +1,18 @@
+import { NotificationConfig, NotificationInstance } from "../notification/interface.js";
+import { ConfigOptions, MessageInstance } from "../message/interface.js";
+import { HookAPI } from "../modal/useModal/types.js";
+import "../modal/useModal/index.js";
+import "vue";
+
+//#region src/app/context.d.ts
+interface AppConfig {
+  message?: ConfigOptions;
+  notification?: NotificationConfig;
+}
+interface useAppProps {
+  message: MessageInstance;
+  notification: NotificationInstance;
+  modal: HookAPI;
+}
+//#endregion
+export { AppConfig, useAppProps };

package/dist/app/context.js

@@ -0,0 +1,30 @@
+import { defineComponent, inject, provide } from "vue";
+
+//#region src/app/context.ts
+const AppConfigContextKey = Symbol("AppConfigContext");
+const AppConfigProvider = defineComponent((props, { slots }) => {
+	provide(AppConfigContextKey, props);
+	return () => {
+		return slots?.default?.();
+	};
+}, {
+	props: ["message", "notification"],
+	inheritAttrs: false
+});
+function useAppConfig() {
+	return inject(AppConfigContextKey, {});
+}
+const AppContextKey = Symbol("AppContext");
+function useAppContext() {
+	return inject(AppContextKey, {
+		message: {},
+		notification: {},
+		modal: {}
+	});
+}
+function useAppContextProvider(value) {
+	provide(AppContextKey, value);
+}
+
+//#endregion
+export { AppConfigProvider, useAppConfig, useAppContext, useAppContextProvider };

package/dist/app/index.d.ts

@@ -0,0 +1,9 @@
+import { App, AppProps } from "./App.js";
+import { useApp } from "./useApp.js";
+
+//#region src/app/index.d.ts
+declare const _default: typeof App & {
+  useApp: typeof useApp;
+};
+//#endregion
+export { _default };

package/dist/app/index.js

@@ -0,0 +1,13 @@
+import App_default from "./App.js";
+import useApp_default from "./useApp.js";
+
+//#region src/app/index.tsx
+const App = App_default;
+App.install = (app) => {
+	app.component(App.name, App);
+};
+App.useApp = useApp_default;
+var app_default = App;
+
+//#endregion
+export { app_default as default };

package/dist/app/style/index.d.ts

@@ -0,0 +1,7 @@
+import "../../theme/internal.js";
+import "vue";
+
+//#region src/app/style/index.d.ts
+interface ComponentToken {}
+//#endregion
+export { ComponentToken };

package/dist/app/style/index.js

@@ -0,0 +1,19 @@
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import "../../theme/internal.js";
+
+//#region src/app/style/index.ts
+const genBaseStyle = (token) => {
+	const { componentCls, colorText, fontSize, lineHeight, fontFamily } = token;
+	return { [componentCls]: {
+		color: colorText,
+		fontSize,
+		lineHeight,
+		fontFamily,
+		[`&${componentCls}-rtl`]: { direction: "rtl" }
+	} };
+};
+const prepareComponentToken = () => ({});
+var style_default = genStyleHooks("App", genBaseStyle, prepareComponentToken);
+
+//#endregion
+export { style_default as default };

package/dist/app/useApp.d.ts

@@ -0,0 +1,6 @@
+import { useAppProps } from "./context.js";
+
+//#region src/app/useApp.d.ts
+declare const useApp: () => useAppProps;
+//#endregion
+export { useApp };

package/dist/app/useApp.js

@@ -0,0 +1,8 @@
+import { useAppContext } from "./context.js";
+
+//#region src/app/useApp.ts
+const useApp = () => useAppContext();
+var useApp_default = useApp;
+
+//#endregion
+export { useApp_default as default };

package/dist/avatar/Avatar.d.ts

@@ -0,0 +1,41 @@
+import { VueNode } from "../_util/type.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import { AvatarSize } from "./AvatarContext.js";
+import * as vue233 from "vue";
+import { SlotsType } from "vue";
+
+//#region src/avatar/Avatar.d.ts
+interface AvatarProps extends ComponentBaseProps {
+  /** Shape of avatar, options: `circle`, `square` */
+  shape?: 'circle' | 'square';
+  /**
+   * Size of avatar, options: `large`, `small`, `default`
+   * or a custom number size
+   */
+  size?: AvatarSize;
+  gap?: number;
+  /** Src of image avatar */
+  src?: VueNode;
+  /** Srcset of image avatar */
+  srcSet?: string;
+  draggable?: boolean | 'true' | 'false';
+  /** Icon to be used in avatar */
+  icon?: VueNode;
+  alt?: string;
+  crossOrigin?: '' | 'anonymous' | 'use-credentials';
+  onError?: () => boolean;
+}
+interface AvatarEmits {
+  click: (e: MouseEvent) => void;
+  [key: string]: (...args: any[]) => any;
+}
+interface AvatarSlots {
+  icon: () => any;
+  src: () => any;
+  default: () => any;
+}
+declare const Avatar: vue233.DefineSetupFnComponent<AvatarProps, AvatarEmits, SlotsType<AvatarSlots>, AvatarProps & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue233.PublicProps>;
+//#endregion
+export { Avatar, AvatarEmits, AvatarProps, AvatarSlots };

package/dist/avatar/Avatar.js

@@ -0,0 +1,211 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass as getAttrStyleAndClass$1 } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { getSlotPropsFnRun } from "../_util/tools.js";
+import useCSSVarCls_default from "../config-provider/hooks/useCSSVarCls.js";
+import { useSize } from "../config-provider/hooks/useSize.js";
+import { responsiveArray } from "../_util/responsiveObserver.js";
+import useBreakpoint_default from "../grid/hooks/useBreakpoint.js";
+import { useAvatarContext } from "./AvatarContext.js";
+import style_default from "./style/index.js";
+import { computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, nextTick, onMounted, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+import ResizeObserver from "@v-c/resize-observer";
+
+//#region src/avatar/Avatar.tsx
+const Avatar = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const scale = shallowRef(1);
+	const mounted = shallowRef(false);
+	const isImgExist = shallowRef(true);
+	const avatarNodeRef = shallowRef();
+	const avatarChildrenRef = shallowRef();
+	const { class: contextClassName, style: contextStyle, prefixCls } = useComponentBaseConfig("avatar", props);
+	const avatarCtx = useAvatarContext();
+	const setScaleParam = () => {
+		if (!avatarChildrenRef.value || !avatarNodeRef.value) return;
+		const childrenWidth = avatarChildrenRef.value.offsetWidth;
+		const nodeWidth = avatarNodeRef.value.offsetWidth;
+		const gap = props.gap;
+		if (childrenWidth !== 0 && nodeWidth !== 0) {
+			if (gap * 2 < nodeWidth) scale.value = nodeWidth - gap * 2 < childrenWidth ? (nodeWidth - gap * 2) / childrenWidth : 1;
+		}
+	};
+	onMounted(() => {
+		mounted.value = true;
+	});
+	watch(() => props.gap, async () => {
+		await nextTick();
+		setScaleParam();
+	}, { immediate: true });
+	const handleImgLoadError = () => {
+		if (props.onError?.() !== false) isImgExist.value = false;
+	};
+	const size = useSize((ctxSize) => props?.size ?? avatarCtx.value?.size ?? ctxSize ?? "default");
+	const screens = useBreakpoint_default(computed(() => {
+		return Object.keys(typeof size === "object" ? size || {} : {}).some((key) => [
+			"xs",
+			"sm",
+			"md",
+			"lg",
+			"xl",
+			"xxl"
+		].includes(key));
+	}));
+	const rootCls = useCSSVarCls_default(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	return () => {
+		const children = filterEmpty(slots?.default?.() ?? []);
+		const icon = getSlotPropsFnRun(slots, props, "icon");
+		const { shape, rootClass, draggable, srcSet, crossOrigin, alt } = props;
+		const responsiveSizeStyleFn = () => {
+			if (typeof size !== "object") return {};
+			const currentBreakpoint = responsiveArray.find((screen) => screens.value[screen]);
+			const currentSize = size.value[currentBreakpoint];
+			return currentSize ? {
+				width: `${currentSize}px`,
+				height: `${currentSize}px`,
+				fontSize: currentSize && (icon || children.length) ? `${currentSize / 2}px` : "18px"
+			} : {};
+		};
+		const responsiveSizeStyle = responsiveSizeStyleFn();
+		const sizeCls = clsx({
+			[`${prefixCls.value}-lg`]: size.value === "large",
+			[`${prefixCls.value}-sm`]: size.value === "small"
+		});
+		const src = getSlotPropsFnRun(slots, props, "src");
+		if (src) {
+			isImgExist.value = true;
+			scale.value = 1;
+		}
+		const hasImageElement = isVNode(src);
+		const mergedShape = shape || avatarCtx?.value?.shape || "circle";
+		const { className, style, restAttrs } = getAttrStyleAndClass$1(attrs);
+		const classString = clsx(prefixCls.value, sizeCls, contextClassName.value, `${prefixCls.value}-${mergedShape}`, {
+			[`${prefixCls.value}-image`]: hasImageElement || src && isImgExist.value,
+			[`${prefixCls.value}-icon`]: !!icon
+		}, cssVarCls.value, rootCls.value, className, rootClass, hashId.value);
+		const sizeStyle = typeof size === "number" ? {
+			width: `${size}px`,
+			height: `${size}px`,
+			fontSize: icon ? `${size / 2}px` : "18px"
+		} : {};
+		let childrenToRender;
+		if (typeof src === "string" && isImgExist.value) childrenToRender = createVNode("img", {
+			"src": src,
+			"draggable": draggable,
+			"srcset": srcSet,
+			"onError": handleImgLoadError,
+			"alt": alt,
+			"crossorigin": crossOrigin
+		}, null);
+		else if (hasImageElement) childrenToRender = src;
+		else if (icon) childrenToRender = icon;
+		else if (mounted.value || scale.value !== 1) {
+			const transformString = `scale(${scale.value})`;
+			const childrenStyle = {
+				msTransform: transformString,
+				WebkitTransform: transformString,
+				transform: transformString
+			};
+			childrenToRender = createVNode(ResizeObserver, { "onResize": setScaleParam }, { default: () => [createVNode("span", {
+				"class": `${prefixCls.value}-string`,
+				"ref": avatarChildrenRef,
+				"style": childrenStyle
+			}, [children])] });
+		} else childrenToRender = createVNode("span", {
+			"class": `${prefixCls.value}-string`,
+			"style": { opacity: 0 },
+			"ref": avatarChildrenRef
+		}, [children]);
+		return createVNode("span", mergeProps(restAttrs, {
+			"style": {
+				...sizeStyle,
+				...responsiveSizeStyle,
+				...contextStyle.value,
+				...style
+			},
+			"class": classString,
+			"ref": avatarNodeRef
+		}), [childrenToRender]);
+	};
+}, {
+	emits: ["click"],
+	props: /* @__PURE__ */ mergeDefaults({
+		shape: {
+			type: String,
+			required: false
+		},
+		size: {
+			type: [
+				String,
+				Number,
+				Object
+			],
+			required: false
+		},
+		gap: {
+			type: Number,
+			required: false
+		},
+		src: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		srcSet: {
+			type: String,
+			required: false
+		},
+		draggable: {
+			type: [Boolean, String],
+			required: false
+		},
+		icon: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		alt: {
+			type: String,
+			required: false
+		},
+		crossOrigin: {
+			type: String,
+			required: false
+		},
+		onError: {
+			type: Function,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	}, { gap: 4 }),
+	name: "AAvatar",
+	inheritAttrs: false
+});
+Avatar.install = (app) => {
+	app.component(Avatar.name, Avatar);
+};
+var Avatar_default = Avatar;
+
+//#endregion
+export { Avatar_default as default };

package/dist/avatar/AvatarContext.d.ts

@@ -0,0 +1,7 @@
+import { ScreenSizeMap } from "../_util/responsiveObserver.js";
+import { Ref } from "vue";
+
+//#region src/avatar/AvatarContext.d.ts
+type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
+//#endregion
+export { AvatarSize };

package/dist/avatar/AvatarContext.js

@@ -0,0 +1,13 @@
+import { inject, provide, ref } from "vue";
+
+//#region src/avatar/AvatarContext.ts
+const AvatarContextKey = Symbol("AvatarContext");
+function useAvatarContext() {
+	return inject(AvatarContextKey, ref({}));
+}
+function useAvatarProvider(value) {
+	provide(AvatarContextKey, value);
+}
+
+//#endregion
+export { useAvatarContext, useAvatarProvider };

package/dist/avatar/AvatarGroup.d.ts

@@ -0,0 +1,24 @@
+import { PopoverProps } from "../popover/index.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import { AvatarSize } from "./AvatarContext.js";
+import * as vue235 from "vue";
+import { CSSProperties } from "vue";
+
+//#region src/avatar/AvatarGroup.d.ts
+interface AvatarGroupProps extends ComponentBaseProps {
+  prefixCls?: string;
+  max?: {
+    count?: number;
+    style?: CSSProperties;
+    popover?: PopoverProps;
+  };
+  /**
+   * Size of avatar, options: `large`, `small`, `default`
+   * or a custom number size
+   */
+  size?: AvatarSize;
+  shape?: 'circle' | 'square';
+}
+declare const AvatarGroup: vue235.DefineSetupFnComponent<AvatarGroupProps, {}, {}, AvatarGroupProps & {}, vue235.PublicProps>;
+//#endregion
+export { AvatarGroup, AvatarGroupProps };

package/dist/avatar/AvatarGroup.js

@@ -0,0 +1,99 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass as getAttrStyleAndClass$1 } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import useCSSVarCls_default from "../config-provider/hooks/useCSSVarCls.js";
+import { useAvatarProvider } from "./AvatarContext.js";
+import style_default from "./style/index.js";
+import Avatar_default from "./Avatar.js";
+import popover_default from "../popover/index.js";
+import { computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import { clsx } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+
+//#region src/avatar/AvatarGroup.tsx
+const AvatarGroup = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const { prefixCls, direction } = useComponentBaseConfig("avatar", props);
+	const groupPrefixCls = computed(() => `${prefixCls.value}-group`);
+	const rootCls = useCSSVarCls_default(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	useAvatarProvider(computed(() => {
+		return {
+			size: props.size,
+			shape: props.shape
+		};
+	}));
+	return () => {
+		const { rootClass, max } = props;
+		const children = filterEmpty(slots?.default?.() ?? []);
+		const { className, style, restAttrs } = getAttrStyleAndClass$1(attrs);
+		const cls = clsx(groupPrefixCls.value, { [`${groupPrefixCls.value}-rtl`]: direction.value === "rtl" }, cssVarCls.value, rootCls.value, className, rootClass, hashId.value);
+		const childrenWithProps = children.map((child, index) => {
+			if (isVNode(child)) return createVNode(child, { key: `avatar-key-${index}` });
+			return child;
+		});
+		const mergeCount = max?.count;
+		const numOfChildren = childrenWithProps.length;
+		if (mergeCount && mergeCount < numOfChildren) {
+			const childrenShow = childrenWithProps.slice(0, mergeCount);
+			const childrenHidden = childrenWithProps.slice(mergeCount, numOfChildren);
+			const mergeStyle = max?.style;
+			const mergePopoverTrigger = max?.popover?.trigger || "hover";
+			const mergePopoverPlacement = max?.popover?.placement || "top";
+			const popoverProps = {
+				content: () => childrenHidden,
+				...max?.popover,
+				placement: mergePopoverPlacement,
+				trigger: mergePopoverTrigger,
+				rootClass: clsx(`${groupPrefixCls.value}-popover`, max?.popover?.rootClass)
+			};
+			childrenShow.push(createVNode(popover_default, mergeProps({
+				"key": "avatar-popover-key",
+				"destroyOnHidden": true
+			}, popoverProps), { default: () => [createVNode(Avatar_default, { "style": mergeStyle }, { default: () => [`+${numOfChildren - mergeCount}`] })] }));
+			return createVNode("div", mergeProps(restAttrs, {
+				"class": cls,
+				"style": style
+			}), [childrenShow]);
+		}
+		return createVNode("div", mergeProps(restAttrs, {
+			"class": cls,
+			"style": style
+		}), [childrenWithProps]);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		max: {
+			type: Object,
+			required: false
+		},
+		size: {
+			type: [
+				String,
+				Number,
+				Object
+			],
+			required: false
+		},
+		shape: {
+			type: String,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		}
+	},
+	name: "AAvatarGroup",
+	inheritAttrs: false
+});
+AvatarGroup.install = (app) => {
+	app.component(AvatarGroup.name, AvatarGroup);
+};
+var AvatarGroup_default = AvatarGroup;
+
+//#endregion
+export { AvatarGroup_default as default };

package/dist/avatar/index.d.ts

@@ -0,0 +1,10 @@
+import { AvatarGroup, AvatarGroupProps } from "./AvatarGroup.js";
+import { Avatar, AvatarEmits, AvatarProps, AvatarSlots } from "./Avatar.js";
+
+//#region src/avatar/index.d.ts
+type CompoundedComponent = typeof Avatar & {
+  Group: typeof AvatarGroup;
+};
+declare const Avatar$1: CompoundedComponent;
+//#endregion
+export { Avatar$1 as Avatar };

package/dist/avatar/index.js

@@ -0,0 +1,10 @@
+import Avatar_default from "./Avatar.js";
+import AvatarGroup_default from "./AvatarGroup.js";
+
+//#region src/avatar/index.tsx
+const Avatar = Avatar_default;
+Avatar.Group = AvatarGroup_default;
+var avatar_default = Avatar;
+
+//#endregion
+export { avatar_default as default };