antdv-next 0.0.111 → 1.0.0-alpha.1

package/dist/style/placementArrow.js

@@ -0,0 +1,144 @@
+import { genRoundedArrow } from "./roundedArrow.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/style/placementArrow.ts
+const MAX_VERTICAL_CONTENT_RADIUS = 8;
+function getArrowOffsetToken(options) {
+	const { contentRadius, limitVerticalRadius } = options;
+	const arrowOffset = contentRadius > 12 ? contentRadius + 2 : 12;
+	return {
+		arrowOffsetHorizontal: arrowOffset,
+		arrowOffsetVertical: limitVerticalRadius ? MAX_VERTICAL_CONTENT_RADIUS : arrowOffset
+	};
+}
+function isInject(valid, code) {
+	if (!valid) return {};
+	return code;
+}
+function getArrowStyle(token, colorBg, options) {
+	const { componentCls, boxShadowPopoverArrow, arrowOffsetVertical, arrowOffsetHorizontal } = token;
+	const { arrowDistance = 0, arrowPlacement = {
+		left: true,
+		right: true,
+		top: true,
+		bottom: true
+	} } = options || {};
+	return { [componentCls]: {
+		[`${componentCls}-arrow`]: [{
+			"position": "absolute",
+			"zIndex": 1,
+			"display": "block",
+			...genRoundedArrow(token, colorBg, boxShadowPopoverArrow),
+			"&:before": { background: colorBg }
+		}],
+		...isInject(!!arrowPlacement.top, {
+			[[
+				`&-placement-top > ${componentCls}-arrow`,
+				`&-placement-topLeft > ${componentCls}-arrow`,
+				`&-placement-topRight > ${componentCls}-arrow`
+			].join(",")]: {
+				bottom: arrowDistance,
+				transform: "translateY(100%) rotate(180deg)"
+			},
+			[`&-placement-top > ${componentCls}-arrow`]: {
+				left: {
+					_skip_check_: true,
+					value: "50%"
+				},
+				transform: "translateX(-50%) translateY(100%) rotate(180deg)"
+			},
+			"&-placement-topLeft": {
+				"--arrow-offset-horizontal": arrowOffsetHorizontal,
+				[`> ${componentCls}-arrow`]: { left: {
+					_skip_check_: true,
+					value: arrowOffsetHorizontal
+				} }
+			},
+			"&-placement-topRight": {
+				"--arrow-offset-horizontal": `calc(100% - ${unit(arrowOffsetHorizontal)})`,
+				[`> ${componentCls}-arrow`]: { right: {
+					_skip_check_: true,
+					value: arrowOffsetHorizontal
+				} }
+			}
+		}),
+		...isInject(!!arrowPlacement.bottom, {
+			[[
+				`&-placement-bottom > ${componentCls}-arrow`,
+				`&-placement-bottomLeft > ${componentCls}-arrow`,
+				`&-placement-bottomRight > ${componentCls}-arrow`
+			].join(",")]: {
+				top: arrowDistance,
+				transform: `translateY(-100%)`
+			},
+			[`&-placement-bottom > ${componentCls}-arrow`]: {
+				left: {
+					_skip_check_: true,
+					value: "50%"
+				},
+				transform: `translateX(-50%) translateY(-100%)`
+			},
+			"&-placement-bottomLeft": {
+				"--arrow-offset-horizontal": arrowOffsetHorizontal,
+				[`> ${componentCls}-arrow`]: { left: {
+					_skip_check_: true,
+					value: arrowOffsetHorizontal
+				} }
+			},
+			"&-placement-bottomRight": {
+				"--arrow-offset-horizontal": `calc(100% - ${unit(arrowOffsetHorizontal)})`,
+				[`> ${componentCls}-arrow`]: { right: {
+					_skip_check_: true,
+					value: arrowOffsetHorizontal
+				} }
+			}
+		}),
+		...isInject(!!arrowPlacement.left, {
+			[[
+				`&-placement-left > ${componentCls}-arrow`,
+				`&-placement-leftTop > ${componentCls}-arrow`,
+				`&-placement-leftBottom > ${componentCls}-arrow`
+			].join(",")]: {
+				right: {
+					_skip_check_: true,
+					value: arrowDistance
+				},
+				transform: "translateX(100%) rotate(90deg)"
+			},
+			[`&-placement-left > ${componentCls}-arrow`]: {
+				top: {
+					_skip_check_: true,
+					value: "50%"
+				},
+				transform: "translateY(-50%) translateX(100%) rotate(90deg)"
+			},
+			[`&-placement-leftTop > ${componentCls}-arrow`]: { top: arrowOffsetVertical },
+			[`&-placement-leftBottom > ${componentCls}-arrow`]: { bottom: arrowOffsetVertical }
+		}),
+		...isInject(!!arrowPlacement.right, {
+			[[
+				`&-placement-right > ${componentCls}-arrow`,
+				`&-placement-rightTop > ${componentCls}-arrow`,
+				`&-placement-rightBottom > ${componentCls}-arrow`
+			].join(",")]: {
+				left: {
+					_skip_check_: true,
+					value: arrowDistance
+				},
+				transform: "translateX(-100%) rotate(-90deg)"
+			},
+			[`&-placement-right > ${componentCls}-arrow`]: {
+				top: {
+					_skip_check_: true,
+					value: "50%"
+				},
+				transform: "translateY(-50%) translateX(-100%) rotate(-90deg)"
+			},
+			[`&-placement-rightTop > ${componentCls}-arrow`]: { top: arrowOffsetVertical },
+			[`&-placement-rightBottom > ${componentCls}-arrow`]: { bottom: arrowOffsetVertical }
+		})
+	} };
+}
+
+//#endregion
+export { MAX_VERTICAL_CONTENT_RADIUS, getArrowStyle as default, getArrowOffsetToken };

