antdv-next 1.0.0-beta.2 → 1.0.0-rc.1

package/dist/theme/index.d.mts

@@ -16,8 +16,7 @@ declare function useToken(): {
   hashId: vue2.Ref<string, string>;
 };
 declare const _default: {
-  /** Default seedToken */
-  defaultSeed: SeedToken;
+  /** Default seedToken */defaultSeed: SeedToken;
   useToken: typeof useToken;
   defaultAlgorithm: typeof derivative;
   darkAlgorithm: _antdv_next_cssinjs0.DerivativeFunc<SeedToken, MapToken>;

package/dist/theme/interface/maps/index.d.mts

@@ -6,7 +6,6 @@ import { HeightMapToken, SizeMapToken } from "./size.mjs";
 import { StyleMapToken } from "./style.mjs";
 
 //#region src/theme/interface/maps/index.d.ts
-
 interface CommonMapToken extends StyleMapToken {
   /**
    * @desc 动效播放速度，快速。用于小型元素动画交互

package/dist/theme/useToken.mjs

@@ -69,10 +69,10 @@ function useToken() {
 	const salt = computed(() => `${version_default}-${designContext.value.hashed || ""}`);
 	const mergedTheme = computed(() => designContext.value?.theme || theme_default);
 	const cssVar = computed(() => {
-		const cssVar$1 = designContext.value.cssVar;
+		const cssVar = designContext.value.cssVar;
 		return {
-			prefix: cssVar$1?.prefix || "ant",
-			key: cssVar$1?.key || "css-var-root"
+			prefix: cssVar?.prefix ?? "ant",
+			key: cssVar?.key ?? "css-var-root"
 		};
 	});
 	const cachedToken = useCacheToken(mergedTheme, computed(() => [seed_default, designContext.value.token]), computed(() => {

package/dist/theme/util/genStyleUtils.mjs

@@ -17,7 +17,7 @@ const { genComponentStyleHook, genStyleHooks, genSubStyleComponent } = genStyleU
 		});
 	},
 	useToken() {
-		const [theme, realToken, hashId, token, cssVar] = useToken();
+		const [theme, realToken, hashId, token, cssVar, zeroRuntime] = useToken();
 		return {
 			theme,
 			realToken,
@@ -26,7 +26,8 @@ const { genComponentStyleHook, genStyleHooks, genSubStyleComponent } = genStyleU
 			cssVar: computed(() => cssVar?.value ?? {
 				prefix: "",
 				key: ""
-			})
+			}),
+			zeroRuntime
 		};
 	},
 	useCSP: () => {

package/dist/time-picker/index.d.mts

@@ -1,21 +1,45 @@
 import { AnyObject, VueNode } from "../_util/type.mjs";
-import { SemanticClassNames, SemanticClassNamesType, SemanticStyles, SemanticStylesType } from "../_util/hooks/useMergeSemantic.mjs";
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.mjs";
 import "../_util/hooks/index.mjs";
 import { InputStatus } from "../_util/statusUtils.mjs";
 import "../date-picker/generatePicker/index.mjs";
 import { PickerProps as PickerProps$1, RangePickerProps as RangePickerProps$1 } from "../date-picker/generatePicker/interface.mjs";
-import * as vue53 from "vue";
+import * as vue13 from "vue";
 import { CSSProperties, SlotsType } from "vue";
 import { PickerMode } from "@v-c/picker";
 
 //#region src/time-picker/index.d.ts
-type PanelSemanticName = 'root' | 'content' | 'item' | 'footer' | 'container';
-type PickerSemanticName = 'root' | 'prefix' | 'input' | 'suffix';
-type TimePickerClassNames = SemanticClassNamesType<TimePickerProps, PickerSemanticName, {
-  popup?: string | SemanticClassNames<PanelSemanticName>;
+interface TimePickerSemanticClassNames {
+  root?: string;
+  prefix?: string;
+  input?: string;
+  suffix?: string;
+}
+interface TimePickerSemanticStyles {
+  root?: CSSProperties;
+  prefix?: CSSProperties;
+  input?: CSSProperties;
+  suffix?: CSSProperties;
+}
+interface TimePickerPanelSemanticClassNames {
+  root?: string;
+  content?: string;
+  item?: string;
+  footer?: string;
+  container?: string;
+}
+interface TimePickerPanelSemanticStyles {
+  root?: CSSProperties;
+  content?: CSSProperties;
+  item?: CSSProperties;
+  footer?: CSSProperties;
+  container?: CSSProperties;
+}
+type TimePickerClassNames = SemanticClassNamesType<TimePickerProps, TimePickerSemanticClassNames, {
+  popup?: string | TimePickerPanelSemanticClassNames;
 }>;
-type TimePickerStyles = SemanticStylesType<TimePickerProps, PickerSemanticName, {
-  popup?: SemanticStyles<PanelSemanticName>;
+type TimePickerStyles = SemanticStylesType<TimePickerProps, TimePickerSemanticStyles, {
+  popup?: TimePickerPanelSemanticStyles;
 }>;
 interface PickerTimeProps<DateType extends AnyObject> extends Omit<PickerProps$1<DateType>, 'picker' | 'showTime'> {}
 interface RangePickerTimeProps<DateType extends AnyObject> extends Omit<RangePickerProps$1<DateType>, 'showTime' | 'picker'> {
@@ -46,9 +70,9 @@ interface TimeRangePickerEmits<DateType = AnyObject> {
   'keydown': (e: KeyboardEvent, preventDefault: VoidFunction) => void;
   [key: string]: (...args: any[]) => void;
 }
-declare const RangePicker$1: vue53.DefineSetupFnComponent<TimeRangePickerProps, TimeRangePickerEmits<AnyObject>, {}, TimeRangePickerProps & {
+declare const RangePicker$1: vue13.DefineSetupFnComponent<TimeRangePickerProps, TimeRangePickerEmits<AnyObject>, {}, TimeRangePickerProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue53.PublicProps>;
+}, vue13.PublicProps>;
 interface TimePickerProps extends Omit<PickerTimeProps<AnyObject>, 'picker' | 'classes' | 'styles'> {
   addon?: () => VueNode;
   status?: InputStatus;
@@ -79,16 +103,16 @@ interface TimePickerEmits<DateType = AnyObject> {
   'keydown': (e: KeyboardEvent, preventDefault: VoidFunction) => void;
   [key: string]: (...args: any[]) => void;
 }
-declare const TimePicker: vue53.DefineSetupFnComponent<TimePickerProps, TimePickerEmits<AnyObject>, SlotsType<TimePickerSlots>, TimePickerProps & {
+declare const TimePicker: vue13.DefineSetupFnComponent<TimePickerProps, TimePickerEmits<AnyObject>, SlotsType<TimePickerSlots>, TimePickerProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue53.PublicProps>;
+}, vue13.PublicProps>;
 type MergedTimePicker = typeof TimePicker & {
   RangePicker: typeof RangePicker$1;
   _InternalPanelDoNotUseOrYouWillBeFired: any;
 };
 declare const _default: MergedTimePicker;
-declare const TimeRangePicker: vue53.DefineSetupFnComponent<TimeRangePickerProps, TimeRangePickerEmits<AnyObject>, {}, TimeRangePickerProps & {
+declare const TimeRangePicker: vue13.DefineSetupFnComponent<TimeRangePickerProps, TimeRangePickerEmits<AnyObject>, {}, TimeRangePickerProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue53.PublicProps>;
+}, vue13.PublicProps>;
 //#endregion
 export { TimePickerLocale, TimePickerProps, TimeRangePicker, TimeRangePickerProps, _default };

package/dist/time-picker/index.mjs

@@ -1527,7 +1527,7 @@ const TimePicker = /* @__PURE__ */ defineComponent((props, { slots, emit, expose
 		nativeElement: computed(() => pickerRef.value?.nativeElement)
 	});
 	return () => {
-		const { addon, renderExtraFooter, classes: classes$1, styles: styles$1, popupClassName: popupClassName$1, popupStyle: popupStyle$1, variant: variant$1, bordered: bordered$1, ...restProps } = props;
+		const { addon, renderExtraFooter, classes, styles, popupClassName, popupStyle, variant, bordered, ...restProps } = props;
 		return createVNode(InternalTimePicker, mergeProps(attrs, restProps, {
 			"ref": pickerRef,
 			"mode": void 0,

package/dist/timeline/Timeline.d.mts

@@ -1,47 +1,82 @@
 import { EmptyEmit, VueNode } from "../_util/type.mjs";
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.mjs";
+import "../_util/hooks/index.mjs";
+import { StepItem, StepsProps, StepsSemanticClassNames, StepsSemanticStyles } from "../steps/index.mjs";
 import { ComponentBaseProps } from "../config-provider/context.mjs";
-import { TimelineItemProps } from "./TimelineItem.mjs";
-import * as vue318 from "vue";
-import { SlotsType } from "vue";
+import * as vue301 from "vue";
+import { CSSProperties, SlotsType } from "vue";
+import { LiteralUnion } from "@v-c/util/dist/type";
 
 //#region src/timeline/Timeline.d.ts
+type Color = 'blue' | 'red' | 'green' | 'gray';
+type ItemPlacement = 'start' | 'end';
+type ItemPosition = 'left' | 'right' | 'start' | 'end';
+interface TimelineItemType {
+  color?: LiteralUnion<Color>;
+  className?: string;
+  style?: CSSProperties;
+  classes?: NonNullable<StepItem['classes']>;
+  styles?: NonNullable<StepItem['styles']>;
+  placement?: ItemPlacement;
+  /** @deprecated please use `placement` instead */
+  position?: ItemPosition;
+  loading?: boolean;
+  key?: string | number;
+  title?: VueNode;
+  content?: VueNode;
+  /** @deprecated Please use `title` instead */
+  label?: VueNode;
+  /** @deprecated Please use `content` instead */
+  children?: VueNode;
+  icon?: VueNode;
+  /** @deprecated Please use `icon` instead */
+  dot?: VueNode;
+}
+type TimelineSemanticClassNames = StepsSemanticClassNames;
+type TimelineSemanticStyles = StepsSemanticStyles;
+type TimelineClassNamesType = SemanticClassNamesType<TimelineProps, TimelineSemanticClassNames>;
 interface TimelineProps extends ComponentBaseProps {
   pending?: VueNode;
   pendingDot?: VueNode;
   reverse?: boolean;
-  mode?: 'left' | 'alternate' | 'right';
-  items?: TimelineItemProps[];
+  mode?: 'left' | 'alternate' | 'right' | 'start' | 'end';
+  items?: TimelineItemType[];
   dotRender?: (params: {
-    item: TimelineItemProps;
+    item: TimelineItemType;
     index: number;
   }) => void;
   labelRender?: (params: {
-    item: TimelineItemProps;
+    item: TimelineItemType;
     index: number;
   }) => void;
   contentRender?: (params: {
-    item: TimelineItemProps;
+    item: TimelineItemType;
     index: number;
   }) => void;
+  orientation?: 'horizontal' | 'vertical';
+  variant?: StepsProps['variant'];
+  classes?: TimelineClassNamesType;
+  styles?: TimelineStylesType;
 }
+type TimelineStylesType = SemanticStylesType<TimelineProps, TimelineSemanticStyles>;
 interface TimelineSlots {
   pending?: () => void;
   pendingDot?: () => void;
   dotRender?: (params: {
-    item: TimelineItemProps;
+    item: TimelineItemType;
     index: number;
   }) => void;
   labelRender?: (params: {
-    item: TimelineItemProps;
+    item: TimelineItemType;
     index: number;
   }) => void;
   contentRender?: (params: {
-    item: TimelineItemProps;
+    item: TimelineItemType;
     index: number;
   }) => void;
 }
-declare const Timeline: vue318.DefineSetupFnComponent<TimelineProps, EmptyEmit, SlotsType<TimelineSlots>, TimelineProps & {
+declare const Timeline: vue301.DefineSetupFnComponent<TimelineProps, EmptyEmit, SlotsType<TimelineSlots>, TimelineProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue318.PublicProps>;
+}, vue301.PublicProps>;
 //#endregion
-export { Timeline, TimelineProps };
+export { Timeline, TimelineItemType, TimelineProps, TimelineSemanticClassNames, TimelineSemanticStyles };

package/dist/timeline/Timeline.mjs

@@ -1,24 +1,75 @@
 import { useBaseConfig } from "../config-provider/context.mjs";
 import useCSSVarCls_default from "../config-provider/hooks/useCSSVarCls.mjs";
+import { provideInternalContext } from "../steps/context.mjs";
+import steps_default from "../steps/index.mjs";
 import style_default from "./style/index.mjs";
-import TimelineItemList_default from "./TimelineItemList.mjs";
-import { createVNode, defineComponent, mergeProps } from "vue";
+import useItems_default from "./useItems.mjs";
+import { computed, createVNode, defineComponent, mergeProps, ref, toRefs } from "vue";
 import { classNames } from "@v-c/util";
 import { omit } from "es-toolkit";
+import { useUnstableProvider } from "@v-c/steps/dist/UnstableContext.js";
 
 //#region src/timeline/Timeline.tsx
 const Timeline = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
-	const { prefixCls, direction, timeline } = useBaseConfig("timeline", props);
+	provideInternalContext(ref({
+		rootComponent: "ol",
+		itemComponent: "li"
+	}));
+	const { reverse } = toRefs(props);
+	const orientation = computed(() => props.orientation || "vertical");
+	useUnstableProvider({ railFollowPrevStatus: reverse });
+	const { prefixCls, timeline, direction } = useBaseConfig("timeline", props);
+	const items = computed(() => props.items);
+	const pending = computed(() => props.pending);
+	const pendingDot = computed(() => props.pendingDot);
+	const mergedMode = computed(() => {
+		if (props.mode === "left") return "start";
+		if (props.mode === "right") return "end";
+		return [
+			"alternate",
+			"start",
+			"end"
+		].includes(props.mode) ? props.mode : "start";
+	});
 	const rootCls = useCSSVarCls_default(prefixCls);
-	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const [hashId, cssVarCls] = style_default(prefixCls);
+	const rawItems = useItems_default(rootCls, prefixCls, mergedMode, items, pending, pendingDot);
+	const mergedItems = computed(() => {
+		return props.reverse ? [...rawItems.value].reverse() : rawItems.value;
+	});
+	const layoutAlternate = computed(() => {
+		return mergedMode.value === "alternate" || orientation.value === "vertical" && mergedItems.value.some((item) => item.title);
+	});
+	const mergedClasses = computed(() => {
+		return {
+			item: `${prefixCls.value}-item`,
+			itemTitle: `${prefixCls.value}-item-title`,
+			itemIcon: `${prefixCls.value}-item-icon`,
+			itemContent: `${prefixCls.value}-item-content`,
+			itemRail: `${prefixCls.value}-item-rail`,
+			itemWrapper: `${prefixCls.value}-item-wrapper`,
+			itemSection: `${prefixCls.value}-item-section`,
+			itemHeader: `${prefixCls.value}-item-header`
+		};
+	});
 	return () => {
-		return createVNode(TimelineItemList_default, mergeProps(omit(attrs, ["class", "style"]), omit(props, ["items", "prefixCls"]), {
-			"class": classNames(timeline.value?.class, attrs.class, cssVarCls.value, rootCls.value),
-			"style": [timeline?.value?.style, attrs.style],
-			"prefixCls": prefixCls.value,
-			"direction": direction.value,
-			"items": props.items,
-			"hashId": hashId.value
+		const { variant = "outlined" } = props;
+		return createVNode(steps_default, mergeProps(omit(attrs, ["class", "style"]), omit(props, ["items", "prefixCls"]), {
+			"class": classNames(timeline.value?.class, attrs.class, rootCls.value, hashId.value, cssVarCls.value, prefixCls.value, {
+				[`${prefixCls.value}-${orientation.value}`]: orientation.value === "horizontal",
+				[`${prefixCls.value}-layout-alternate`]: layoutAlternate.value,
+				[`${prefixCls.value}-rtl`]: direction.value === "rtl"
+			}),
+			"classes": mergedClasses.value,
+			"style": {
+				...timeline?.value?.style || {},
+				...attrs.style || {}
+			},
+			"variant": variant,
+			"orientation": orientation.value,
+			"type": "dot",
+			"items": mergedItems.value,
+			"current": mergedItems.value.length - 1
 		}), slots);
 	};
 }, {
@@ -77,6 +128,26 @@ const Timeline = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 			required: false,
 			default: void 0
 		},
+		orientation: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		variant: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		classes: {
+			type: [Object, Function],
+			required: false,
+			default: void 0
+		},
+		styles: {
+			type: [Object, Function],
+			required: false,
+			default: void 0
+		},
 		rootClass: {
 			type: String,
 			required: false,

package/dist/timeline/index.d.mts

@@ -1,2 +1 @@
-import { TimelineItemProps } from "./TimelineItem.mjs";
-import { Timeline, TimelineProps } from "./Timeline.mjs";
+import { Timeline, TimelineItemType, TimelineProps, TimelineSemanticClassNames, TimelineSemanticStyles } from "./Timeline.mjs";

package/dist/timeline/style/horizontal.mjs

@@ -0,0 +1,73 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.mjs";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/timeline/style/horizontal.ts
+const genHorizontalStyle = (token) => {
+	const { componentCls, fontHeight, antCls, paddingXS } = token;
+	const [stepsVarName, stepsVarRef] = genCssVar(antCls, "cmp-steps");
+	const [timelineVarName, timelineVarRef] = genCssVar(antCls, "timeline");
+	const itemCls = `${componentCls}-item`;
+	return { [`${componentCls}-horizontal`]: {
+		[stepsVarName("title-vertical-row-gap")]: paddingXS,
+		[timelineVarName("content-height")]: unit(fontHeight),
+		alignItems: "stretch",
+		[`&${componentCls}-layout-alternate`]: { [itemCls]: {
+			[`${itemCls}-wrapper`]: {
+				[timelineVarName("alternate-content-offset")]: `calc(${timelineVarRef("content-height")} + ${stepsVarRef("title-vertical-row-gap")} * 2 + ${stepsVarRef("icon-size-max")})`,
+				height: `calc(${timelineVarRef("content-height")} * 2 + ${stepsVarRef("title-vertical-row-gap")} * 2 + ${stepsVarRef("icon-size-max")})`
+			},
+			[`${itemCls}-icon`]: { position: "absolute" },
+			[`${itemCls}-icon, ${itemCls}-rail`]: {
+				position: "absolute",
+				top: "50%",
+				transform: "translateY(-50%)",
+				margin: 0
+			},
+			[`${itemCls}-title, ${itemCls}-subtitle, ${itemCls}-content`]: {
+				whiteSpace: "nowrap",
+				maxWidth: "unset"
+			},
+			[`${itemCls}-title`]: {
+				position: "absolute",
+				left: {
+					_skip_check_: true,
+					value: "50%"
+				},
+				transform: "translateX(-50%)"
+			},
+			[`${itemCls}-content`]: {
+				position: "absolute",
+				left: {
+					_skip_check_: true,
+					value: "50%"
+				},
+				transform: "translateX(-50%)"
+			},
+			"&-placement-start": {
+				[`${itemCls}-title`]: { bottom: timelineVarRef("alternate-content-offset") },
+				[`${itemCls}-content`]: { top: timelineVarRef("alternate-content-offset") }
+			},
+			"&-placement-end": {
+				[`${itemCls}-title`]: { top: timelineVarRef("alternate-content-offset") },
+				[`${itemCls}-content`]: { bottom: timelineVarRef("alternate-content-offset") }
+			}
+		} },
+		[`&:not(${componentCls}-layout-alternate)`]: { [`${itemCls}-placement-end`]: {
+			display: "flex",
+			alignItems: "flex-end",
+			[`${itemCls}-wrapper`]: {
+				flex: "auto",
+				flexDirection: "column-reverse"
+			},
+			[`${itemCls}-rail`]: {
+				top: "auto",
+				bottom: stepsVarRef("horizontal-rail-margin"),
+				transform: "translateY(50%)"
+			}
+		} }
+	} };
+};
+var horizontal_default = genHorizontalStyle;
+
+//#endregion
+export { horizontal_default as default };

package/dist/timeline/style/index.d.mts

@@ -7,27 +7,32 @@ interface ComponentToken {
    * @desc 轨迹颜色
    * @descEN Line color
    */
-  tailColor: string;
+  tailColor?: string;
   /**
    * @desc 轨迹宽度
    * @descEN Line width
    */
-  tailWidth: number | string;
+  tailWidth?: number | string;
   /**
    * @desc 节点边框宽度
    * @descEN Border width of node
    */
-  dotBorderWidth: number | string;
+  dotBorderWidth?: number | string;
+  /**
+   * @desc 节点大小
+   * @descEN Node size
+   */
+  dotSize?: number | string;
   /**
    * @desc 节点背景色
    * @descEN Background color of node
    */
-  dotBg: string;
+  dotBg?: string;
   /**
    * @desc 时间项下间距
    * @descEN Bottom padding of item
    */
-  itemPaddingBottom: number;
+  itemPaddingBottom?: number;
 }
 //#endregion
 export { ComponentToken };