@antdv-next/mobile 0.0.0-stage → 0.1.1

package/dist/slider/Slider.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,455 @@
+import { clamp, isObject, preventDefault } from "../_util/index.js";
+import { useControlled } from "../_util/hooks/useControlled.js";
+import RenderNode_default from "../_util/RenderNode.js";
+import { useConfig, useDisabled } from "../config-provider/context.js";
+import { useFormItemInputContext } from "../form/context.js";
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { Fragment, Transition, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, isVNode, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, renderSlot, unref, withCtx } from "vue";
+// src/slider/Slider.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 1,
+	class: "am-slider-step"
+};
+var _hoisted_2 = [
+	"id",
+	"tabindex",
+	"data-index",
+	"aria-label",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-orientation",
+	"aria-disabled",
+	"onKeydown"
+];
+var _hoisted_3 = {
+	key: 0,
+	class: "am-slider-tooltip",
+	role: "tooltip"
+};
+var _hoisted_4 = {
+	key: 2,
+	class: "am-slider-mark"
+};
+var MAX_DOTS = 200;
+var Slider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmSlider",
+	inheritAttrs: false,
+	__name: "Slider",
+	props: {
+		value: {},
+		defaultValue: {},
+		min: { default: 0 },
+		max: { default: 100 },
+		step: { default: 1 },
+		range: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		marks: {},
+		dots: {
+			type: Boolean,
+			default: false
+		},
+		included: {
+			type: Boolean,
+			default: true
+		},
+		reverse: {
+			type: Boolean,
+			default: false
+		},
+		vertical: {
+			type: Boolean,
+			default: false
+		},
+		orientation: {},
+		keyboard: {
+			type: Boolean,
+			default: true
+		},
+		tooltip: {},
+		id: {},
+		ariaLabelForHandle: {},
+		rootClass: {},
+		classes: {},
+		styles: {}
+	},
+	emits: [
+		"update:value",
+		"change",
+		"changeComplete",
+		"focus",
+		"blur"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const config = useConfig();
+		const disabled = useDisabled(() => props.disabled);
+		const formItem = useFormItemInputContext();
+		const bodyRef = ref();
+		const handleRefs = ref([]);
+		const isVertical = computed(() => props.orientation ? props.orientation === "vertical" : props.vertical);
+		const isRtl = computed(() => config.direction.value === "rtl");
+		const [value, setValue] = useControlled(props, "value", {
+			defaultValue: () => props.defaultValue ?? (props.range ? [props.min, props.min] : props.min),
+			onChange: (val) => {
+				emit("update:value", val);
+				emit("change", val);
+				formItem.onFieldChange();
+			}
+		});
+		function toNumber(val) {
+			const num = Number(val);
+			return Number.isNaN(num) ? props.min : clamp(num, props.min, props.max);
+		}
+		/** Normalized handle values: one item, or two sorted items in range mode. */
+		const values = computed(() => {
+			const raw = value.value;
+			if (props.range) {
+				const list = Array.isArray(raw) ? raw : [raw, raw];
+				const start = toNumber(list[0]);
+				const end = toNumber(list[1] ?? list[0]);
+				return start <= end ? [start, end] : [end, start];
+			}
+			return [toNumber(Array.isArray(raw) ? raw[0] : raw)];
+		});
+		function toOutput(list) {
+			return props.range ? list.slice(0, 2) : list[0];
+		}
+		function isSame(a, b) {
+			return a.length === b.length && a.every((v, i) => v === b[i]);
+		}
+		function commit(list) {
+			if (!isSame(list, values.value)) setValue(toOutput(list));
+		}
+		function isMarkObject(mark) {
+			return isObject(mark) && !isVNode(mark) && !Array.isArray(mark) && ("label" in mark || "style" in mark);
+		}
+		const markList = computed(() => {
+			const marks = props.marks;
+			if (!marks) return [];
+			return Object.keys(marks).map((key) => {
+				const mark = marks[key];
+				const point = Number(key);
+				return isMarkObject(mark) ? {
+					point,
+					label: mark.label,
+					style: mark.style
+				} : {
+					point,
+					label: mark
+				};
+			}).filter((item) => !Number.isNaN(item.point) && item.point >= props.min && item.point <= props.max).sort((a, b) => a.point - b.point);
+		});
+		function getDecimals(num) {
+			const str = String(num);
+			return str.includes(".") ? str.length - str.indexOf(".") - 1 : 0;
+		}
+		function fixPrecision(num) {
+			const decimals = Math.max(getDecimals(props.step ?? 0), getDecimals(props.min));
+			return Number(num.toFixed(Math.min(decimals, 20)));
+		}
+		const hasStep = computed(() => typeof props.step === "number" && props.step > 0);
+		/** Clamp to [min, max] and snap to the closest step / mark. */
+		function snap(raw) {
+			const { min, max } = props;
+			const val = clamp(raw, min, max);
+			const candidates = markList.value.map((item) => item.point);
+			if (hasStep.value) {
+				const step = props.step;
+				candidates.push(clamp(fixPrecision(Math.round((val - min) / step) * step + min), min, max));
+				candidates.push(max);
+			} else candidates.push(min, max);
+			let closest = candidates[0];
+			candidates.forEach((item) => {
+				if (Math.abs(item - val) < Math.abs(closest - val)) closest = item;
+			});
+			return closest;
+		}
+		function getPercent(val) {
+			const range = props.max - props.min;
+			return range > 0 ? (val - props.min) / range * 100 : 0;
+		}
+		function offsetStyle(percent) {
+			if (isVertical.value) return { [props.reverse ? "top" : "bottom"]: `${percent}%` };
+			return { [props.reverse ? "insetInlineEnd" : "insetInlineStart"]: `${percent}%` };
+		}
+		const trackRange = computed(() => {
+			const list = values.value;
+			return props.range ? [list[0], list[1]] : [props.min, list[0]];
+		});
+		const trackStyle = computed(() => {
+			const start = getPercent(trackRange.value[0]);
+			const length = `${getPercent(trackRange.value[1]) - start}%`;
+			return {
+				...offsetStyle(start),
+				[isVertical.value ? "height" : "width"]: length
+			};
+		});
+		function isIncluded(point) {
+			return props.included && point >= trackRange.value[0] && point <= trackRange.value[1];
+		}
+		const dotList = computed(() => {
+			const points = new Set(markList.value.map((item) => item.point));
+			if (props.dots && hasStep.value) {
+				const step = props.step;
+				if ((props.max - props.min) / step <= MAX_DOTS) for (let point = props.min; point <= props.max; point = fixPrecision(point + step)) points.add(point);
+			}
+			return Array.from(points).sort((a, b) => a - b);
+		});
+		const dragging = ref(false);
+		const activeIndex = ref(-1);
+		function isTooltipVisible(index) {
+			const tooltip = props.tooltip;
+			if (tooltip?.formatter === null) return false;
+			return tooltip?.open ?? (dragging.value && activeIndex.value === index);
+		}
+		function getTooltipContent(val) {
+			const formatter = props.tooltip?.formatter;
+			return formatter ? formatter(val) : val;
+		}
+		function getPointValue(clientX, clientY) {
+			const rect = bodyRef.value?.getBoundingClientRect();
+			if (!rect) return values.value[0];
+			let ratio;
+			if (isVertical.value) {
+				ratio = rect.height > 0 ? (rect.bottom - clientY) / rect.height : 0;
+				if (props.reverse) ratio = 1 - ratio;
+			} else {
+				ratio = rect.width > 0 ? (clientX - rect.left) / rect.width : 0;
+				if (isRtl.value !== props.reverse) ratio = 1 - ratio;
+			}
+			return snap(props.min + clamp(ratio, 0, 1) * (props.max - props.min));
+		}
+		/** Move the active handle; handles may cross each other in range mode. */
+		function moveActive(next) {
+			const list = values.value.slice();
+			list[activeIndex.value] = next;
+			if (props.range && list[0] > list[1]) {
+				list.reverse();
+				activeIndex.value = 1 - activeIndex.value;
+			}
+			commit(list);
+		}
+		function startDrag(clientX, clientY, target) {
+			const handle = target?.closest?.(".am-slider-handle");
+			if (handle && handle.dataset.index !== void 0) {
+				activeIndex.value = Number(handle.dataset.index);
+				dragging.value = true;
+				return;
+			}
+			const next = getPointValue(clientX, clientY);
+			const list = values.value;
+			let index = 0;
+			if (props.range) {
+				const d0 = Math.abs(list[0] - next);
+				const d1 = Math.abs(list[1] - next);
+				index = d0 === d1 ? next < list[0] ? 0 : 1 : d0 < d1 ? 0 : 1;
+			}
+			activeIndex.value = index;
+			dragging.value = true;
+			moveActive(next);
+		}
+		function endDrag() {
+			if (!dragging.value) return;
+			dragging.value = false;
+			emit("changeComplete", toOutput(values.value));
+		}
+		let lastTouchTime = 0;
+		function handleTouchStart(event) {
+			if (disabled.value) return;
+			lastTouchTime = Date.now();
+			const point = event.touches[0];
+			startDrag(point.clientX, point.clientY, event.target);
+		}
+		function handleTouchMove(event) {
+			if (!dragging.value) return;
+			preventDefault(event);
+			const point = event.touches[0];
+			moveActive(getPointValue(point.clientX, point.clientY));
+		}
+		function handleTouchEnd() {
+			lastTouchTime = Date.now();
+			endDrag();
+		}
+		function handleMouseMove(event) {
+			if (dragging.value) moveActive(getPointValue(event.clientX, event.clientY));
+		}
+		function removeMouseListeners() {
+			document.removeEventListener("mousemove", handleMouseMove);
+			document.removeEventListener("mouseup", handleMouseUp);
+		}
+		function handleMouseUp() {
+			removeMouseListeners();
+			endDrag();
+		}
+		function handleMouseDown(event) {
+			if (disabled.value || event.button !== 0 || Date.now() - lastTouchTime < 500) return;
+			event.preventDefault();
+			startDrag(event.clientX, event.clientY, event.target);
+			handleRefs.value[activeIndex.value]?.focus({ preventScroll: true });
+			document.addEventListener("mousemove", handleMouseMove);
+			document.addEventListener("mouseup", handleMouseUp);
+		}
+		onBeforeUnmount(() => {
+			if (typeof document !== "undefined") removeMouseListeners();
+		});
+		let keyChanged = false;
+		function getSiblingValue(current, direction) {
+			if (hasStep.value) return snap(fixPrecision(current + direction * props.step));
+			const points = Array.from(/* @__PURE__ */ new Set([
+				props.min,
+				props.max,
+				...markList.value.map((item) => item.point)
+			])).sort((a, b) => a - b);
+			return (direction > 0 ? points.filter((p) => p > current) : points.filter((p) => p < current).reverse())[0] ?? current;
+		}
+		function handleKeydown(event, index) {
+			if (disabled.value || !props.keyboard) return;
+			const current = values.value[index];
+			const flipX = !isVertical.value && isRtl.value !== props.reverse;
+			const flipY = isVertical.value && props.reverse;
+			let next;
+			switch (event.key) {
+				case "ArrowRight":
+					next = getSiblingValue(current, flipX ? -1 : 1);
+					break;
+				case "ArrowLeft":
+					next = getSiblingValue(current, flipX ? 1 : -1);
+					break;
+				case "ArrowUp":
+					next = getSiblingValue(current, flipY ? -1 : 1);
+					break;
+				case "ArrowDown":
+					next = getSiblingValue(current, flipY ? 1 : -1);
+					break;
+				case "Home":
+					next = props.min;
+					break;
+				case "End": next = props.max;
+			}
+			if (next === void 0) return;
+			event.preventDefault();
+			if (next === current) return;
+			keyChanged = true;
+			activeIndex.value = index;
+			moveActive(next);
+			if (activeIndex.value !== index) nextTick(() => handleRefs.value[activeIndex.value]?.focus());
+		}
+		function handleKeyup() {
+			if (keyChanged) {
+				keyChanged = false;
+				emit("changeComplete", toOutput(values.value));
+			}
+		}
+		function handleFocus(event) {
+			emit("focus", event);
+		}
+		function handleBlur(event) {
+			emit("blur", event);
+			formItem.onFieldBlur();
+		}
+		function getAriaLabel(index) {
+			const label = props.ariaLabelForHandle;
+			return Array.isArray(label) ? label[index] : label;
+		}
+		const classNames = computed(() => [
+			"am-slider",
+			isVertical.value ? "am-slider-vertical" : "am-slider-horizontal",
+			{
+				"am-slider-range": props.range,
+				"am-slider-reverse": props.reverse,
+				"am-slider-disabled": disabled.value,
+				"am-slider-dragging": dragging.value,
+				"am-slider-with-marks": markList.value.length > 0
+			},
+			props.rootClass,
+			props.classes?.root
+		]);
+		__expose({
+			focus: () => handleRefs.value[0]?.focus(),
+			blur: () => handleRefs.value.forEach((el) => el?.blur())
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, {
+				class: classNames.value,
+				style: __props.styles?.root,
+				onTouchstartPassive: handleTouchStart,
+				onTouchmove: handleTouchMove,
+				onTouchend: handleTouchEnd,
+				onTouchcancel: handleTouchEnd,
+				onMousedown: handleMouseDown
+			}), [createElementVNode("div", {
+				ref_key: "bodyRef",
+				ref: bodyRef,
+				class: "am-slider-body"
+			}, [
+				createElementVNode("div", {
+					class: normalizeClass(["am-slider-rail", __props.classes?.rail]),
+					style: normalizeStyle(__props.styles?.rail)
+				}, null, 6),
+				__props.included ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(["am-slider-track", __props.classes?.track]),
+					style: normalizeStyle([trackStyle.value, __props.styles?.track])
+				}, null, 6)) : createCommentVNode("", true),
+				dotList.value.length ? (openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(dotList.value, (point) => {
+					return openBlock(), createElementBlock("span", {
+						key: point,
+						class: normalizeClass(["am-slider-dot", { "am-slider-dot-active": isIncluded(point) }]),
+						style: normalizeStyle(offsetStyle(getPercent(point)))
+					}, null, 6);
+				}), 128))])) : createCommentVNode("", true),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(values.value, (item, index) => {
+					return openBlock(), createElementBlock("div", {
+						id: index === 0 ? __props.id ?? unref(formItem).id.value : void 0,
+						key: index,
+						ref_for: true,
+						ref_key: "handleRefs",
+						ref: handleRefs,
+						class: normalizeClass(["am-slider-handle", [{ "am-slider-handle-active": dragging.value && activeIndex.value === index }, __props.classes?.handle]]),
+						style: normalizeStyle([offsetStyle(getPercent(item)), __props.styles?.handle]),
+						role: "slider",
+						tabindex: unref(disabled) ? -1 : 0,
+						"data-index": index,
+						"aria-label": getAriaLabel(index),
+						"aria-valuemin": __props.min,
+						"aria-valuemax": __props.max,
+						"aria-valuenow": item,
+						"aria-orientation": isVertical.value ? "vertical" : "horizontal",
+						"aria-disabled": unref(disabled) || void 0,
+						onKeydown: ($event) => handleKeydown($event, index),
+						onKeyup: handleKeyup,
+						onFocus: handleFocus,
+						onBlur: handleBlur
+					}, [renderSlot(_ctx.$slots, "handle", {
+						value: item,
+						index,
+						dragging: dragging.value && activeIndex.value === index
+					}, () => [_cache[0] || (_cache[0] = createElementVNode("span", { class: "am-slider-thumb" }, null, -1))]), createVNode(Transition, { name: "am-fade" }, {
+						default: withCtx(() => [isTooltipVisible(index) ? (openBlock(), createElementBlock("span", _hoisted_3, [createVNode(unref(RenderNode_default), { node: getTooltipContent(item) }, null, 8, ["node"])])) : createCommentVNode("", true)]),
+						_: 2
+					}, 1024)], 46, _hoisted_2);
+				}), 128)),
+				markList.value.length ? (openBlock(), createElementBlock("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(markList.value, (mark) => {
+					return openBlock(), createElementBlock("span", {
+						key: mark.point,
+						class: normalizeClass(["am-slider-mark-text", { "am-slider-mark-text-active": isIncluded(mark.point) }]),
+						style: normalizeStyle([offsetStyle(getPercent(mark.point)), mark.style])
+					}, [renderSlot(_ctx.$slots, "mark", {
+						point: mark.point,
+						label: mark.label
+					}, () => [createVNode(unref(RenderNode_default), { node: mark.label }, null, 8, ["node"])])], 6);
+				}), 128))])) : createCommentVNode("", true)
+			], 512)], 16);
+		};
+	}
+});
+export { Slider_vue_vue_type_script_setup_true_lang_default as default };

