antdv-next 0.0.0 → 1.0.0-alpha.1

package/dist/carousel/style/index.js

@@ -0,0 +1,304 @@
+import { resetComponent } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import "../../theme/internal.js";
+import { Keyframes, unit } from "@antdv-next/cssinjs";
+
+//#region src/carousel/style/index.ts
+const DotDuration = "--dot-duration";
+const genCarouselStyle = (token) => {
+	const { componentCls, antCls } = token;
+	return { [componentCls]: {
+		...resetComponent(token),
+		".slick-slider": {
+			"position": "relative",
+			"display": "block",
+			"boxSizing": "border-box",
+			"touchAction": "pan-y",
+			"WebkitTouchCallout": "none",
+			"WebkitTapHighlightColor": "transparent",
+			".slick-track, .slick-list": {
+				transform: "translate3d(0, 0, 0)",
+				touchAction: "pan-y"
+			}
+		},
+		".slick-list": {
+			"position": "relative",
+			"display": "block",
+			"margin": 0,
+			"padding": 0,
+			"overflow": "hidden",
+			"&:focus": { outline: "none" },
+			"&.dragging": { cursor: "pointer" },
+			".slick-slide": {
+				"pointerEvents": "none",
+				[`input${antCls}-radio-input, input${antCls}-checkbox-input`]: { visibility: "hidden" },
+				"&.slick-active": {
+					pointerEvents: "auto",
+					[`input${antCls}-radio-input, input${antCls}-checkbox-input`]: { visibility: "visible" }
+				},
+				"> div > div": { verticalAlign: "bottom" }
+			}
+		},
+		".slick-track": {
+			"position": "relative",
+			"top": 0,
+			"insetInlineStart": 0,
+			"display": "block",
+			"&::before, &::after": {
+				display: "table",
+				content: "\"\""
+			},
+			"&::after": { clear: "both" }
+		},
+		".slick-slide": {
+			"display": "none",
+			"float": "left",
+			"height": "100%",
+			"minHeight": 1,
+			"img": { display: "block" },
+			"&.dragging img": { pointerEvents: "none" }
+		},
+		".slick-initialized .slick-slide": { display: "block" },
+		".slick-vertical .slick-slide": {
+			display: "block",
+			height: "auto"
+		}
+	} };
+};
+const genArrowsStyle = (token) => {
+	const { componentCls, motionDurationSlow, arrowSize, arrowOffset } = token;
+	const arrowLength = token.calc(arrowSize).div(Math.SQRT2).equal();
+	return { [componentCls]: {
+		".slick-prev, .slick-next": {
+			"position": "absolute",
+			"top": "50%",
+			"width": arrowSize,
+			"height": arrowSize,
+			"transform": "translateY(-50%)",
+			"color": "#fff",
+			"opacity": .4,
+			"background": "transparent",
+			"padding": 0,
+			"lineHeight": 0,
+			"border": 0,
+			"outline": "none",
+			"cursor": "pointer",
+			"zIndex": 1,
+			"transition": `opacity ${motionDurationSlow}`,
+			"&:hover, &:focus": { opacity: 1 },
+			"&.slick-disabled": {
+				pointerEvents: "none",
+				opacity: 0
+			},
+			"&::after": {
+				boxSizing: "border-box",
+				position: "absolute",
+				top: token.calc(arrowSize).sub(arrowLength).div(2).equal(),
+				insetInlineStart: token.calc(arrowSize).sub(arrowLength).div(2).equal(),
+				display: "inline-block",
+				width: arrowLength,
+				height: arrowLength,
+				border: `0 solid currentcolor`,
+				borderInlineStartWidth: 2,
+				borderBlockStartWidth: 2,
+				borderRadius: 1,
+				content: "\"\""
+			}
+		},
+		".slick-prev": {
+			"insetInlineStart": arrowOffset,
+			"&::after": { transform: "rotate(-45deg)" }
+		},
+		".slick-next": {
+			"insetInlineEnd": arrowOffset,
+			"&::after": { transform: "rotate(135deg)" }
+		}
+	} };
+};
+const genDotsStyle = (token) => {
+	const { componentCls, dotOffset, dotWidth, dotHeight, dotGap, colorBgContainer, motionDurationSlow } = token;
+	const animation = new Keyframes(`${token.prefixCls}-dot-animation`, {
+		from: { width: 0 },
+		to: { width: token.dotActiveWidth }
+	});
+	return { [componentCls]: { ".slick-dots": {
+		"position": "absolute",
+		"insetInlineEnd": 0,
+		"bottom": 0,
+		"insetInlineStart": 0,
+		"zIndex": 15,
+		"display": "flex !important",
+		"justifyContent": "center",
+		"paddingInlineStart": 0,
+		"margin": 0,
+		"listStyle": "none",
+		"&-bottom": { bottom: dotOffset },
+		"&-top": {
+			top: dotOffset,
+			bottom: "auto"
+		},
+		"li": {
+			"position": "relative",
+			"display": "inline-block",
+			"flex": "0 1 auto",
+			"boxSizing": "content-box",
+			"width": dotWidth,
+			"height": dotHeight,
+			"marginInline": dotGap,
+			"padding": 0,
+			"textAlign": "center",
+			"textIndent": -999,
+			"verticalAlign": "top",
+			"transition": `all ${motionDurationSlow}`,
+			"borderRadius": dotHeight,
+			"overflow": "hidden",
+			"&::after": {
+				display: "block",
+				position: "absolute",
+				top: 0,
+				insetInlineStart: 0,
+				width: 0,
+				height: dotHeight,
+				content: "\"\"",
+				background: "transparent",
+				borderRadius: dotHeight,
+				opacity: 1,
+				outline: "none",
+				cursor: "pointer",
+				overflow: "hidden"
+			},
+			"button": {
+				"position": "relative",
+				"display": "block",
+				"width": "100%",
+				"height": dotHeight,
+				"padding": 0,
+				"color": "transparent",
+				"fontSize": 0,
+				"background": colorBgContainer,
+				"border": 0,
+				"borderRadius": dotHeight,
+				"outline": "none",
+				"cursor": "pointer",
+				"opacity": .2,
+				"transition": `all ${motionDurationSlow}`,
+				"overflow": "hidden",
+				"&:hover": { opacity: .75 },
+				"&::after": {
+					position: "absolute",
+					inset: token.calc(dotGap).mul(-1).equal(),
+					content: "\"\""
+				}
+			},
+			"&.slick-active": {
+				"width": token.dotActiveWidth,
+				"position": "relative",
+				"&:hover": { opacity: 1 },
+				"&::after": {
+					background: colorBgContainer,
+					animationName: animation,
+					animationDuration: `var(${DotDuration})`,
+					animationTimingFunction: "ease-out",
+					animationFillMode: "forwards"
+				}
+			}
+		}
+	} } };
+};
+const genCarouselVerticalStyle = (token) => {
+	const { componentCls, dotOffset, arrowOffset, marginXXS } = token;
+	const animation = new Keyframes(`${token.prefixCls}-dot-vertical-animation`, {
+		from: { height: 0 },
+		to: { height: token.dotActiveWidth }
+	});
+	const reverseSizeOfDot = {
+		width: token.dotHeight,
+		height: token.dotWidth
+	};
+	return { [`${componentCls}-vertical`]: {
+		".slick-prev, .slick-next": {
+			insetInlineStart: "50%",
+			marginBlockStart: "unset",
+			transform: "translateX(-50%)"
+		},
+		".slick-prev": {
+			"insetBlockStart": arrowOffset,
+			"insetInlineStart": "50%",
+			"&::after": { transform: "rotate(45deg)" }
+		},
+		".slick-next": {
+			"insetBlockStart": "auto",
+			"insetBlockEnd": arrowOffset,
+			"&::after": { transform: "rotate(-135deg)" }
+		},
+		".slick-dots": {
+			"top": "50%",
+			"bottom": "auto",
+			"flexDirection": "column",
+			"width": token.dotHeight,
+			"height": "auto",
+			"margin": 0,
+			"transform": "translateY(-50%)",
+			"&-start": {
+				insetInlineEnd: "auto",
+				insetInlineStart: dotOffset
+			},
+			"&-end": {
+				insetInlineEnd: dotOffset,
+				insetInlineStart: "auto"
+			},
+			"li": {
+				...reverseSizeOfDot,
+				"margin": `${unit(marginXXS)} 0`,
+				"verticalAlign": "baseline",
+				"button": reverseSizeOfDot,
+				"&::after": {
+					...reverseSizeOfDot,
+					height: 0
+				},
+				"&.slick-active": {
+					...reverseSizeOfDot,
+					"height": token.dotActiveWidth,
+					"button": {
+						...reverseSizeOfDot,
+						height: token.dotActiveWidth
+					},
+					"&::after": {
+						...reverseSizeOfDot,
+						animationName: animation,
+						animationDuration: `var(${DotDuration})`,
+						animationTimingFunction: "ease-out",
+						animationFillMode: "forwards"
+					}
+				}
+			}
+		}
+	} };
+};
+const genCarouselRtlStyle = (token) => {
+	const { componentCls } = token;
+	return [{ [`${componentCls}-rtl`]: { direction: "rtl" } }, { [`${componentCls}-vertical`]: { ".slick-dots": { [`${componentCls}-rtl&`]: { flexDirection: "column" } } } }];
+};
+const prepareComponentToken = (token) => {
+	const dotActiveWidth = 24;
+	return {
+		arrowSize: 16,
+		arrowOffset: token.marginXS,
+		dotWidth: 16,
+		dotHeight: 3,
+		dotGap: token.marginXXS,
+		dotOffset: 12,
+		dotWidthActive: dotActiveWidth,
+		dotActiveWidth
+	};
+};
+var style_default = genStyleHooks("Carousel", (token) => [
+	genCarouselStyle(token),
+	genArrowsStyle(token),
+	genDotsStyle(token),
+	genCarouselVerticalStyle(token),
+	genCarouselRtlStyle(token)
+], prepareComponentToken, { deprecatedTokens: [["dotWidthActive", "dotActiveWidth"]] });
+
+//#endregion
+export { DotDuration, style_default as default };

