antdv-next 0.0.0 → 1.0.0-alpha.1

package/dist/slider/SliderTooltip.js

@@ -0,0 +1,167 @@
+import tooltip_default from "../tooltip/index.js";
+import { computed, createVNode, defineComponent, mergeProps, nextTick, onUnmounted, shallowRef, watch } from "vue";
+import raf from "@v-c/util/dist/raf";
+
+//#region src/slider/SliderTooltip.tsx
+const SliderTooltip = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const innerRef = shallowRef();
+	const mergedOpen = computed(() => props?.open && !props?.draggingDelete);
+	const rafRef = shallowRef(null);
+	function cancelKeepAlign() {
+		raf.cancel(rafRef.value);
+		rafRef.value = null;
+	}
+	function keepAlign() {
+		rafRef.value = raf(() => {
+			innerRef.value?.forceAlign();
+			rafRef.value = null;
+		});
+	}
+	watch([
+		mergedOpen,
+		() => props.title,
+		() => props.value
+	], async (_n, _o, onCleanup) => {
+		await nextTick();
+		if (mergedOpen.value) keepAlign();
+		else cancelKeepAlign();
+		onCleanup(() => {
+			cancelKeepAlign();
+		});
+	});
+	onUnmounted(() => {
+		cancelKeepAlign();
+	});
+	return () => {
+		return createVNode(tooltip_default, mergeProps(props, {
+			"open": mergedOpen.value,
+			"ref": innerRef
+		}), { default: () => [slots?.default?.()] });
+	};
+}, {
+	props: {
+		afterOpenChange: {
+			type: Function,
+			required: false
+		},
+		builtinPlacements: { required: false },
+		title: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		overlay: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		openClass: {
+			type: String,
+			required: false
+		},
+		unique: {
+			type: Boolean,
+			required: false
+		},
+		align: {
+			type: Object,
+			required: false
+		},
+		arrow: {
+			type: [Boolean, Object],
+			required: false
+		},
+		autoAdjustOverflow: {
+			type: [Boolean, Object],
+			required: false
+		},
+		color: { required: false },
+		open: {
+			type: Boolean,
+			required: false
+		},
+		defaultOpen: {
+			type: Boolean,
+			required: false
+		},
+		getPopupContainer: {
+			type: Function,
+			required: false
+		},
+		destroyOnHidden: {
+			type: Boolean,
+			required: false
+		},
+		zIndex: {
+			type: Number,
+			required: false
+		},
+		placement: {
+			type: String,
+			required: false
+		},
+		trigger: {
+			type: [String, Array],
+			required: false
+		},
+		fresh: {
+			type: Boolean,
+			required: false
+		},
+		mouseEnterDelay: {
+			type: Number,
+			required: false
+		},
+		mouseLeaveDelay: {
+			type: Number,
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		getTooltipContainer: {
+			type: Function,
+			required: false
+		},
+		motion: { required: false },
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		draggingDelete: {
+			type: Boolean,
+			required: false
+		},
+		value: {
+			type: Number,
+			required: false
+		}
+	},
+	name: "SliderTooltip",
+	inheritAttrs: false
+});
+var SliderTooltip_default = SliderTooltip;
+
+//#endregion
+export { SliderTooltip_default as default };

package/dist/slider/index.d.ts

