@zboson/ui 0.0.0-stage → 0.0.2

package/dist/notification/useNotification.js

@@ -0,0 +1,253 @@
+import { devUseWarning } from "../_util/warning.js";
+import { useBaseConfig, useComponentBaseConfig } from "../config-provider/context.js";
+import useToken from "../theme/useToken.js";
+import { resolveStyleOrClass, useMergeSemantic, useSemanticRootStyle, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { toPropsRefs } from "../_util/tools.js";
+import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
+import { isRenderable } from "../_util/is.js";
+import style_default from "./style/index.js";
+import { getCloseIconConfig, getMotion, getPlacementStyle } from "./util.js";
+import localeValues from "../locale/en_US.js";
+import useLocale from "../locale/useLocale.js";
+import { computeClosable, pickClosable } from "../_util/hooks/useClosable.js";
+import { getCloseIcon, getIconWrapperClassName, resolveIconNode } from "./PurePanel.js";
+import { computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, shallowRef, unref } from "vue";
+import { clsx } from "@v-c/util";
+import { useNotification as useNotification$1, useNotificationProvider } from "@v-c/notification";
+//#region src/notification/useNotification.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const DEFAULT_OFFSET = 24;
+const DEFAULT_DURATION = 4.5;
+const DEFAULT_PLACEMENT = "topRight";
+const Wrapper = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const prefixCls = computed(() => props.prefixCls);
+	const rootCls = useCSSVarCls(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	useNotificationProvider(computed(() => {
+		return { classNames: { list: clsx(hashId.value, cssVarCls.value, rootCls.value) } };
+	}));
+	return () => {
+		return slots?.default?.();
+	};
+}, { props: { prefixCls: {
+	type: String,
+	required: true
+} } });
+const renderNotifications = (node, { prefixCls, key }) => {
+	return createVNode(Wrapper, {
+		"prefixCls": prefixCls,
+		"key": key
+	}, _isSlot(node) ? node : { default: () => [node] });
+};
+const Holder = /* @__PURE__ */ defineComponent((props, { expose }) => {
+	const { getPrefixCls, getPopupContainer, notification, direction } = useBaseConfig("notification");
+	const [contextLocale] = useLocale("global", localeValues.global);
+	const { classes: contextClassNames, style: contextStyle, styles: contextStyles } = useComponentBaseConfig("notification", props);
+	const { classes, styles } = toPropsRefs(props, "classes", "styles");
+	const [, token] = useToken();
+	const prefixCls = computed(() => props.prefixCls || getPrefixCls("notification"));
+	const mergedDuration = computed(() => {
+		return typeof props.duration === "number" && props.duration > 0 ? props.duration : false;
+	});
+	const getStyle = (placement) => {
+		return getPlacementStyle(placement, props?.top ?? DEFAULT_OFFSET, props?.bottom ?? DEFAULT_OFFSET);
+	};
+	const getClassName = () => clsx({ [`${prefixCls.value}-rtl`]: props.rtl ?? direction.value === "rtl" });
+	const getNotificationMotion = () => getMotion(prefixCls.value);
+	const mergedProps = computed(() => props);
+	const contextStyleRoot = useSemanticRootStyle(contextStyle);
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, contextStyleRoot, styles), useToProps(mergedProps));
+	const [api, holder] = useNotification$1(computed(() => ({
+		prefixCls: prefixCls.value,
+		style: getStyle,
+		className: getClassName,
+		motion: getNotificationMotion,
+		closable: { closeIcon: getCloseIcon(prefixCls.value) },
+		duration: mergedDuration.value,
+		getContainer: () => props?.getContainer?.() || getPopupContainer?.() || document.body,
+		maxCount: props?.maxCount,
+		pauseOnHover: props?.pauseOnHover,
+		showProgress: props?.showProgress,
+		onAllRemoved: props.onAllRemoved,
+		renderNotifications,
+		stack: props.stack === false ? false : {
+			threshold: typeof props.stack === "object" ? props.stack.threshold : void 0,
+			offset: 8,
+			gap: token.value?.margin
+		},
+		classNames: mergedClassNames.value,
+		styles: mergedStyles.value
+	})));
+	expose({
+		...api,
+		prefixCls,
+		notification,
+		closeLabel: computed(() => contextLocale.value?.close ?? localeValues.global?.close ?? "Close")
+	});
+	return () => {
+		return holder?.();
+	};
+}, {
+	props: /*@__PURE__*/ mergeDefaults({
+		top: {
+			type: Number,
+			required: false
+		},
+		bottom: {
+			type: Number,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		getContainer: {
+			type: Function,
+			required: false
+		},
+		placement: {
+			type: String,
+			required: false
+		},
+		maxCount: {
+			type: Number,
+			required: false
+		},
+		rtl: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		stack: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		duration: {
+			type: [Number, Boolean],
+			required: false,
+			default: void 0
+		},
+		showProgress: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		pauseOnHover: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		closeIcon: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		onAllRemoved: { required: false }
+	}, {
+		duration: DEFAULT_DURATION,
+		pauseOnHover: true
+	}),
+	name: "NotificationHolder",
+	inheritAttrs: false
+});
+function useInternalNotification(notificationConfig) {
+	const holderRef = shallowRef();
+	const warning = devUseWarning("Notification");
+	const { notification: notificationContext } = useBaseConfig("notification");
+	const wrapAPIFn = () => {
+		const open = (config) => {
+			if (!holderRef.value) {
+				warning(false, "usage", "You are calling notice in render which will not take effect. Please trigger in effect instead.");
+				return;
+			}
+			const { open: originOpen, prefixCls, notification, closeLabel } = holderRef.value;
+			const contextClassName = notification?.class || {};
+			const noticePrefixCls = `${prefixCls}-notice`;
+			const { title, description, icon, type, actions, class: className, style, role = "alert", closeIcon, closable, classes: configClassNames = {}, styles = {}, ...restConfig } = config;
+			const mergedTitle = title;
+			const hasTitle = isRenderable(mergedTitle) && mergedTitle !== "";
+			const mergedActions = actions;
+			const realCloseIcon = getCloseIcon(noticePrefixCls, getCloseIconConfig(closeIcon, unref(notificationConfig), notification));
+			const [rawClosable, mergedCloseIcon, , ariaProps] = computeClosable(pickClosable(computed(() => ({
+				...unref(notificationConfig) || {},
+				...config
+			}))), pickClosable(notificationContext), computed(() => ({
+				closable: true,
+				closeIcon: realCloseIcon
+			})), closeLabel);
+			const mergedClosable = rawClosable ? {
+				onClose: closable && typeof closable === "object" ? closable.onClose : void 0,
+				closeIcon: mergedCloseIcon,
+				...ariaProps
+			} : false;
+			const semanticClassNames = resolveStyleOrClass(configClassNames, { props: config });
+			const semanticStyles = resolveStyleOrClass(styles, { props: config });
+			const iconNode = resolveIconNode(icon, type);
+			const iconWrapperClass = clsx(getIconWrapperClassName(noticePrefixCls, type, icon), semanticClassNames?.icon);
+			return originOpen({
+				placement: unref(notificationConfig)?.placement ?? DEFAULT_PLACEMENT,
+				...restConfig,
+				icon: iconNode,
+				title: hasTitle ? mergedTitle : null,
+				description,
+				actions: mergedActions,
+				role,
+				classNames: {
+					...semanticClassNames,
+					icon: iconWrapperClass
+				},
+				styles: semanticStyles,
+				class: clsx({ [`${noticePrefixCls}-${type}`]: type }, { [`${noticePrefixCls}-with-icon`]: !!iconNode }, className, contextClassName),
+				style,
+				closable: mergedClosable
+			});
+		};
+		const destroy = (key) => {
+			if (key !== void 0) holderRef.value?.close(key);
+			else holderRef.value?.destroy();
+		};
+		const clone = {
+			open,
+			destroy
+		};
+		[
+			"success",
+			"info",
+			"warning",
+			"error"
+		].forEach((type) => {
+			clone[type] = (config) => open({
+				...config,
+				type
+			});
+		});
+		return clone;
+	};
+	const holderContext = () => {
+		return createVNode(Holder, mergeProps({ "key": "notificaion-holder" }, unref(notificationConfig), { "ref": holderRef }), null);
+	};
+	return [wrapAPIFn(), holderContext];
+}
+function useNotification(notificationConfig) {
+	return useInternalNotification(notificationConfig);
+}
+//#endregion
+export { useNotification as default, useInternalNotification };