package/dist/cascader/Panel.d.ts

@@ -0,0 +1,23 @@
+import { CascaderProps as CascaderProps$1 } from "./index.js";
+import * as vue72 from "vue";
+import { SlotsType } from "vue";
+import { CascaderProps, DefaultOptionType } from "@v-c/cascader";
+
+//#region src/cascader/Panel.d.ts
+type PanelPickType = 'value' | 'defaultValue' | 'changeOnSelect' | 'options' | 'prefixCls' | 'fieldNames' | 'showCheckedStrategy' | 'loadData' | 'expandTrigger' | 'expandIcon' | 'loadingIcon' | 'direction' | 'notFoundContent' | 'disabled' | 'optionRender' | 'multiple' | 'rootClass';
+interface CascaderPanelProps<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends boolean = boolean> extends Pick<CascaderProps$1<OptionType, ValueField, Multiple>, PanelPickType> {}
+interface CascaderPanelEmits {
+  'change': NonNullable<CascaderProps['onChange']>;
+  'update:value': (value: any) => void;
+  [key: string]: (...args: any[]) => void;
+}
+interface CascaderPanelSlots {
+  expandIcon?: () => any;
+  notFoundContent?: () => any;
+  optionRender?: (option: DefaultOptionType) => any;
+}
+declare const CascaderPanel: vue72.DefineSetupFnComponent<CascaderPanelProps<DefaultOptionType, string, boolean>, CascaderPanelEmits, SlotsType<CascaderPanelSlots>, CascaderPanelProps<DefaultOptionType, string, boolean> & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue72.PublicProps>;
+//#endregion
+export { CascaderPanel, CascaderPanelEmits, CascaderPanelProps, CascaderPanelSlots };

