@zboson/ui 0.0.0-stage → 0.0.2

package/dist/space/style/index.js

@@ -0,0 +1,44 @@
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+//#region src/space/style/index.ts
+const genSpaceStyle = (token) => {
+	const { componentCls, antCls } = token;
+	return { [componentCls]: {
+		display: "inline-flex",
+		"&-rtl": { direction: "rtl" },
+		"&-vertical": { flexDirection: "column" },
+		"&-align": {
+			flexDirection: "column",
+			"&-center": { alignItems: "center" },
+			"&-start": { alignItems: "flex-start" },
+			"&-end": { alignItems: "flex-end" },
+			"&-baseline": { alignItems: "baseline" }
+		},
+		[`${componentCls}-item:empty`]: { display: "none" },
+		[`${componentCls}-item > ${antCls}-badge-not-a-wrapper:only-child`]: { display: "block" }
+	} };
+};
+const genSpaceGapStyle = (token) => {
+	const { componentCls } = token;
+	return { [componentCls]: {
+		"&-gap-row-small": { rowGap: token.spaceGapSmallSize },
+		"&-gap-row-middle": { rowGap: token.spaceGapMiddleSize },
+		"&-gap-row-medium": { rowGap: token.spaceGapMiddleSize },
+		"&-gap-row-large": { rowGap: token.spaceGapLargeSize },
+		"&-gap-col-small": { columnGap: token.spaceGapSmallSize },
+		"&-gap-col-middle": { columnGap: token.spaceGapMiddleSize },
+		"&-gap-col-medium": { columnGap: token.spaceGapMiddleSize },
+		"&-gap-col-large": { columnGap: token.spaceGapLargeSize }
+	} };
+};
+const prepareComponentToken = () => ({});
+var style_default = genStyleHooks("Space", (token) => {
+	const spaceToken = mergeToken(token, {
+		spaceGapSmallSize: token.paddingXS,
+		spaceGapMiddleSize: token.padding,
+		spaceGapLargeSize: token.paddingLG
+	});
+	return [genSpaceStyle(spaceToken), genSpaceGapStyle(spaceToken)];
+}, () => ({}), { resetStyle: false });
+//#endregion
+export { style_default as default, prepareComponentToken };

package/dist/spin/Indicator/Looper.d.ts

@@ -0,0 +1,8 @@
+//#region src/spin/Indicator/Looper.d.ts
+interface IndicatorProps {
+  prefixCls: string;
+  percent?: number;
+}
+declare const Looper: import("vue").DefineSetupFnComponent<IndicatorProps, {}, {}, IndicatorProps & {}, import("vue").PublicProps>;
+//#endregion
+export { IndicatorProps, Looper };

package/dist/spin/Indicator/Looper.js

@@ -0,0 +1,38 @@
+import Progress from "./Progress.js";
+import { Fragment, createVNode, defineComponent, mergeProps } from "vue";
+import { classNames } from "@v-c/util";
+//#region src/spin/Indicator/Looper.tsx
+const Looper = /* @__PURE__ */ defineComponent((props, { attrs }) => {
+	return () => {
+		const { prefixCls, percent = 0 } = props;
+		const dotClassName = `${prefixCls}-dot`;
+		const holderClassName = `${dotClassName}-holder`;
+		const hideClassName = `${holderClassName}-hidden`;
+		return createVNode(Fragment, null, [createVNode("span", mergeProps(attrs, { "class": classNames(holderClassName, percent > 0 && hideClassName) }), [createVNode("span", { "class": classNames(dotClassName, `${prefixCls}-dot-spin`) }, [[
+			1,
+			2,
+			3,
+			4
+		].map((i) => createVNode("i", {
+			"class": `${prefixCls}-dot-item`,
+			"key": i
+		}, null))])]), createVNode(Progress, {
+			"prefixCls": prefixCls,
+			"percent": percent
+		}, null)]);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		percent: {
+			type: Number,
+			required: false
+		}
+	},
+	inheritAttrs: false
+});
+//#endregion
+export { Looper };

