@zboson/ui 0.0.0-stage → 0.0.1

package/dist/switch/index.js

@@ -0,0 +1,262 @@
+import { devUseWarning, isDev } from "../_util/warning.js";
+import { useComponentBaseConfig } 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 } from "../_util/tools.js";
+import { useDisabledContext } from "../config-provider/DisabledContext.js";
+import wave_default from "../_util/wave/index.js";
+import { isValueEqual } from "../_util/isEqual.js";
+import style_default from "./style/index.js";
+import { computed, createVNode, defineComponent, mergeProps, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+import { LoadingOutlined } from "@zboson/icons";
+import { omit } from "es-toolkit/compat";
+import VcSwitch from "@v-c/switch";
+//#region src/switch/index.tsx
+const keys = [
+	"prefixCls",
+	"size",
+	"disabled",
+	"loading",
+	"rootClass",
+	"style",
+	"checked",
+	"value",
+	"defaultChecked",
+	"defaultValue",
+	"checkedValue",
+	"unCheckedValue",
+	"styles",
+	"classes",
+	"checkedChildren",
+	"unCheckedChildren"
+];
+const Switch = /* @__PURE__ */ defineComponent((props, { slots, emit, attrs, expose }) => {
+	const mergedCheckedValue = computed(() => props.checkedValue ?? true);
+	const mergedUnCheckedValue = computed(() => props.unCheckedValue ?? false);
+	const currentValue = shallowRef(props?.checked ?? props?.value ?? props?.defaultChecked ?? props?.defaultValue ?? mergedUnCheckedValue.value);
+	watch([() => props.checked, () => props.value], ([newChecked, newValue]) => {
+		if (newChecked !== void 0) currentValue.value = newChecked;
+		else if (newValue !== void 0) currentValue.value = newValue;
+		else currentValue.value = mergedUnCheckedValue.value;
+	});
+	const isChecked = computed(() => isValueEqual(currentValue.value, mergedCheckedValue.value));
+	const { prefixCls, direction, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("switch", props);
+	const { classes, styles, size: customizeSize } = toPropsRefs(props, "size", "classes", "styles");
+	const disabled = useDisabledContext();
+	const mergedDisabled = computed(() => (props.disabled ?? disabled.value) || props.loading);
+	const [hashId, cssVarCls] = style_default(prefixCls);
+	const mergedSize = useSize(customizeSize);
+	if (isDev) devUseWarning("Switch").deprecated(props.size !== "default", "size=\"default\"", "size=\"medium\"");
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			size: mergedSize.value,
+			disabled: mergedDisabled.value
+		};
+	});
+	const contextStyleRoot = useSemanticRootStyle(contextStyle);
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, contextStyleRoot, styles), useToProps(mergedProps));
+	const changeHandler = (...args) => {
+		emit("change", ...args);
+	};
+	const clickHandler = (...args) => {
+		emit("click", ...args);
+	};
+	const handleVMHandler = (checked) => {
+		const newValue = checked ? mergedCheckedValue.value : mergedUnCheckedValue.value;
+		if (props.checked === void 0 && props.value === void 0) currentValue.value = newValue;
+		emit("update:checked", newValue);
+		emit("update:value", newValue);
+	};
+	const switchRef = shallowRef();
+	expose({
+		nativeElement: switchRef,
+		focus: () => switchRef.value?.focus?.(),
+		blur: () => switchRef.value?.blur?.()
+	});
+	return () => {
+		const { loading, rootClass } = props;
+		const checkedChildren = getSlotPropsFnRun(slots, props, "checkedChildren");
+		const unCheckedChildren = getSlotPropsFnRun(slots, props, "unCheckedChildren");
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const loadingIcon = createVNode("div", {
+			"class": clsx(`${prefixCls.value}-handle`, mergedClassNames.value.indicator),
+			"style": mergedStyles.value.indicator
+		}, [loading && createVNode(LoadingOutlined, { "class": `${prefixCls.value}-loading-icon` }, null)]);
+		const classes = clsx(contextClassName.value, {
+			[`${prefixCls.value}-small`]: mergedSize.value === "small",
+			[`${prefixCls.value}-loading`]: loading,
+			[`${prefixCls.value}-rtl`]: direction.value === "rtl"
+		}, className, rootClass, mergedClassNames.value.root, hashId.value, cssVarCls.value);
+		const mergedStyle = {
+			...mergedStyles.value.root,
+			...style
+		};
+		const restProps = omit(props, keys);
+		return createVNode(wave_default, {
+			"component": "Switch",
+			"disabled": mergedDisabled.value
+		}, { default: () => [createVNode(VcSwitch, mergeProps({ "ref": switchRef }, restAttrs, restProps, {
+			"classNames": mergedClassNames.value,
+			"styles": mergedStyles.value,
+			"checked": isChecked.value,
+			"onChange": changeHandler,
+			"onClick": clickHandler,
+			"prefixCls": prefixCls.value,
+			"className": classes,
+			"style": mergedStyle,
+			"disabled": mergedDisabled.value,
+			"loadingIcon": loadingIcon,
+			"unCheckedChildren": unCheckedChildren,
+			"checkedChildren": checkedChildren
+		}, { "onUpdate:checked": handleVMHandler }), null)] });
+	};
+}, {
+	props: {
+		size: {
+			type: [String, null],
+			required: false
+		},
+		checked: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		defaultChecked: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		value: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		defaultValue: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		checkedValue: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		unCheckedValue: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		checkedChildren: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		unCheckedChildren: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		loading: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		autoFocus: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		tabIndex: {
+			type: Number,
+			required: false
+		},
+		id: {
+			type: 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
+		}
+	},
+	emits: [
+		"change",
+		"click",
+		"update:checked",
+		"update:value"
+	],
+	name: "ASwitch",
+	inheritAttrs: false
+});
+Switch.install = (app) => {
+	app.component(Switch.name, Switch);
+};
+//#endregion
+export { Switch as default };

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