package/dist/slider/index.d.ts

@@ -0,0 +1,80 @@
+export type * from './interface';
+declare const Slider: import("../_util/withInstall").WithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./interface").SliderProps> & Readonly<{
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((value: any) => any) | undefined;
+        onFocus?: ((event: FocusEvent) => any) | undefined;
+        "onUpdate:value"?: ((value: any) => any) | undefined;
+        onChangeComplete?: ((value: any) => any) | undefined;
+    }>, import("./interface").SliderExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        blur: (event: FocusEvent) => any;
+        change: (value: any) => any;
+        focus: (event: FocusEvent) => any;
+        "update:value": (value: any) => any;
+        changeComplete: (value: any) => any;
+    }, import("vue").PublicProps, {
+        reverse: boolean;
+        vertical: boolean;
+        range: boolean;
+        disabled: boolean;
+        min: number;
+        max: number;
+        keyboard: boolean;
+        dots: boolean;
+        step: number | null;
+        included: boolean;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./interface").SliderProps> & Readonly<{
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((value: any) => any) | undefined;
+        onFocus?: ((event: FocusEvent) => any) | undefined;
+        "onUpdate:value"?: ((value: any) => any) | undefined;
+        onChangeComplete?: ((value: any) => any) | undefined;
+    }>, import("./interface").SliderExpose, {}, {}, {}, {
+        reverse: boolean;
+        vertical: boolean;
+        range: boolean;
+        disabled: boolean;
+        min: number;
+        max: number;
+        keyboard: boolean;
+        dots: boolean;
+        step: number | null;
+        included: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./interface").SliderProps> & Readonly<{
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((value: any) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    "onUpdate:value"?: ((value: any) => any) | undefined;
+    onChangeComplete?: ((value: any) => any) | undefined;
+}>, import("./interface").SliderExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (event: FocusEvent) => any;
+    change: (value: any) => any;
+    focus: (event: FocusEvent) => any;
+    "update:value": (value: any) => any;
+    changeComplete: (value: any) => any;
+}, string, {
+    reverse: boolean;
+    vertical: boolean;
+    range: boolean;
+    disabled: boolean;
+    min: number;
+    max: number;
+    keyboard: boolean;
+    dots: boolean;
+    step: number | null;
+    included: boolean;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./interface").SliderSlots;
+}), object>;
+export default Slider;