package/dist/notification/util.d.ts

@@ -0,0 +1,21 @@
+import { VueNode } from "../_util/type.js";
+import { NotificationConfig, NotificationPlacement } from "./interface.js";
+import { NotificationConfig as NotificationConfig$1 } from "../config-provider/context.js";
+import { CSSProperties } from "vue";
+import { CSSMotionProps } from "@v-c/util/dist/utils/transition";
+//#region src/notification/util.d.ts
+/**
+ * Mirror ant-design 6.4.0 getPlacementOffsetStyle: surface positioning via
+ * the --notification-top / --notification-bottom CSS variables that the
+ * new placement.ts style file consumes. Setting inline `top: Npx` would
+ * defeat the holder's `inset` calc and force the holder to occupy the
+ * full --notification-margin-edge gap, which manifests as a tall empty
+ * strip at the top of the page when scrolled.
+ */
+declare function getPlacementOffsetStyle(top?: number | string, bottom?: number | string): CSSProperties;
+/** @deprecated kept for the message wrapper; routes through getPlacementOffsetStyle. */
+declare function getPlacementStyle(_placement: NotificationPlacement, top: number, bottom: number): CSSProperties;
+declare function getMotion(prefixCls: string): CSSMotionProps;
+declare function getCloseIconConfig(closeIcon: VueNode, notificationConfig?: NotificationConfig, notification?: NotificationConfig$1): VueNode;
+//#endregion
+export { getCloseIconConfig, getMotion, getPlacementOffsetStyle, getPlacementStyle };