@@ -0,0 +1,78 @@
+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/switch/style/index.d.ts
+interface ComponentToken {
+  /**
+   *  @desc 开关高度
+   *  @descEN Height of Switch
+   */
+  trackHeight: number | string;
+  /**
+   * @desc 小号开关高度
+   * @descEN Height of small Switch
+   */
+  trackHeightSM: number | string;
+  /**
+   * @desc 开关最小宽度
+   * @descEN Minimum width of Switch
+   */
+  trackMinWidth: number | string;
+  /**
+   * @desc 小号开关最小宽度
+   * @descEN Minimum width of small Switch
+   */
+  trackMinWidthSM: number | string;
+  /**
+   * @desc 开关内边距
+   * @descEN Padding of Switch
+   */
+  trackPadding: number;
+  /**
+   * @desc 开关把手背景色
+   * @descEN Background color of Switch handle
+   */
+  handleBg: string;
+  /**
+   * @desc 开关把手阴影
+   * @descEN Shadow of Switch handle
+   */
+  handleShadow: string;
+  /**
+   * @desc 开关把手大小
+   * @descEN Size of Switch handle
+   */
+  handleSize: number;
+  /**
+   * @desc 小号开关把手大小
+   * @descEN Size of small Switch handle
+   */
+  handleSizeSM: number;
+  /**
+   * @desc 内容区域最小边距
+   * @descEN Minimum margin of content area
+   */
+  innerMinMargin: number;
+  /**
+   * @desc 内容区域最大边距
+   * @descEN Maximum margin of content area
+   */
+  innerMaxMargin: number;
+  /**
+   * @desc 小号开关内容区域最小边距
+   * @descEN Minimum margin of content area of small Switch
+   */
+  innerMinMarginSM: number;
+  /**
+   * @desc 小号开关内容区域最大边距
+   * @descEN Maximum margin of content area of small Switch
+   */
+  innerMaxMarginSM: number;
+}
+declare const prepareComponentToken: GetDefaultToken<'Switch'>;
+declare const _default: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>, tokenResult?: import("@antdv-next/cssinjs").UseTokenReturn<ComponentTokenMap, AliasToken, SeedToken> | undefined) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
+//#endregion
+export { ComponentToken, _default as default, prepareComponentToken };

package/dist/switch/style/index.js