package/dist/spin/Indicator/Progress.d.ts

@@ -0,0 +1,8 @@
+//#region src/spin/Indicator/Progress.d.ts
+interface ProgressProps {
+  prefixCls: string;
+  percent: number;
+}
+declare const Progress: import("vue").DefineSetupFnComponent<ProgressProps, {}, {}, ProgressProps & {}, import("vue").PublicProps>;
+//#endregion
+export { ProgressProps, Progress as default };

package/dist/spin/Indicator/Progress.js

@@ -0,0 +1,72 @@
+import { createVNode, defineComponent, shallowRef, watch } from "vue";
+import { classNames } from "@v-c/util";
+//#region src/spin/Indicator/Progress.tsx
+const viewSize = 100;
+const borderWidth = viewSize / 5;
+const radius = viewSize / 2 - borderWidth / 2;
+const circumference = radius * 2 * Math.PI;
+const position = 50;
+const CustomCircle = /* @__PURE__ */ defineComponent((props) => {
+	return () => {
+		const { dotClassName, hasCircleCls } = props;
+		return createVNode("circle", {
+			"class": classNames(`${dotClassName}-circle`, { [`${dotClassName}-circle-bg`]: hasCircleCls }),
+			"r": radius,
+			"cx": position,
+			"cy": position,
+			"stroke-width": borderWidth
+		}, null);
+	};
+}, { props: {
+	dotClassName: {
+		type: String,
+		required: false
+	},
+	hasCircleCls: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	}
+} });
+const Progress = /* @__PURE__ */ defineComponent((props) => {
+	const render = shallowRef(false);
+	watch(() => props.percent !== 0, () => {
+		if (props.percent !== 0) render.value = true;
+	}, { immediate: true });
+	return () => {
+		const { percent, prefixCls } = props;
+		const dotClassName = `${prefixCls}-dot`;
+		const holderClassName = `${dotClassName}-holder`;
+		const hideClassName = `${holderClassName}-hidden`;
+		const safePtg = Math.max(Math.min(percent, 100), 0);
+		if (!render.value) return null;
+		const circleStyle = {
+			strokeDashoffset: `${circumference / 4}`,
+			strokeDasharray: `${circumference * safePtg / 100} ${circumference * (100 - safePtg) / 100}`
+		};
+		return createVNode("span", { "class": classNames(holderClassName, `${dotClassName}-progress`, safePtg <= 0 && hideClassName) }, [createVNode("svg", {
+			"viewBox": `0 0 ${viewSize} ${viewSize}`,
+			"role": "progressbar",
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			"aria-valuenow": safePtg
+		}, [createVNode(CustomCircle, {
+			"dotClassName": dotClassName,
+			"hasCircleCls": true
+		}, null), createVNode(CustomCircle, {
+			"dotClassName": dotClassName,
+			"style": circleStyle
+		}, null)])]);
+	};
+}, { props: {
+	prefixCls: {
+		type: String,
+		required: true
+	},
+	percent: {
+		type: Number,
+		required: true
+	}
+} });
+//#endregion
+export { Progress as default };

package/dist/spin/Indicator/index.d.ts

@@ -0,0 +1,10 @@
+import { VueNode } from "../../_util/type.js";
+//#region src/spin/Indicator/index.d.ts
+interface IndicatorProps {
+  prefixCls: string;
+  indicator?: VueNode;
+  percent?: number;
+}
+declare const Indicator: import("vue").DefineSetupFnComponent<IndicatorProps, {}, {}, IndicatorProps & {}, import("vue").PublicProps>;
+//#endregion
+export { IndicatorProps, Indicator as default };

package/dist/spin/Indicator/index.js