package/dist/style/roundedArrow.d.ts

@@ -0,0 +1,15 @@
+import "../theme/interface/index.js";
+import "../theme/internal.js";
+import { CSSObject } from "@antdv-next/cssinjs";
+
+//#region src/style/roundedArrow.d.ts
+interface ArrowToken {
+  /** @internal */
+  arrowShadowWidth: number;
+  /** @internal */
+  arrowPath: string;
+  /** @internal */
+  arrowPolygon: string;
+}
+//#endregion
+export { ArrowToken };

package/dist/style/roundedArrow.js

@@ -0,0 +1,69 @@
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/style/roundedArrow.ts
+function getArrowToken(token) {
+	const { sizePopupArrow, borderRadiusXS, borderRadiusOuter } = token;
+	const unitWidth = sizePopupArrow / 2;
+	const ax = 0;
+	const ay = unitWidth;
+	const bx = borderRadiusOuter * 1 / Math.sqrt(2);
+	const by = unitWidth - borderRadiusOuter * (1 - 1 / Math.sqrt(2));
+	const cx = unitWidth - borderRadiusXS * (1 / Math.sqrt(2));
+	const cy = borderRadiusOuter * (Math.sqrt(2) - 1) + borderRadiusXS * (1 / Math.sqrt(2));
+	const dx = 2 * unitWidth - cx;
+	const dy = cy;
+	const ex = 2 * unitWidth - bx;
+	const ey = by;
+	const fx = 2 * unitWidth - ax;
+	const fy = ay;
+	const shadowWidth = unitWidth * Math.sqrt(2) + borderRadiusOuter * (Math.sqrt(2) - 2);
+	const polygonOffset = borderRadiusOuter * (Math.sqrt(2) - 1);
+	const arrowPolygon = `polygon(${polygonOffset}px 100%, 50% ${polygonOffset}px, ${2 * unitWidth - polygonOffset}px 100%, ${polygonOffset}px 100%)`;
+	return {
+		arrowShadowWidth: shadowWidth,
+		arrowPath: `path('M ${ax} ${ay} A ${borderRadiusOuter} ${borderRadiusOuter} 0 0 0 ${bx} ${by} L ${cx} ${cy} A ${borderRadiusXS} ${borderRadiusXS} 0 0 1 ${dx} ${dy} L ${ex} ${ey} A ${borderRadiusOuter} ${borderRadiusOuter} 0 0 0 ${fx} ${fy} Z')`,
+		arrowPolygon
+	};
+}
+function genRoundedArrow(token, bgColor, boxShadow) {
+	const { sizePopupArrow, arrowPolygon, arrowPath, arrowShadowWidth, borderRadiusXS, calc } = token;
+	return {
+		"pointerEvents": "none",
+		"width": sizePopupArrow,
+		"height": sizePopupArrow,
+		"overflow": "hidden",
+		"&::before": {
+			position: "absolute",
+			bottom: 0,
+			insetInlineStart: 0,
+			width: sizePopupArrow,
+			height: calc(sizePopupArrow).div(2).equal(),
+			background: bgColor,
+			clipPath: {
+				_multi_value_: true,
+				value: [arrowPolygon, arrowPath]
+			},
+			content: "\"\""
+		},
+		"&::after": {
+			content: "\"\"",
+			position: "absolute",
+			width: arrowShadowWidth,
+			height: arrowShadowWidth,
+			bottom: 0,
+			insetInline: 0,
+			margin: "auto",
+			borderRadius: {
+				_skip_check_: true,
+				value: `0 0 ${unit(borderRadiusXS)} 0`
+			},
+			transform: "translateY(50%) rotate(-135deg)",
+			boxShadow,
+			zIndex: 0,
+			background: "transparent"
+		}
+	};
+}
+
+//#endregion
+export { genRoundedArrow, getArrowToken };

package/dist/switch/index.d.ts