@@ -0,0 +1,253 @@
+import { genFocusStyle, resetComponent } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { genNoMotionRawStyle, genNoMotionStyle } from "../../style/motion/util.js";
+import { unit } from "@antdv-next/cssinjs";
+import { FastColor } from "@ant-design/fast-color";
+//#region src/switch/style/index.ts
+const genSwitchSmallStyle = (token) => {
+	const { componentCls, trackHeightSM, trackPadding, trackMinWidthSM, innerMinMarginSM, innerMaxMarginSM, handleSizeSM, calc } = token;
+	const switchInnerCls = `${componentCls}-inner`;
+	const trackPaddingCalc = unit(calc(handleSizeSM).add(calc(trackPadding).mul(2)).equal());
+	const innerMaxMarginCalc = unit(calc(innerMaxMarginSM).mul(2).equal());
+	return { [componentCls]: { [`&${componentCls}-small`]: {
+		minWidth: trackMinWidthSM,
+		height: trackHeightSM,
+		lineHeight: unit(trackHeightSM),
+		[`${componentCls}-inner`]: {
+			paddingInlineStart: innerMaxMarginSM,
+			paddingInlineEnd: innerMinMarginSM,
+			[`${switchInnerCls}-checked, ${switchInnerCls}-unchecked`]: { minHeight: trackHeightSM },
+			[`${switchInnerCls}-checked`]: {
+				marginInlineStart: `calc(-100% + ${trackPaddingCalc} - ${innerMaxMarginCalc})`,
+				marginInlineEnd: `calc(100% - ${trackPaddingCalc} + ${innerMaxMarginCalc})`
+			},
+			[`${switchInnerCls}-unchecked`]: {
+				marginTop: calc(trackHeightSM).mul(-1).equal(),
+				marginInlineStart: 0,
+				marginInlineEnd: 0
+			}
+		},
+		[`${componentCls}-handle`]: {
+			width: handleSizeSM,
+			height: handleSizeSM
+		},
+		[`${componentCls}-loading-icon`]: {
+			top: calc(calc(handleSizeSM).sub(token.switchLoadingIconSize)).div(2).equal(),
+			fontSize: token.switchLoadingIconSize
+		},
+		[`&${componentCls}-checked`]: {
+			[`${componentCls}-inner`]: {
+				paddingInlineStart: innerMinMarginSM,
+				paddingInlineEnd: innerMaxMarginSM,
+				[`${switchInnerCls}-checked`]: {
+					marginInlineStart: 0,
+					marginInlineEnd: 0
+				},
+				[`${switchInnerCls}-unchecked`]: {
+					marginInlineStart: `calc(100% - ${trackPaddingCalc} + ${innerMaxMarginCalc})`,
+					marginInlineEnd: `calc(-100% + ${trackPaddingCalc} - ${innerMaxMarginCalc})`
+				}
+			},
+			[`${componentCls}-handle`]: { insetInlineStart: `calc(100% - ${unit(calc(handleSizeSM).add(trackPadding).equal())})` }
+		},
+		[`&:not(${componentCls}-disabled):active`]: {
+			[`&:not(${componentCls}-checked) ${switchInnerCls}`]: { [`${switchInnerCls}-unchecked`]: {
+				marginInlineStart: calc(token.marginXXS).div(2).equal(),
+				marginInlineEnd: calc(token.marginXXS).mul(-1).div(2).equal()
+			} },
+			[`&${componentCls}-checked ${switchInnerCls}`]: { [`${switchInnerCls}-checked`]: {
+				marginInlineStart: calc(token.marginXXS).mul(-1).div(2).equal(),
+				marginInlineEnd: calc(token.marginXXS).div(2).equal()
+			} }
+		}
+	} } };
+};
+const genSwitchLoadingStyle = (token) => {
+	const { componentCls, handleSize, calc } = token;
+	return { [componentCls]: {
+		[`${componentCls}-loading-icon${token.iconCls}`]: {
+			position: "relative",
+			top: calc(calc(handleSize).sub(token.fontSize)).div(2).equal(),
+			color: token.switchLoadingIconColor,
+			verticalAlign: "top"
+		},
+		[`&${componentCls}-checked ${componentCls}-loading-icon`]: { color: token.switchColor }
+	} };
+};
+const genSwitchHandleStyle = (token) => {
+	const { componentCls, trackPadding, handleBg, handleShadow, handleSize, calc } = token;
+	const switchHandleCls = `${componentCls}-handle`;
+	return { [componentCls]: {
+		[switchHandleCls]: {
+			position: "absolute",
+			top: trackPadding,
+			insetInlineStart: trackPadding,
+			width: handleSize,
+			height: handleSize,
+			transition: `all ${token.switchDuration} ease-in-out`,
+			...genNoMotionStyle(),
+			"&::before": {
+				position: "absolute",
+				top: 0,
+				insetInlineEnd: 0,
+				bottom: 0,
+				insetInlineStart: 0,
+				backgroundColor: handleBg,
+				borderRadius: calc(handleSize).div(2).equal(),
+				boxShadow: handleShadow,
+				transition: `all ${token.switchDuration} ease-in-out`,
+				content: "\"\"",
+				...genNoMotionRawStyle()
+			}
+		},
+		[`&${componentCls}-checked ${switchHandleCls}`]: { insetInlineStart: `calc(100% - ${unit(calc(handleSize).add(trackPadding).equal())})` },
+		[`&:not(${componentCls}-disabled):active`]: {
+			[`${switchHandleCls}::before`]: {
+				insetInlineEnd: token.switchHandleActiveInset,
+				insetInlineStart: 0
+			},
+			[`&${componentCls}-checked ${switchHandleCls}::before`]: {
+				insetInlineEnd: 0,
+				insetInlineStart: token.switchHandleActiveInset
+			}
+		}
+	} };
+};
+const genSwitchInnerStyle = (token) => {
+	const { componentCls, trackHeight, trackPadding, innerMinMargin, innerMaxMargin, handleSize, switchDuration, calc } = token;
+	const switchInnerCls = `${componentCls}-inner`;
+	const trackPaddingCalc = unit(calc(handleSize).add(calc(trackPadding).mul(2)).equal());
+	const innerMaxMarginCalc = unit(calc(innerMaxMargin).mul(2).equal());
+	return { [componentCls]: {
+		[switchInnerCls]: {
+			display: "block",
+			overflow: "hidden",
+			borderRadius: 100,
+			height: "100%",
+			paddingInlineStart: innerMaxMargin,
+			paddingInlineEnd: innerMinMargin,
+			transition: [`padding-inline-start`, `padding-inline-end`].map((prop) => `${prop} ${switchDuration} ease-in-out`).join(", "),
+			...genNoMotionStyle(),
+			[`${switchInnerCls}-checked, ${switchInnerCls}-unchecked`]: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				color: token.colorTextLightSolid,
+				fontSize: token.fontSizeSM,
+				pointerEvents: "none",
+				minHeight: trackHeight,
+				transition: [`margin-inline-start`, `margin-inline-end`].map((prop) => `${prop} ${switchDuration} ease-in-out`).join(", "),
+				...genNoMotionStyle()
+			},
+			[`${switchInnerCls}-checked`]: {
+				marginInlineStart: `calc(-100% + ${trackPaddingCalc} - ${innerMaxMarginCalc})`,
+				marginInlineEnd: `calc(100% - ${trackPaddingCalc} + ${innerMaxMarginCalc})`
+			},
+			[`${switchInnerCls}-unchecked`]: {
+				marginTop: calc(trackHeight).mul(-1).equal(),
+				marginInlineStart: 0,
+				marginInlineEnd: 0
+			}
+		},
+		[`&${componentCls}-checked ${switchInnerCls}`]: {
+			paddingInlineStart: innerMinMargin,
+			paddingInlineEnd: innerMaxMargin,
+			[`${switchInnerCls}-checked`]: {
+				marginInlineStart: 0,
+				marginInlineEnd: 0
+			},
+			[`${switchInnerCls}-unchecked`]: {
+				marginInlineStart: `calc(100% - ${trackPaddingCalc} + ${innerMaxMarginCalc})`,
+				marginInlineEnd: `calc(-100% + ${trackPaddingCalc} - ${innerMaxMarginCalc})`
+			}
+		},
+		[`&:not(${componentCls}-disabled):active`]: {
+			[`&:not(${componentCls}-checked) ${switchInnerCls}`]: { [`${switchInnerCls}-unchecked`]: {
+				marginInlineStart: calc(trackPadding).mul(2).equal(),
+				marginInlineEnd: calc(trackPadding).mul(-1).mul(2).equal()
+			} },
+			[`&${componentCls}-checked ${switchInnerCls}`]: { [`${switchInnerCls}-checked`]: {
+				marginInlineStart: calc(trackPadding).mul(-1).mul(2).equal(),
+				marginInlineEnd: calc(trackPadding).mul(2).equal()
+			} }
+		}
+	} };
+};
+const genSwitchStyle = (token) => {
+	const { componentCls, trackHeight, trackMinWidth } = token;
+	return { [componentCls]: {
+		...resetComponent(token),
+		position: "relative",
+		display: "inline-block",
+		boxSizing: "border-box",
+		minWidth: trackMinWidth,
+		height: trackHeight,
+		lineHeight: unit(trackHeight),
+		verticalAlign: "middle",
+		background: token.colorTextQuaternary,
+		border: "0",
+		borderRadius: 100,
+		cursor: "pointer",
+		transition: `all ${token.motionDurationMid}`,
+		userSelect: "none",
+		...genNoMotionStyle(),
+		[`&:hover:not(${componentCls}-disabled)`]: { background: token.colorTextTertiary },
+		...genFocusStyle(token),
+		[`&${componentCls}-checked`]: {
+			background: token.switchColor,
+			[`&:hover:not(${componentCls}-disabled)`]: { background: token.colorPrimaryHover }
+		},
+		[`&${componentCls}-loading, &${componentCls}-disabled`]: {
+			cursor: "not-allowed",
+			opacity: token.switchDisabledOpacity,
+			"*": {
+				boxShadow: "none",
+				cursor: "not-allowed"
+			}
+		},
+		[`&${componentCls}-rtl`]: { direction: "rtl" }
+	} };
+};
+const prepareComponentToken = (token) => {
+	const { fontSize, lineHeight, controlHeight, colorWhite } = token;
+	const height = fontSize * lineHeight;
+	const heightSM = controlHeight / 2;
+	const padding = 2;
+	const handleSize = height - padding * 2;
+	const handleSizeSM = heightSM - padding * 2;
+	return {
+		trackHeight: height,
+		trackHeightSM: heightSM,
+		trackMinWidth: handleSize * 2 + padding * 4,
+		trackMinWidthSM: handleSizeSM * 2 + padding * 2,
+		trackPadding: padding,
+		handleBg: colorWhite,
+		handleSize,
+		handleSizeSM,
+		handleShadow: `0 2px 4px 0 ${new FastColor("#00230b").setA(.2).toRgbString()}`,
+		innerMinMargin: handleSize / 2,
+		innerMaxMargin: handleSize + padding + padding * 2,
+		innerMinMarginSM: handleSizeSM / 2,
+		innerMaxMarginSM: handleSizeSM + padding + padding * 2
+	};
+};
+var style_default = genStyleHooks("Switch", (token) => {
+	const switchToken = mergeToken(token, {
+		switchDuration: token.motionDurationMid,
+		switchColor: token.colorPrimary,
+		switchDisabledOpacity: token.opacityLoading,
+		switchLoadingIconSize: token.calc(token.fontSizeIcon).mul(.75).equal(),
+		switchLoadingIconColor: `rgba(0, 0, 0, ${token.opacityLoading})`,
+		switchHandleActiveInset: "-30%"
+	});
+	return [
+		genSwitchStyle(switchToken),
+		genSwitchInnerStyle(switchToken),
+		genSwitchHandleStyle(switchToken),
+		genSwitchLoadingStyle(switchToken),
+		genSwitchSmallStyle(switchToken)
+	];
+}, prepareComponentToken);
+//#endregion
+export { style_default as default, prepareComponentToken };

package/dist/table/Column.d.ts

@@ -0,0 +1,20 @@
+import { AnyObject, EmptyEmit } from "../_util/type.js";
+import { ColumnType } from "./interface.js";
+import { SlotsType } from "vue";
+//#region src/table/Column.d.ts
+interface ColumnProps<RecordType = AnyObject> extends ColumnType<RecordType> {
+  children?: null;
+}
+interface ColumnSlots {
+  default?: () => any;
+}
+/**
+ * Syntactic sugar for the `columns` prop.
+ *
+ * Kebab-case template attributes (`data-index`, `min-width`, ...) are
+ * remapped to the camelCase field names the table understands in
+ * `convertColumnsToColumnProps` (see `./utils.ts`).
+ */
+declare const Column: import("vue").DefineSetupFnComponent<ColumnProps<AnyObject>, EmptyEmit, SlotsType<ColumnSlots>, ColumnProps<AnyObject>, import("vue").PublicProps>;
+//#endregion
+export { ColumnProps, ColumnSlots, Column as default };