@@ -0,0 +1,49 @@
+import { getAttrStyleAndClass } from "../../_util/hooks/useMergeSemantic.js";
+import { getSlotPropsFnRun } from "../../_util/tools.js";
+import { Looper } from "./Looper.js";
+import { createVNode, defineComponent, isVNode, mergeDefaults, mergeProps } from "vue";
+import { classNames } from "@v-c/util";
+//#region src/spin/Indicator/index.tsx
+const Indicator = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	return () => {
+		const { prefixCls, percent } = props;
+		const dotClassName = `${prefixCls}-dot`;
+		const indicator = getSlotPropsFnRun(slots, props, "indicator");
+		const { style, className } = getAttrStyleAndClass(attrs);
+		if (indicator && isVNode(indicator)) return createVNode(indicator, {
+			class: classNames(dotClassName, className),
+			style,
+			percent
+		});
+		return createVNode(Looper, mergeProps(attrs, {
+			"prefixCls": prefixCls,
+			"percent": percent
+		}), null);
+	};
+}, {
+	props: /*@__PURE__*/ mergeDefaults({
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		indicator: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		percent: {
+			type: Number,
+			required: false
+		}
+	}, { indicator: void 0 }),
+	inheritAttrs: false
+});
+//#endregion
+export { Indicator as default };

package/dist/spin/index.d.ts