package/dist/notification/util.js

@@ -0,0 +1,29 @@
+//#region src/notification/util.ts
+/**
+* Mirror ant-design 6.4.0 getPlacementOffsetStyle: surface positioning via
+* the --notification-top / --notification-bottom CSS variables that the
+* new placement.ts style file consumes. Setting inline `top: Npx` would
+* defeat the holder's `inset` calc and force the holder to occupy the
+* full --notification-margin-edge gap, which manifests as a tall empty
+* strip at the top of the page when scrolled.
+*/
+function getPlacementOffsetStyle(top, bottom) {
+	const result = {};
+	if (top !== void 0 && top !== null) result["--notification-top"] = typeof top === "number" ? `${top}px` : top;
+	if (bottom !== void 0 && bottom !== null) result["--notification-bottom"] = typeof bottom === "number" ? `${bottom}px` : bottom;
+	return result;
+}
+/** @deprecated kept for the message wrapper; routes through getPlacementOffsetStyle. */
+function getPlacementStyle(_placement, top, bottom) {
+	return getPlacementOffsetStyle(top, bottom);
+}
+function getMotion(prefixCls) {
+	return { name: `${prefixCls}-fade` };
+}
+function getCloseIconConfig(closeIcon, notificationConfig, notification) {
+	if (typeof closeIcon !== "undefined") return closeIcon;
+	if (typeof notificationConfig?.closeIcon !== "undefined") return notificationConfig.closeIcon;
+	return notification?.closeIcon;
+}
+//#endregion
+export { getCloseIconConfig, getMotion, getPlacementOffsetStyle, getPlacementStyle };

package/dist/package.js

@@ -0,0 +1,4 @@
+//#region package.json
+var version = "0.0.2";
+//#endregion
+export { version };

package/dist/package.json.d.ts

