antdv-next 0.0.111 → 1.0.0-alpha.2

package/dist/switch/style/index.js

@@ -0,0 +1,247 @@
+import { genFocusStyle, resetComponent } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.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`,
+			"&::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: "\"\""
+			}
+		},
+		[`&${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, 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 ${token.switchDuration} ease-in-out, padding-inline-end ${token.switchDuration} ease-in-out`,
+			[`${switchInnerCls}-checked, ${switchInnerCls}-unchecked`]: {
+				display: "block",
+				color: token.colorTextLightSolid,
+				fontSize: token.fontSizeSM,
+				transition: `margin-inline-start ${token.switchDuration} ease-in-out, margin-inline-end ${token.switchDuration} ease-in-out`,
+				pointerEvents: "none",
+				minHeight: trackHeight
+			},
+			[`${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()
+			} }
+		}
+	} };
+};
+function 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",
+		[`&: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 };

package/dist/table/Column.d.ts

@@ -0,0 +1,20 @@
+import { AnyObject, EmptyEmit } from "../_util/type.js";
+import { ColumnType } from "./interface.js";
+import * as vue379 from "vue";
+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 `columns` prop. HOC will not work on this.
+ */
+declare const Column: vue379.DefineSetupFnComponent<ColumnProps<AnyObject>, EmptyEmit, SlotsType<ColumnSlots>, ColumnProps<AnyObject> & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue379.PublicProps>;
+//#endregion
+export { Column, ColumnProps };

package/dist/table/Column.js

@@ -0,0 +1,195 @@
+import { defineComponent } from "vue";
+
+//#region src/table/Column.tsx
+/**
+* Syntactic sugar for `columns` prop. HOC will not work on this.
+*/
+const Column = /* @__PURE__ */ defineComponent(() => {
+	return () => null;
+}, {
+	props: {
+		children: { required: false },
+		title: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		sorter: {
+			type: [
+				Boolean,
+				Function,
+				Object
+			],
+			required: false
+		},
+		sortOrder: {
+			type: [String, null],
+			required: false
+		},
+		defaultSortOrder: {
+			type: [String, null],
+			required: false
+		},
+		sortDirections: {
+			type: Array,
+			required: false
+		},
+		sortIcon: {
+			type: Function,
+			required: false
+		},
+		showSorterTooltip: {
+			type: [Boolean, Object],
+			required: false
+		},
+		filtered: {
+			type: Boolean,
+			required: false
+		},
+		filters: {
+			type: Array,
+			required: false
+		},
+		filterDropdown: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		filterOnClose: {
+			type: Boolean,
+			required: false
+		},
+		filterMultiple: {
+			type: Boolean,
+			required: false
+		},
+		filteredValue: {
+			type: [Array, null],
+			required: false
+		},
+		defaultFilteredValue: {
+			type: [Array, null],
+			required: false
+		},
+		filterIcon: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		filterMode: {
+			type: String,
+			required: false
+		},
+		filterSearch: {
+			type: [Boolean, Function],
+			required: false
+		},
+		onFilter: {
+			type: Function,
+			required: false
+		},
+		filterDropdownProps: {
+			type: Object,
+			required: false
+		},
+		filterResetToDefaultFilteredValue: {
+			type: Boolean,
+			required: false
+		},
+		responsive: {
+			type: Array,
+			required: false
+		},
+		filterDropdownOpen: {
+			type: Boolean,
+			required: false
+		},
+		onFilterDropdownOpenChange: {
+			type: Function,
+			required: false
+		},
+		colSpan: {
+			type: Number,
+			required: false
+		},
+		dataIndex: { required: false },
+		render: {
+			type: Function,
+			required: false
+		},
+		shouldCellUpdate: {
+			type: Function,
+			required: false
+		},
+		rowSpan: {
+			type: Number,
+			required: false
+		},
+		width: {
+			type: [Number, String],
+			required: false
+		},
+		minWidth: {
+			type: Number,
+			required: false
+		},
+		onCell: {
+			type: Function,
+			required: false
+		},
+		onCellClick: {
+			type: Function,
+			required: false
+		},
+		key: {
+			type: [String, Number],
+			required: false
+		},
+		className: {
+			type: String,
+			required: false
+		},
+		hidden: {
+			type: Boolean,
+			required: false
+		},
+		fixed: {
+			type: [String, Boolean],
+			required: false
+		},
+		onHeaderCell: {
+			type: Function,
+			required: false
+		},
+		ellipsis: {
+			type: [Object, Boolean],
+			required: false
+		},
+		align: {
+			type: String,
+			required: false
+		},
+		rowScope: {
+			type: String,
+			required: false
+		}
+	},
+	name: "ATableColumn",
+	inheritAttrs: false
+});
+var Column_default = Column;
+
+//#endregion
+export { Column_default as default };

package/dist/table/ColumnGroup.d.ts

@@ -0,0 +1,21 @@
+import { AnyObject, EmptyEmit } from "../_util/type.js";
+import { ColumnType } from "./interface.js";
+import { ColumnProps } from "./Column.js";
+import * as vue381 from "vue";
+import { SlotsType } from "vue";
+
+//#region src/table/ColumnGroup.d.ts
+interface ColumnGroupProps<RecordType = AnyObject> extends Omit<ColumnType<RecordType>, 'children'> {
+  children: ColumnProps<RecordType> | ColumnProps<RecordType>[];
+}
+interface ColumnGroupSlots {
+  default?: () => any;
+}
+/**
+ * Syntactic sugar for `columns` prop. HOC will not work on this.
+ */
+declare const ColumnGroup: vue381.DefineSetupFnComponent<ColumnGroupProps<AnyObject>, EmptyEmit, SlotsType<ColumnGroupSlots>, ColumnGroupProps<AnyObject> & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue381.PublicProps>;
+//#endregion
+export { ColumnGroup };

package/dist/table/ColumnGroup.js

@@ -0,0 +1,198 @@
+import { defineComponent } from "vue";
+
+//#region src/table/ColumnGroup.tsx
+/**
+* Syntactic sugar for `columns` prop. HOC will not work on this.
+*/
+const ColumnGroup = /* @__PURE__ */ defineComponent(() => {
+	return () => null;
+}, {
+	props: {
+		children: {
+			type: [Object, Array],
+			required: true
+		},
+		title: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		sorter: {
+			type: [
+				Boolean,
+				Function,
+				Object
+			],
+			required: false
+		},
+		sortOrder: {
+			type: [String, null],
+			required: false
+		},
+		defaultSortOrder: {
+			type: [String, null],
+			required: false
+		},
+		sortDirections: {
+			type: Array,
+			required: false
+		},
+		sortIcon: {
+			type: Function,
+			required: false
+		},
+		showSorterTooltip: {
+			type: [Boolean, Object],
+			required: false
+		},
+		filtered: {
+			type: Boolean,
+			required: false
+		},
+		filters: {
+			type: Array,
+			required: false
+		},
+		filterDropdown: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		filterOnClose: {
+			type: Boolean,
+			required: false
+		},
+		filterMultiple: {
+			type: Boolean,
+			required: false
+		},
+		filteredValue: {
+			type: [Array, null],
+			required: false
+		},
+		defaultFilteredValue: {
+			type: [Array, null],
+			required: false
+		},
+		filterIcon: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		filterMode: {
+			type: String,
+			required: false
+		},
+		filterSearch: {
+			type: [Boolean, Function],
+			required: false
+		},
+		onFilter: {
+			type: Function,
+			required: false
+		},
+		filterDropdownProps: {
+			type: Object,
+			required: false
+		},
+		filterResetToDefaultFilteredValue: {
+			type: Boolean,
+			required: false
+		},
+		responsive: {
+			type: Array,
+			required: false
+		},
+		filterDropdownOpen: {
+			type: Boolean,
+			required: false
+		},
+		onFilterDropdownOpenChange: {
+			type: Function,
+			required: false
+		},
+		colSpan: {
+			type: Number,
+			required: false
+		},
+		dataIndex: { required: false },
+		render: {
+			type: Function,
+			required: false
+		},
+		shouldCellUpdate: {
+			type: Function,
+			required: false
+		},
+		rowSpan: {
+			type: Number,
+			required: false
+		},
+		width: {
+			type: [Number, String],
+			required: false
+		},
+		minWidth: {
+			type: Number,
+			required: false
+		},
+		onCell: {
+			type: Function,
+			required: false
+		},
+		onCellClick: {
+			type: Function,
+			required: false
+		},
+		key: {
+			type: [String, Number],
+			required: false
+		},
+		className: {
+			type: String,
+			required: false
+		},
+		hidden: {
+			type: Boolean,
+			required: false
+		},
+		fixed: {
+			type: [String, Boolean],
+			required: false
+		},
+		onHeaderCell: {
+			type: Function,
+			required: false
+		},
+		ellipsis: {
+			type: [Object, Boolean],
+			required: false
+		},
+		align: {
+			type: String,
+			required: false
+		},
+		rowScope: {
+			type: String,
+			required: false
+		}
+	},
+	name: "ATableColumnGroup",
+	inheritAttrs: false
+});
+var ColumnGroup_default = ColumnGroup;
+
+//#endregion
+export { ColumnGroup_default as default };

package/dist/table/ExpandIcon.js

@@ -0,0 +1,28 @@
+import { createVNode } from "vue";
+import { clsx } from "@v-c/util";
+
+//#region src/table/ExpandIcon.tsx
+function renderExpandIcon(locale) {
+	return (props) => {
+		const { prefixCls, onExpand, record, expanded, expandable } = props;
+		const iconPrefix = `${prefixCls}-row-expand-icon`;
+		return createVNode("button", {
+			"type": "button",
+			"onClick": (e) => {
+				onExpand(record, e);
+				e.stopPropagation();
+			},
+			"class": clsx(iconPrefix, {
+				[`${iconPrefix}-spaced`]: !expandable,
+				[`${iconPrefix}-expanded`]: expandable && expanded,
+				[`${iconPrefix}-collapsed`]: expandable && !expanded
+			}),
+			"aria-label": expanded ? locale.collapse : locale.expand,
+			"aria-expanded": expanded
+		}, null);
+	};
+}
+var ExpandIcon_default = renderExpandIcon;
+
+//#endregion
+export { ExpandIcon_default as default };