@@ -0,0 +1,76 @@
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
+import { Orientation } from "../_util/hooks/useOrientation.js";
+import "../_util/hooks/index.js";
+import { TooltipPlacement, TriggerCommonApi } from "../tooltip/index.js";
+import * as vue148 from "vue";
+import { CSSProperties, SlotsType } from "vue";
+import { SliderProps } from "@v-c/slider";
+
+//#region src/slider/index.d.ts
+type SliderMarks = SliderProps['marks'];
+type SemanticName = 'root' | 'tracks' | 'track' | 'rail' | 'handle';
+type SliderClassNamesType = SemanticClassNamesType<SliderBaseProps, SemanticName>;
+type SliderStylesType = SemanticStylesType<SliderBaseProps, SemanticName>;
+interface SliderProps$1 extends Omit<SliderProps, 'styles' | 'classNames'> {
+  classes?: SliderClassNamesType;
+  styles?: SliderStylesType;
+}
+type Formatter = ((value?: number) => any) | null;
+interface SliderTooltipProps extends TriggerCommonApi {
+  prefixCls?: string;
+  open?: boolean;
+  placement?: TooltipPlacement;
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  formatter?: Formatter;
+  autoAdjustOverflow?: boolean;
+}
+interface SliderBaseProps {
+  prefixCls?: string;
+  reverse?: boolean;
+  min?: number;
+  max?: number;
+  step?: null | number;
+  marks?: SliderMarks;
+  dots?: boolean;
+  included?: boolean;
+  disabled?: boolean;
+  keyboard?: boolean;
+  orientation?: Orientation;
+  vertical?: boolean;
+  rootClass?: string;
+  id?: string;
+  tooltip?: SliderTooltipProps;
+  autoFocus?: boolean;
+  styles?: SliderStylesType;
+  classes?: SliderClassNamesType;
+  tabindex?: SliderProps$1['tabIndex'];
+  ariaLabelForHandle?: SliderProps$1['ariaLabelForHandle'];
+  ariaLabelledByForHandle?: SliderProps$1['ariaLabelledByForHandle'];
+  ariaRequired?: SliderProps$1['ariaRequired'];
+  ariaValueTextFormatterForHandle?: SliderProps$1['ariaValueTextFormatterForHandle'];
+}
+interface SliderInternalProps extends SliderBaseProps {
+  range?: boolean | SliderRange;
+  value?: number | number[];
+  defaultValue?: number | number[];
+  /** @deprecated Please use `styles.handle` instead */
+  handleStyle?: CSSProperties | CSSProperties[];
+  /** @deprecated Please use `styles.track` instead */
+  trackStyle?: CSSProperties | CSSProperties[];
+  /** @deprecated Please use `styles.rail` instead */
+  railStyle?: CSSProperties;
+}
+interface SliderEmits {
+  'change': (value: any) => void;
+  'afterChange': (value: any) => void;
+  'update:value': (value: any) => void;
+  'changeComplete': (value: any) => void;
+  [key: string]: (...args: any) => void;
+}
+interface SliderSlots {}
+type SliderRange = SliderProps['range'];
+declare const Slider: vue148.DefineSetupFnComponent<SliderInternalProps, SliderEmits, SlotsType<SliderSlots>, SliderInternalProps & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue148.PublicProps>;
+//#endregion
+export { Slider, SliderEmits, SliderProps$1 as SliderProps };

package/dist/slider/index.js