@@ -0,0 +1,54 @@
+import { VueNode } from "../_util/type.js";
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import * as vue167 from "vue";
+import { SlotsType } from "vue";
+import { SwitchChangeEventHandler, SwitchClickEventHandler } from "@v-c/switch";
+
+//#region src/switch/index.d.ts
+type SwitchSize = 'small' | 'default';
+type SemanticName = 'root' | 'content';
+type SwitchClassNamesType = SemanticClassNamesType<SwitchProps, SemanticName>;
+type SwitchStylesType = SemanticStylesType<SwitchProps, SemanticName>;
+interface SwitchProps extends ComponentBaseProps {
+  size?: SwitchSize;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  /**
+   * Alias for `checked`.
+   * @since 5.12.0
+   */
+  value?: boolean;
+  /**
+   * Alias for `defaultChecked`.
+   * @since 5.12.0
+   */
+  defaultValue?: boolean;
+  checkedChildren?: VueNode;
+  unCheckedChildren?: VueNode;
+  disabled?: boolean;
+  loading?: boolean;
+  autoFocus?: boolean;
+  title?: string;
+  tabIndex?: number;
+  id?: string;
+  classes?: SwitchClassNamesType;
+  styles?: SwitchStylesType;
+}
+interface SwitchEmits {
+  'change': SwitchChangeEventHandler;
+  'click': SwitchClickEventHandler;
+  'update:checked': (checked: boolean) => void;
+  'update:value': (checked: boolean) => void;
+  [key: string]: (...args: any[]) => any;
+}
+interface SwitchSlots {
+  checkedChildren: () => any;
+  unCheckedChildren: () => any;
+}
+declare const Switch: vue167.DefineSetupFnComponent<SwitchProps, SwitchEmits, SlotsType<SwitchSlots>, SwitchProps & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue167.PublicProps>;
+//#endregion
+export { Switch, SwitchEmits, SwitchProps, SwitchSize, SwitchSlots };

package/dist/switch/index.js

@@ -0,0 +1,192 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass, useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
+import { useSize } from "../config-provider/hooks/useSize.js";
+import { useDisabledContext } from "../config-provider/DisabledContext.js";
+import wave_default from "../_util/wave/index.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 "@antdv-next/icons";
+import { omit } from "es-toolkit";
+import VcSwitch from "@v-c/switch";
+
+//#region src/switch/index.tsx
+const keys = [
+	"prefixCls",
+	"size",
+	"disabled",
+	"loading",
+	"rootClass",
+	"style",
+	"checked",
+	"value",
+	"defaultChecked",
+	"defaultValue",
+	"styles",
+	"classes",
+	"checkedChildren",
+	"unCheckedChildren"
+];
+const Switch = /* @__PURE__ */ defineComponent((props, { slots, emit, attrs }) => {
+	const checked = shallowRef(props?.checked ?? props?.value ?? props?.defaultChecked ?? props?.defaultValue ?? false);
+	watch([() => props.checked, () => props.value], ([newChecked, newValue]) => {
+		checked.value = newChecked ?? newValue ?? false;
+	});
+	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);
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			size: mergedSize.value,
+			disabled: mergedDisabled.value
+		};
+	});
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, styles), useToProps(mergedProps));
+	const changeHandler = (...args) => {
+		emit("change", ...args);
+	};
+	const handleVMHandler = (value) => {
+		emit("update:checked", value);
+		emit("update:value", value);
+	};
+	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": `${prefixCls.value}-handle` }, [loading && createVNode(LoadingOutlined, { "class": `${prefixCls.value}-loading-icon` }, null)]);
+		const classes$1 = 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,
+			...contextStyle.value,
+			...style
+		};
+		const restProps = omit(props, keys);
+		return createVNode(wave_default, {
+			"component": "Switch",
+			"disabled": mergedDisabled.value
+		}, { default: () => [createVNode(VcSwitch, mergeProps(restAttrs, restProps, {
+			"classNames": mergedClassNames.value,
+			"styles": mergedStyles.value,
+			"checked": checked.value,
+			"onChange": changeHandler,
+			"prefixCls": prefixCls.value,
+			"className": classes$1,
+			"style": mergedStyle,
+			"disabled": mergedDisabled.value,
+			"loadingIcon": loadingIcon,
+			"unCheckedChildren": unCheckedChildren,
+			"checkedChildren": checkedChildren
+		}, { "onUpdate:checked": handleVMHandler }), null)] });
+	};
+}, {
+	emits: [
+		"change",
+		"click",
+		"update:checked",
+		"update:value"
+	],
+	props: {
+		size: {
+			type: String,
+			required: false
+		},
+		checked: {
+			type: Boolean,
+			required: false
+		},
+		defaultChecked: {
+			type: Boolean,
+			required: false
+		},
+		value: {
+			type: Boolean,
+			required: false
+		},
+		defaultValue: {
+			type: Boolean,
+			required: false
+		},
+		checkedChildren: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		unCheckedChildren: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false
+		},
+		autoFocus: {
+			type: Boolean,
+			required: false
+		},
+		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
+		}
+	},
+	name: "ASwitch",
+	inheritAttrs: false
+});
+Switch.install = (app) => {
+	app.component(Switch.name, Switch);
+};
+var switch_default = Switch;
+
+//#endregion
+export { switch_default as default };

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

@@ -0,0 +1,73 @@
+import "../../theme/internal.js";
+import "vue";
+
+//#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;
+}
+//#endregion
+export { ComponentToken };