@@ -0,0 +1,208 @@
+//#region package.json.d.ts
+declare const _exports: {
+  name: string;
+  type: string;
+  version: string;
+  description: string;
+  license: string;
+  sideEffects: string[];
+  exports: {
+    ".": {
+      types: string;
+      import: string;
+      default: string;
+    };
+    "./version/token.json": string;
+    "./version/token-meta.json": string;
+    "./dist/version/token.json": string;
+    "./dist/version/token-meta.json": string;
+    "./dist/*": {
+      types: string[];
+      import: string[];
+      default: string[];
+    };
+    "./dist/locale/*": {
+      types: string;
+      import: string;
+      default: string;
+    };
+    "./locale/*": {
+      types: string;
+      import: string;
+      default: string;
+    };
+    "./date-picker/*": {
+      types: string[];
+      import: string[];
+      default: string[];
+    };
+    "./date-picker/locale/*": {
+      types: string;
+      import: string;
+      default: string;
+    };
+    "./time-picker/*": {
+      types: string[];
+      import: string[];
+      default: string[];
+    };
+    "./time-picker/locale/*": {
+      types: string;
+      import: string;
+      default: string;
+    };
+    "./date-picker/generate": {
+      types: string;
+      import: string;
+      default: string;
+    };
+    "./date-picker/generate/*": {
+      types: string[];
+      import: string[];
+      default: string[];
+    };
+    "./global.d.ts": string;
+    "./global": string;
+    "./config-provider": {
+      types: string;
+      import: string;
+      default: string;
+    };
+    "./config-provider/context": {
+      types: string;
+      import: string;
+      default: string;
+    };
+    "./config-provider/DisabledContext": {
+      types: string;
+      import: string;
+      default: string;
+    };
+    "./config-provider/hooks/useSize": {
+      types: string;
+      import: string;
+      default: string;
+    };
+    "./config-provider/hooks/useCSSVarCls": {
+      types: string;
+      import: string;
+      default: string;
+    };
+    "./theme/internal": {
+      types: string;
+      import: string;
+      default: string;
+    };
+    "./theme/interface/components": {
+      types: string;
+      import: string;
+      default: string;
+    };
+    "./dist/reset.css": string;
+    "./dist/antd.css": string;
+    "./dist/antd-with-locales.js": string;
+    "./dist/antd-with-locales.esm.js": string;
+    "./dist/antd.esm.js": string;
+    "./dist/antd.js": string;
+    "./web-types.json": string;
+    "./web-tags.json": string;
+    "./package.json": string;
+  };
+  main: string;
+  module: string;
+  unpkg: string;
+  jsdelivr: string;
+  types: string;
+  files: string[];
+  publishConfig: {
+    access: string;
+  };
+  contributes: {
+    html: {
+      customData: string[];
+    };
+  };
+  scripts: {
+    test: string;
+    build: string;
+    "build:verify": string;
+    "build:p": string;
+    "build:esm": string;
+    "build:with-locales": string;
+    "build:with-locales:esm": string;
+    "build:with-locales:umd": string;
+    "build:vite:parallel": string;
+    "build:full-esm": string;
+    "build:umd": string;
+    "build:web-types": string;
+    "build:llm": string;
+    "build:llm-text": string;
+    "build:llm-semantic": string;
+    "build:token-meta": string;
+    "build:token-statistic": string;
+    "build:token": string;
+    "build:style": string;
+    prepublish: string;
+    bump: string;
+  };
+  dependencies: {
+    "@ant-design/colors": string;
+    "@ant-design/fast-color": string;
+    "@v-c/async-validator": string;
+    "@v-c/cascader": string;
+    "@v-c/checkbox": string;
+    "@v-c/collapse": string;
+    "@v-c/color-picker": string;
+    "@v-c/dialog": string;
+    "@v-c/drawer": string;
+    "@v-c/dropdown": string;
+    "@v-c/image": string;
+    "@v-c/input": string;
+    "@v-c/input-number": string;
+    "@v-c/listy": string;
+    "@v-c/mentions": string;
+    "@v-c/menu": string;
+    "@v-c/mutate-observer": string;
+    "@v-c/notification": string;
+    "@v-c/pagination": string;
+    "@v-c/picker": string;
+    "@v-c/progress": string;
+    "@v-c/qrcode": string;
+    "@v-c/rate": string;
+    "@v-c/resize-observer": string;
+    "@v-c/segmented": string;
+    "@v-c/select": string;
+    "@v-c/slick": string;
+    "@v-c/slider": string;
+    "@v-c/steps": string;
+    "@v-c/switch": string;
+    "@v-c/table": string;
+    "@v-c/tabs": string;
+    "@v-c/textarea": string;
+    "@v-c/tooltip": string;
+    "@v-c/tour": string;
+    "@v-c/tree": string;
+    "@v-c/tree-select": string;
+    "@v-c/trigger": string;
+    "@v-c/upload": string;
+    "@v-c/util": string;
+    "@v-c/virtual-list": string;
+    "@vueuse/core": string;
+    "@zboson/cssinjs": string;
+    "@zboson/icons": string;
+    dayjs: string;
+    "es-toolkit": string;
+    "scroll-into-view-if-needed": string;
+    "throttle-debounce": string;
+  };
+  "web-types": string;
+  browserslist: string[];
+  devDependencies: {
+    "@types/throttle-debounce": string;
+    "@v-c/portal": string;
+    csstype: string;
+  };
+};
+declare let _version2: typeof _exports["version"];
+//#endregion
+export { _exports as default, _version2 as version };

package/dist/pagination/Pagination.d.ts

@@ -0,0 +1,13 @@
+import { PaginationEmits, PaginationProps, PaginationSlots } from "./interface.js";
+import { SlotsType } from "vue";
+//#region src/pagination/Pagination.d.ts
+interface InternalPaginationProps extends PaginationProps, PaginationEmitsProps {}
+interface PaginationEmitsProps {
+  onChange?: PaginationEmits['change'];
+  onShowSizeChange?: PaginationEmits['showSizeChange'];
+  'onUpdate:current'?: PaginationEmits['update:current'];
+  'onUpdate:pageSize'?: PaginationEmits['update:pageSize'];
+}
+declare const Pagination: import("vue").DefineSetupFnComponent<InternalPaginationProps, PaginationEmits, SlotsType<PaginationSlots>, InternalPaginationProps, import("vue").PublicProps>;
+//#endregion
+export { InternalPaginationProps, PaginationEmitsProps, Pagination as default };