@@ -0,0 +1,317 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass, useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { useOrientation } from "../_util/hooks/useOrientation.js";
+import "../_util/hooks/index.js";
+import { toPropsRefs } from "../_util/tools.js";
+import { useDisabledContext } from "../config-provider/DisabledContext.js";
+import { useSliderInternalContext } from "./Context.js";
+import SliderTooltip_default from "./SliderTooltip.js";
+import style_default from "./style/index.js";
+import useRafLock from "./useRafLock.js";
+import { cloneVNode, computed, createVNode, defineComponent, isVNode, mergeProps, onMounted, onUnmounted, shallowRef } from "vue";
+import { clsx } from "@v-c/util";
+import raf from "@v-c/util/dist/raf";
+import { omit } from "es-toolkit";
+import VcSlider from "@v-c/slider";
+
+//#region src/slider/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+function getTipFormatter(tipFormatter) {
+	if (tipFormatter || tipFormatter === null) return tipFormatter;
+	return (val) => typeof val === "number" ? val.toString() : "";
+}
+const Slider = /* @__PURE__ */ defineComponent((props, { attrs, emit, expose }) => {
+	const { classes, styles, vertical, orientation } = toPropsRefs(props, "classes", "styles", "vertical", "orientation");
+	const [, mergedVertical] = useOrientation(orientation, vertical);
+	const sliderRef = shallowRef();
+	const { prefixCls, direction: contextDirection, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, getPopupContainer, getPrefixCls } = useComponentBaseConfig("slider", props);
+	const contextDisabled = useDisabledContext();
+	const mergedDisabled = computed(() => props.disabled ?? contextDisabled.value);
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			disabled: mergedDisabled.value,
+			vertical: mergedVertical.value
+		};
+	});
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, styles), useToProps(mergedProps));
+	const { handleRender: contextHandleRender, direction: internalContextDirection } = useSliderInternalContext();
+	const mergedDirection = computed(() => internalContextDirection?.value || contextDirection.value);
+	const isRTL = computed(() => mergedDirection.value === "rtl");
+	const [hoverOpen, setHoverOpen] = useRafLock();
+	const [focusOpen, setFocusOpen] = useRafLock();
+	const tooltipProps = computed(() => {
+		return { ...props.tooltip };
+	});
+	const lockOpen = computed(() => tooltipProps.value?.open);
+	const activeOpen = computed(() => (hoverOpen.value || focusOpen.value) && lockOpen.value !== false);
+	const [dragging, setDragging] = useRafLock();
+	const onInternalChangeComplete = (nextValues) => {
+		emit("changeComplete", nextValues);
+		setDragging(false);
+	};
+	const getTooltipPlacement = (placement, vert) => {
+		if (placement) return placement;
+		if (!vert) return "top";
+		return isRTL ? "left" : "right";
+	};
+	const [hashId, cssVarCls] = style_default(prefixCls);
+	const onMouseUp = () => {
+		raf(() => {
+			focusOpen.value = false;
+		}, 1);
+	};
+	onMounted(() => {
+		document.addEventListener("mouseup", onMouseUp);
+	});
+	onUnmounted(() => {
+		document.removeEventListener("mouseup", onMouseUp);
+	});
+	expose({
+		focus: () => sliderRef.value?.focus?.(),
+		blur: () => sliderRef.value?.blur?.()
+	});
+	return () => {
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const { rootClass, tooltip, range } = props;
+		const tooltipProps$1 = { ...tooltip };
+		const { placement: tooltipPlacement, getPopupContainer: getTooltipPopupContainer, prefixCls: customizeTooltipPrefixCls, formatter: tipFormatter } = tooltipProps$1;
+		const rootClassNames = clsx(className, contextClassName.value, mergedClassNames.value.root, rootClass, {
+			[`${prefixCls.value}-rtl`]: isRTL.value,
+			[`${prefixCls.value}-lock`]: dragging.value
+		}, hashId.value, cssVarCls.value);
+		const restProps = {
+			...omit(props, [
+				"prefixCls",
+				"range",
+				"rootClass",
+				"style",
+				"disabled",
+				"tooltip",
+				"classes",
+				"styles",
+				"vertical",
+				"orientation"
+			]),
+			...restAttrs
+		};
+		if (isRTL.value && !mergedVertical.value) restProps.reverse = !restProps.reverse;
+		const mergedTipFormatter = getTipFormatter(tipFormatter);
+		const useActiveTooltipHandle = range && !lockOpen.value;
+		const handleRender = contextHandleRender || (({ node, index, value }) => {
+			const nodeProps = {};
+			function proxyEvent(eventName, event, triggerRestPropsEvent) {
+				if (triggerRestPropsEvent) restProps[eventName]?.(event);
+				nodeProps[eventName]?.(event);
+			}
+			const cloneNode = cloneVNode(node, {
+				onMouseenter: (e) => {
+					setHoverOpen(true);
+					proxyEvent("onMouseenter", e);
+				},
+				onMouseleave: (e) => {
+					setHoverOpen(false);
+					proxyEvent("onMouseleave", e);
+				},
+				onMousedown: (e) => {
+					setFocusOpen(true);
+					setDragging(true);
+					proxyEvent("onMousedown", e);
+				},
+				onFocus: (e) => {
+					setFocusOpen(true);
+					restProps?.onFocus?.(e);
+					proxyEvent("onFocus", e, true);
+				},
+				onBlur: (e) => {
+					setFocusOpen(false);
+					restProps?.onBlur?.(e);
+					proxyEvent("onBlur", e, true);
+				}
+			});
+			const open = (!!lockOpen.value || activeOpen.value) && mergedTipFormatter !== null;
+			if (!useActiveTooltipHandle) return createVNode(SliderTooltip_default, mergeProps(tooltipProps$1, {
+				"prefixCls": getPrefixCls("tooltip", customizeTooltipPrefixCls),
+				"title": mergedTipFormatter ? mergedTipFormatter(value) : "",
+				"value": value,
+				"open": open,
+				"placement": getTooltipPlacement(tooltipPlacement, mergedVertical.value),
+				"key": index,
+				"classes": { root: `${prefixCls.value}-tooltip` },
+				"getPopupContainer": getTooltipPopupContainer || getPopupContainer
+			}), _isSlot(cloneNode) ? cloneNode : { default: () => [cloneNode] });
+			return cloneNode;
+		});
+		const activeHandleRender = useActiveTooltipHandle ? ({ node,...info }) => {
+			const cloneNode = cloneVNode(node, { style: { visibility: "hidden" } });
+			return createVNode(SliderTooltip_default, mergeProps(tooltipProps$1, {
+				"prefixCls": getPrefixCls("tooltip", customizeTooltipPrefixCls),
+				"title": mergedTipFormatter ? mergedTipFormatter(info.value) : "",
+				"open": mergedTipFormatter !== null && activeOpen.value,
+				"placement": getTooltipPlacement(tooltipPlacement, mergedVertical.value),
+				"key": "tooltip",
+				"classes": { root: `${prefixCls.value}-tooltip` },
+				"getPopupContainer": getTooltipPopupContainer || getPopupContainer,
+				"draggingDelete": info.draggingDelete
+			}), _isSlot(cloneNode) ? cloneNode : { default: () => [cloneNode] });
+		} : void 0;
+		const rootStyle = {
+			...mergedStyles.value.root,
+			...contextStyle.value,
+			...style
+		};
+		return createVNode(VcSlider, mergeProps(restProps, {
+			"classNames": mergedClassNames.value,
+			"styles": mergedStyles.value,
+			"step": restProps.step,
+			"range": range,
+			"className": rootClassNames,
+			"style": rootStyle,
+			"disabled": mergedDisabled.value,
+			"vertical": mergedVertical.value,
+			"prefixCls": prefixCls.value,
+			"handleRender": handleRender,
+			"activeHandleRender": activeHandleRender,
+			"onChangeComplete": onInternalChangeComplete,
+			"onChange": (...args) => {
+				emit("change", ...args);
+				emit("update:value", ...args);
+			},
+			"ref": sliderRef
+		}), null);
+	};
+}, {
+	emits: [
+		"change",
+		"afterChange",
+		"update:value",
+		"changeComplete"
+	],
+	props: {
+		range: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		value: {
+			type: [Number, Array],
+			required: false
+		},
+		defaultValue: {
+			type: [Number, Array],
+			required: false
+		},
+		handleStyle: {
+			type: [Object, Array],
+			required: false
+		},
+		trackStyle: {
+			type: [Object, Array],
+			required: false
+		},
+		railStyle: {
+			type: Object,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		reverse: {
+			type: Boolean,
+			required: false
+		},
+		min: {
+			type: Number,
+			required: false
+		},
+		max: {
+			type: Number,
+			required: false
+		},
+		step: {
+			type: [null, Number],
+			required: false
+		},
+		marks: {
+			type: Object,
+			required: false
+		},
+		dots: {
+			type: Boolean,
+			required: false
+		},
+		included: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		keyboard: {
+			type: Boolean,
+			required: false
+		},
+		orientation: {
+			type: String,
+			required: false
+		},
+		vertical: {
+			type: Boolean,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		tooltip: {
+			type: Object,
+			required: false
+		},
+		autoFocus: {
+			type: Boolean,
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		tabindex: {
+			type: [Number, Array],
+			required: false
+		},
+		ariaLabelForHandle: {
+			type: [String, Array],
+			required: false
+		},
+		ariaLabelledByForHandle: {
+			type: [String, Array],
+			required: false
+		},
+		ariaRequired: {
+			type: Boolean,
+			required: false
+		},
+		ariaValueTextFormatterForHandle: { required: false }
+	},
+	name: "ASlider",
+	inheritAttrs: false
+});
+Slider.install = (app) => {
+	app.component(Slider.name, Slider);
+};
+var slider_default = Slider;
+
+//#endregion
+export { slider_default as default };

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

@@ -0,0 +1,98 @@
+import "../../theme/internal.js";
+import "vue";
+
+//#region src/slider/style/index.d.ts
+interface ComponentToken {
+  /**
+   * @desc 滑动输入高度
+   * @descEN Height of slider
+   */
+  controlSize: number;
+  /**
+   * @desc 轨道高度
+   * @descEN Height of rail
+   */
+  railSize: number;
+  /**
+   * @desc 滑块尺寸
+   * @descEN Size of handle
+   */
+  handleSize: number;
+  /**
+   * @desc 滑块尺寸（悬浮态）
+   * @descEN Size of handle when hover
+   */
+  handleSizeHover: number;
+  /**
+   * @desc 滑块边框宽度
+   * @descEN Border width of handle
+   */
+  handleLineWidth: number | string;
+  /**
+   * @desc 滑块边框宽度（悬浮态）
+   * @descEN Border width of handle when hover
+   */
+  handleLineWidthHover: number | string;
+  /**
+   * @desc 滑块圆点尺寸
+   * @descEN Size of dot
+   */
+  dotSize: number;
+  /**
+   * @desc 轨道背景色
+   * @descEN Background color of rail
+   */
+  railBg: string;
+  /**
+   * @desc 轨道背景色（悬浮态）
+   * @descEN Background color of rail when hover
+   */
+  railHoverBg: string;
+  /**
+   * @desc 轨道已覆盖部分背景色
+   * @descEN Background color of track
+   */
+  trackBg: string;
+  /**
+   * @desc 轨道已覆盖部分背景色（悬浮态）
+   * @descEN Background color of track when hover
+   */
+  trackHoverBg: string;
+  /**
+   * @desc 滑块颜色
+   * @descEN Color of handle
+   */
+  handleColor: string;
+  /**
+   * @desc 滑块激活态边框色
+   * @descEN Border color of handle when active
+   */
+  handleActiveColor: string;
+  /**
+   * @desc 滑块激活态外框色
+   * @descEN Outline color of handle when active
+   */
+  handleActiveOutlineColor: string;
+  /**
+   * @desc 滑块禁用颜色
+   * @descEN Color of handle when disabled
+   */
+  handleColorDisabled: string;
+  /**
+   * @desc 圆点边框颜色
+   * @descEN Border color of dot
+   */
+  dotBorderColor: string;
+  /**
+   * @desc 圆点激活态边框颜色
+   * @descEN Border color of dot when active
+   */
+  dotActiveBorderColor: string;
+  /**
+   * @desc 轨道禁用态背景色
+   * @descEN Background color of track when disabled
+   */
+  trackBgDisabled: string;
+}
+//#endregion
+export { ComponentToken };