package/dist/slider/index.js

@@ -0,0 +1,5 @@
+import { withInstall } from "../_util/withInstall.js";
+import Slider_default from "./Slider.js";
+// src/slider/index.ts
+var Slider = withInstall(Slider_default, "AmSlider");
+export { Slider as default };

package/dist/slider/interface.d.ts

@@ -0,0 +1,80 @@
+import type { CSSProperties } from 'vue';
+import type { VueNode } from '../_util/type';
+export type SliderValue = number | number[];
+export interface SliderMarkObject {
+    style?: CSSProperties;
+    label?: VueNode;
+}
+export type SliderMarks = Record<number, VueNode | SliderMarkObject>;
+export interface SliderTooltipConfig {
+    /** `true`: always visible, `false`: never visible, `undefined`: visible while dragging */
+    open?: boolean;
+    /** Formats the bubble content, `null` hides the bubble */
+    formatter?: ((value: number) => VueNode) | null;
+}
+export interface SliderSemanticClassNames {
+    root?: string;
+    rail?: string;
+    track?: string;
+    handle?: string;
+}
+export interface SliderSemanticStyles {
+    root?: CSSProperties;
+    rail?: CSSProperties;
+    track?: CSSProperties;
+    handle?: CSSProperties;
+}
+export interface SliderProps {
+    /** Current value, `[number, number]` when `range`; supports `v-model:value` */
+    value?: number | number[];
+    defaultValue?: number | number[];
+    min?: number;
+    max?: number;
+    /** Step, `null` makes `marks` (plus `min` / `max`) the only selectable values */
+    step?: number | null;
+    /** Dual thumb mode */
+    range?: boolean;
+    disabled?: boolean;
+    marks?: SliderMarks;
+    /** Show a dot for every step */
+    dots?: boolean;
+    /** Fill the track between `min` (or the two handles) and the value */
+    included?: boolean;
+    reverse?: boolean;
+    vertical?: boolean;
+    /** Takes priority over `vertical` */
+    orientation?: 'horizontal' | 'vertical';
+    keyboard?: boolean;
+    /** Value bubble above the handle */
+    tooltip?: SliderTooltipConfig;
+    id?: string;
+    ariaLabelForHandle?: string | string[];
+    rootClass?: string;
+    classes?: SliderSemanticClassNames;
+    styles?: SliderSemanticStyles;
+}
+export interface SliderEmits {
+    'update:value': [value: any];
+    'change': [value: any];
+    /** Fired when the finger is lifted (or the key is released) */
+    'changeComplete': [value: any];
+    'focus': [event: FocusEvent];
+    'blur': [event: FocusEvent];
+}
+export interface SliderSlots {
+    /** Custom mark content */
+    mark?: (ctx: {
+        point: number;
+        label?: any;
+    }) => any;
+    /** Custom handle content */
+    handle?: (ctx: {
+        value: number;
+        index: number;
+        dragging: boolean;
+    }) => any;
+}
+export interface SliderExpose {
+    focus: () => void;
+    blur: () => void;
+}