@@ -0,0 +1,72 @@
+import { EmptyEmit, 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 { CSSProperties, SlotsType } from "vue";
+//#region src/spin/index.d.ts
+type SpinSemanticName = keyof SpinSemanticClassNames & keyof SpinSemanticStyles;
+interface SpinSemanticClassNames {
+  root?: string;
+  section?: string;
+  indicator?: string;
+  description?: string;
+  container?: string;
+  /** @deprecated Please use `description` instead */
+  tip?: string;
+  /** @deprecated Please use `root` instead */
+  mask?: string;
+}
+interface SpinSemanticStyles {
+  root?: CSSProperties;
+  section?: CSSProperties;
+  indicator?: CSSProperties;
+  description?: CSSProperties;
+  container?: CSSProperties;
+  /** @deprecated Please use `description` instead */
+  tip?: CSSProperties;
+  /** @deprecated Please use `root` instead */
+  mask?: CSSProperties;
+}
+type SpinClassNamesType = SemanticClassNamesType<SpinProps, SpinSemanticClassNames>;
+type SpinStylesType = SemanticStylesType<SpinProps, SpinSemanticStyles>;
+interface SpinProps extends ComponentBaseProps {
+  /** Whether Spin is spinning */
+  spinning?: boolean;
+  /**
+   * Note: `default` is deprecated and will be removed in v7, please use `medium` instead.
+   */
+  size?: SizeType | 'default';
+  /** Customize description content when Spin has children */
+  /** @deprecated Please use `description` instead */
+  tip?: VueNode;
+  description?: VueNode;
+  /** Specifies a delay in milliseconds for loading state (prevent flush) */
+  delay?: number;
+  /** The className of wrapper when Spin has children */
+  /** @deprecated Please use `classes.root` instead */
+  wrapperClassName?: string;
+  /** React node of the spinning indicator */
+  indicator?: VueNode;
+  /** Display a backdrop with the `Spin` component */
+  fullscreen?: boolean;
+  percent?: number | 'auto';
+  classes?: SpinClassNamesType;
+  styles?: SpinStylesType;
+}
+interface SpinRef {
+  nativeElement: HTMLDivElement;
+}
+interface SpinSlots {
+  indicator?: () => any;
+  /** @deprecated Please use `description` instead */
+  tip?: () => any;
+  description?: () => any;
+  default?: () => any;
+}
+declare const Spin: import("vue").DefineSetupFnComponent<SpinProps, EmptyEmit, SlotsType<SpinSlots>, SpinProps, import("vue").PublicProps>;
+declare const _default: typeof Spin & {
+  setDefaultIndicator: (indicator: VueNode) => void;
+};
+//#endregion
+export { SpinClassNamesType, SpinProps, SpinRef, SpinSemanticClassNames, SpinSemanticName, SpinSemanticStyles, SpinSlots, SpinStylesType, _default as default };

package/dist/spin/index.js

@@ -0,0 +1,204 @@
+import { devUseWarning, isDev } from "../_util/warning.js";
+import { useComponentBaseConfig, useComponentConfig } from "../config-provider/context.js";
+import { useSize } from "../config-provider/hooks/useSize.js";
+import { getAttrStyleAndClass, useMergeSemantic, useSemanticRootStyle, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { getSlotPropsFnRun, toPropsRefs as toPropsRefs$1 } from "../_util/tools.js";
+import Indicator from "./Indicator/index.js";
+import style_default from "./style/index.js";
+import usePercent from "./usePercent.js";
+import { Fragment, computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef, watch } from "vue";
+import { classNames } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+import { debounce } from "throttle-debounce";
+//#region src/spin/index.tsx
+let defaultIndicator;
+function shouldDelay(spinning, delay) {
+	return !!spinning && !!delay && !Number.isNaN(Number(delay));
+}
+const Spin = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) => {
+	const componentCtx = useComponentConfig("spin");
+	const { direction, prefixCls, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("spin", props, ["indicator"]);
+	const [hashId, cssVarCls] = style_default(prefixCls);
+	const { classes, styles } = toPropsRefs$1(props, "classes", "styles");
+	const spinning = shallowRef(shouldDelay(props.spinning, props.delay) ? false : !!props.spinning);
+	const mergedPercent = usePercent(spinning, computed(() => props.percent));
+	watch([() => props.delay, () => props.spinning], (_, _p, onCleanup) => {
+		if (props.spinning) {
+			const showSpinning = debounce(props?.delay ?? 0, () => {
+				spinning.value = true;
+			});
+			showSpinning();
+			onCleanup(() => {
+				showSpinning?.cancel?.();
+			});
+			return;
+		}
+		spinning.value = false;
+	}, { immediate: true });
+	const warning = devUseWarning("Spin");
+	const mergedSize = useSize((ctx) => props.size ?? ctx);
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			size: mergedSize.value,
+			spinning: spinning.value,
+			fullscreen: props.fullscreen,
+			percent: mergedPercent.value
+		};
+	});
+	const contextStyleRoot = useSemanticRootStyle(contextStyle);
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, contextStyleRoot, styles), useToProps(mergedProps));
+	const nativeElementRef = shallowRef();
+	expose({ nativeElement: nativeElementRef });
+	return () => {
+		const { fullscreen, size, rootClass, wrapperClassName } = props;
+		const children = filterEmpty(slots?.default?.() || []);
+		const indicator = getSlotPropsFnRun(slots, props, "indicator");
+		const contextIndicator = getSlotPropsFnRun({}, componentCtx.value, "indicator");
+		const hasChildren = children.length > 0;
+		const isNested = hasChildren || fullscreen;
+		const description = getSlotPropsFnRun(slots, props, "description");
+		const tip = getSlotPropsFnRun(slots, props, "tip");
+		const mergedDescription = description ?? tip;
+		const { style, className, restAttrs } = getAttrStyleAndClass(attrs);
+		if (isDev) {
+			warning.deprecated(size !== "default", "size=\"default\"", "size=\"medium\"");
+			warning.deprecated(!props.tip && !slots.tip, "tip", "description");
+			warning.deprecated(!wrapperClassName, "wrapperClassName", "classes.root");
+			warning.deprecated(!(mergedClassNames.value?.tip || mergedStyles.value?.tip), "classes.tip and styles.tip", "classes.description and styles.description");
+			warning.deprecated(!(mergedClassNames.value?.mask || mergedStyles.value?.mask), "classes.mask and styles.mask", "classes.root and styles.root");
+		}
+		const mergedIndicator = indicator ?? contextIndicator ?? defaultIndicator;
+		const indicatorNode = createVNode(Fragment, null, [createVNode(Indicator, {
+			"class": classNames(mergedClassNames.value.indicator),
+			"style": mergedStyles.value.indicator,
+			"prefixCls": prefixCls.value,
+			"indicator": mergedIndicator,
+			"percent": mergedPercent.value
+		}, null), mergedDescription && createVNode("div", {
+			"class": classNames(`${prefixCls.value}-description`, mergedClassNames.value.tip, mergedClassNames.value.description),
+			"style": {
+				...mergedStyles.value.tip,
+				...mergedStyles.value.description
+			}
+		}, [mergedDescription])]);
+		return createVNode("div", mergeProps({ "ref": nativeElementRef }, restAttrs, {
+			"class": classNames(prefixCls.value, {
+				[`${prefixCls.value}-sm`]: mergedSize.value === "small",
+				[`${prefixCls.value}-lg`]: mergedSize.value === "large",
+				[`${prefixCls.value}-spinning`]: spinning.value,
+				[`${prefixCls.value}-rtl`]: direction.value === "rtl",
+				[`${prefixCls.value}-fullscreen`]: fullscreen
+			}, rootClass, mergedClassNames.value.root, fullscreen && mergedClassNames.value.mask, isNested ? wrapperClassName : [`${prefixCls.value}-section`, mergedClassNames.value.section], contextClassName.value, className, hashId.value, cssVarCls.value),
+			"style": {
+				...mergedStyles.value.root,
+				...!isNested ? mergedStyles.value.section : {},
+				...fullscreen ? mergedStyles.value.mask : {},
+				...style
+			},
+			"aria-live": "polite",
+			"aria-busy": spinning.value
+		}), [spinning.value && (isNested ? createVNode("div", {
+			"class": classNames(`${prefixCls.value}-section`, mergedClassNames.value.section),
+			"style": mergedStyles.value.section
+		}, [indicatorNode]) : indicatorNode), hasChildren && createVNode("div", {
+			"class": classNames(`${prefixCls.value}-container`, mergedClassNames.value.container),
+			"style": mergedStyles.value.container
+		}, [children])]);
+	};
+}, {
+	props: /*@__PURE__*/ mergeDefaults({
+		spinning: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		size: {
+			type: [String, null],
+			required: false
+		},
+		tip: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		description: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		delay: {
+			type: Number,
+			required: false
+		},
+		wrapperClassName: {
+			type: String,
+			required: false
+		},
+		indicator: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		fullscreen: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		percent: {
+			type: [Number, String],
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	}, {
+		spinning: true,
+		delay: 0,
+		fullscreen: false
+	}),
+	name: "ASpin",
+	inheritAttrs: false
+});
+Spin.setDefaultIndicator = (indicator) => {
+	defaultIndicator = indicator;
+};
+Spin.install = (app) => {
+	app.component(Spin.name, Spin);
+};
+//#endregion
+export { Spin as default };

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