package/dist/cascader/Panel.js

@@ -0,0 +1,125 @@
+import { getAttrStyleAndClass } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
+import useCSSVarCls_default from "../config-provider/hooks/useCSSVarCls.js";
+import { useDisabledContext } from "../config-provider/DisabledContext.js";
+import { DefaultRenderEmpty } from "../config-provider/defaultRenderEmpty.js";
+import useBase from "./hooks/useBase.js";
+import useCheckable from "./hooks/useCheckable.js";
+import useColumnIcons from "./hooks/useColumnIcons.js";
+import style_default from "./style/index.js";
+import panel_default from "./style/panel.js";
+import { computed, createVNode, defineComponent, mergeProps } from "vue";
+import { clsx } from "@v-c/util";
+import { Panel } from "@v-c/cascader";
+
+//#region src/cascader/Panel.tsx
+const CascaderPanel = /* @__PURE__ */ defineComponent((props, { attrs, emit, slots }) => {
+	const { prefixCls: customizePrefixCls, direction: propDirection } = toPropsRefs(props, "prefixCls", "direction");
+	const { cascaderPrefixCls, direction: mergedDirection, renderEmpty } = useBase(customizePrefixCls, propDirection);
+	const isRtl = computed(() => mergedDirection.value === "rtl");
+	const rootCls = useCSSVarCls_default(cascaderPrefixCls);
+	const [hashId, cssVarCls] = style_default(cascaderPrefixCls, rootCls);
+	panel_default(cascaderPrefixCls);
+	const disabled = useDisabledContext();
+	const mergedDisabled = computed(() => props.disabled ?? disabled.value);
+	const onChange = (value, selectedOptions) => {
+		emit("change", value, selectedOptions);
+		emit("update:value", value);
+	};
+	return () => {
+		const { rootClass, multiple, optionRender, expandIcon, prefixCls: _prefixCls, direction: _direction, loadingIcon: _loadingIcon,...rest } = props;
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const customExpandIcon = getSlotPropsFnRun(slots, props, "expandIcon", false) ?? expandIcon;
+		const [mergedExpandIcon, loadingIcon] = useColumnIcons(isRtl.value, customExpandIcon);
+		const checkable = useCheckable(cascaderPrefixCls.value, multiple);
+		const slotNotFound = getSlotPropsFnRun(slots, props, "notFoundContent", false);
+		let mergedNotFoundContent = slotNotFound;
+		if (slotNotFound === void 0) mergedNotFoundContent = renderEmpty.value?.("Cascader") || createVNode(DefaultRenderEmpty, { "componentName": "Cascader" }, null);
+		const mergedOptionRender = slots.optionRender ? (option) => slots.optionRender?.(option) : optionRender;
+		return createVNode(Panel, mergeProps(restAttrs, rest, {
+			"checkable": checkable,
+			"prefixCls": cascaderPrefixCls.value,
+			"className": clsx(rootClass, cssVarCls.value, rootCls.value, hashId.value, className),
+			"style": style,
+			"notFoundContent": mergedNotFoundContent,
+			"direction": mergedDirection.value,
+			"expandIcon": mergedExpandIcon,
+			"loadingIcon": loadingIcon,
+			"disabled": mergedDisabled.value,
+			"optionRender": mergedOptionRender,
+			"onChange": onChange
+		}), null);
+	};
+}, {
+	emits: ["change", "update:value"],
+	props: {
+		value: { required: false },
+		defaultValue: { required: false },
+		changeOnSelect: {
+			type: Boolean,
+			required: false
+		},
+		options: {
+			type: Array,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		fieldNames: {
+			type: Object,
+			required: false
+		},
+		showCheckedStrategy: { required: false },
+		loadData: {
+			type: Function,
+			required: false
+		},
+		expandTrigger: {
+			type: String,
+			required: false
+		},
+		expandIcon: { required: false },
+		loadingIcon: { required: false },
+		direction: {
+			type: String,
+			required: false
+		},
+		notFoundContent: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		optionRender: {
+			type: Function,
+			required: false
+		},
+		multiple: {
+			type: Boolean,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		}
+	},
+	name: "ACascaderPanel",
+	inheritAttrs: false
+});
+var Panel_default = CascaderPanel;
+
+//#endregion
+export { Panel_default as default };

package/dist/cascader/hooks/useBase.js

@@ -0,0 +1,17 @@
+import { useConfig } from "../../config-provider/context.js";
+import { computed } from "vue";
+
+//#region src/cascader/hooks/useBase.ts
+function useBase(customizePrefixCls, direction) {
+	const config = useConfig();
+	const mergedDirection = computed(() => direction?.value ?? config.value.direction);
+	return {
+		prefixCls: computed(() => config.value.getPrefixCls("select", customizePrefixCls.value)),
+		cascaderPrefixCls: computed(() => config.value.getPrefixCls("cascader", customizePrefixCls.value)),
+		direction: mergedDirection,
+		renderEmpty: computed(() => config.value.renderEmpty)
+	};
+}
+
+//#endregion
+export { useBase as default };

package/dist/cascader/hooks/useCheckable.js

@@ -0,0 +1,10 @@
+import { createVNode } from "vue";
+
+//#region src/cascader/hooks/useCheckable.tsx
+function useCheckable(cascaderPrefixCls, multiple) {
+	if (!multiple) return false;
+	return createVNode("span", { "class": `${cascaderPrefixCls}-checkbox-inner` }, null);
+}
+
+//#endregion
+export { useCheckable as default };

package/dist/cascader/hooks/useColumnIcons.js

@@ -0,0 +1,13 @@
+import { createVNode } from "vue";
+import { LeftOutlined, LoadingOutlined, RightOutlined } from "@antdv-next/icons";
+
+//#region src/cascader/hooks/useColumnIcons.tsx
+function useColumnIcons(rtl, expandIcon) {
+	let mergedExpandIcon = expandIcon;
+	if (mergedExpandIcon === void 0) mergedExpandIcon = rtl ? createVNode(LeftOutlined, null, null) : createVNode(RightOutlined, null, null);
+	const loadingIcon = createVNode(LoadingOutlined, { "spin": true }, null);
+	return [mergedExpandIcon, loadingIcon];
+}
+
+//#endregion
+export { useColumnIcons as default };

package/dist/cascader/index.d.ts

@@ -0,0 +1,90 @@
+import { VueNode } from "../_util/type.js";
+import { SemanticClassNames, SemanticClassNamesType, SemanticStyles, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { SizeType } from "../config-provider/SizeContext.js";
+import { InputStatus } from "../_util/statusUtils.js";
+import { SelectCommonPlacement } from "../_util/motion.js";
+import { CascaderPanel } from "./Panel.js";
+import { Variant } from "../config-provider/context.js";
+import * as vue76 from "vue";
+import { App, CSSProperties, SlotsType } from "vue";
+import { CascaderProps, DefaultOptionType, SHOW_CHILD, SHOW_PARENT } from "@v-c/cascader";
+
+//#region src/cascader/index.d.ts
+type SemanticName = 'root' | 'prefix' | 'suffix' | 'input' | 'placeholder' | 'content' | 'item' | 'itemContent' | 'itemRemove';
+type PopupSemantic = 'root' | 'listItem' | 'list';
+type CascaderClassNamesType = SemanticClassNamesType<CascaderProps$1, SemanticName, {
+  popup?: SemanticClassNames<PopupSemantic>;
+}>;
+type CascaderStylesType = SemanticStylesType<CascaderProps$1, SemanticName, {
+  popup?: SemanticStyles<PopupSemantic>;
+}>;
+interface CascaderProps$1<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends boolean = boolean> extends Omit<CascaderProps<OptionType, ValueField, Multiple>, 'checkable' | 'className' | 'style' | 'classNames' | 'styles' | 'onChange' | 'onSearch' | 'onPopupVisibleChange' | 'multiple' | 'value'> {
+  value?: any;
+  multiple?: boolean;
+  size?: SizeType;
+  /**
+   * @deprecated `showArrow` is deprecated which will be removed in next major version. It will be a
+   *   default behavior, you can hide it by setting `suffixIcon` to null.
+   */
+  showArrow?: boolean;
+  disabled?: boolean;
+  /** @deprecated Use `variant` instead. */
+  bordered?: boolean;
+  placement?: SelectCommonPlacement;
+  suffixIcon?: VueNode;
+  options?: OptionType[];
+  status?: InputStatus;
+  rootClass?: string;
+  /** @deprecated Please use `classNames.popup.root` instead */
+  popupClassName?: string;
+  /** @deprecated Please use `classNames.popup.root` instead */
+  dropdownClassName?: string;
+  /** @deprecated Please use `styles.popup.root` instead */
+  dropdownStyle?: CSSProperties;
+  /** @deprecated Please use `popupRender` instead */
+  dropdownRender?: (menu: any) => any;
+  popupRender?: (menu: any) => any;
+  /** @deprecated Please use `popupMenuColumnStyle` instead */
+  dropdownMenuColumnStyle?: CSSProperties;
+  popupMenuColumnStyle?: CSSProperties;
+  /**
+   * @since 5.13.0
+   * @default "outlined"
+   */
+  variant?: Variant;
+  classes?: CascaderClassNamesType;
+  styles?: CascaderStylesType;
+}
+interface CascaderSlots {
+  suffixIcon?: () => any;
+  notFoundContent?: () => any;
+  popupRender?: (menu: any) => any;
+  displayRender?: (data: {
+    labels: string[];
+    selectedOptions?: DefaultOptionType[];
+  }) => any;
+  optionRender?: (option: DefaultOptionType) => any;
+  expandIcon?: () => any;
+  default?: () => any;
+}
+interface CascaderEmits {
+  'openChange': (visible: boolean) => void;
+  'dropdownVisibleChange': (visible: boolean) => void;
+  'popupVisibleChange': (visible: boolean) => void;
+  'change': NonNullable<CascaderProps['onChange']>;
+  'update:value': (value: any) => void;
+  'search': NonNullable<CascaderProps['onSearch']>;
+  [key: string]: (...args: any[]) => void;
+}
+declare const InternalCascader: vue76.DefineSetupFnComponent<CascaderProps$1<DefaultOptionType, string, boolean>, CascaderEmits, SlotsType<CascaderSlots>, CascaderProps$1<DefaultOptionType, string, boolean> & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue76.PublicProps>;
+declare const Cascader: typeof InternalCascader & {
+  install: (app: App) => void;
+  Panel: typeof CascaderPanel;
+  SHOW_PARENT: typeof SHOW_PARENT;
+  SHOW_CHILD: typeof SHOW_CHILD;
+};
+//#endregion
+export { Cascader, CascaderEmits, CascaderProps$1 as CascaderProps, CascaderSlots };