@@ -0,0 +1,33 @@
+import { SeedToken } from "../../theme/interface/seeds.js";
+import { AliasToken } from "../../theme/interface/alias.js";
+import { ComponentTokenMap } from "../../theme/interface/components.js";
+import { GetDefaultToken } from "../../theme/interface/cssinjs-utils.js";
+import "../../theme/interface/index.js";
+import "../../theme/internal.js";
+//#region src/spin/style/index.d.ts
+interface ComponentToken {
+  /**
+   * @desc 内容区域高度
+   * @descEN Height of content area
+   */
+  contentHeight: number | string;
+  /**
+   * @desc 加载图标尺寸
+   * @descEN Loading icon size
+   */
+  dotSize: number;
+  /**
+   * @desc 小号加载图标尺寸
+   * @descEN Small loading icon size
+   */
+  dotSizeSM: number;
+  /**
+   * @desc 大号加载图标尺寸
+   * @descEN Large loading icon size
+   */
+  dotSizeLG: number;
+}
+declare const prepareComponentToken: GetDefaultToken<'Spin'>;
+declare const _default: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>, tokenResult?: import("@zboson/cssinjs").UseTokenReturn<ComponentTokenMap, AliasToken, SeedToken> | undefined) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
+//#endregion
+export { ComponentToken, _default as default, prepareComponentToken };