@antdv-next/mobile 0.0.0-stage → 0.1.0

package/dist/rolling-text/RollingText.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,133 @@
+import { addUnit, inBrowser } from "../_util/index.js";
+import { mergeAttrsStyle } from "../_util/vnode.js";
+import { formatNumbers, getNumberColumns, getTextColumns } from "./utils.js";
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { Fragment, computed, createElementBlock, createElementVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, toDisplayString, unref, watch } from "vue";
+// src/rolling-text/RollingText.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = ["onAnimationend"];
+var _hoisted_3 = {
+	key: 1,
+	class: "am-rolling-text-separator",
+	"aria-hidden": "true"
+};
+var STAGGER = .2;
+var RollingText_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmRollingText",
+	inheritAttrs: false,
+	__name: "RollingText",
+	props: {
+		value: { default: 0 },
+		from: { default: 0 },
+		duration: { default: 2 },
+		autoStart: {
+			type: Boolean,
+			default: true
+		},
+		direction: { default: "down" },
+		stopOrder: { default: "ltr" },
+		texts: {},
+		height: {},
+		rootClass: {},
+		classes: {},
+		styles: {}
+	},
+	emits: ["finish"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		/** Seconds between two neighbouring columns coming to a stop. */
+		const isText = computed(() => Array.isArray(props.texts) && props.texts.length > 0);
+		const columns = computed(() => isText.value ? getTextColumns(props.texts, props.direction) : getNumberColumns(props.from, props.value, props.direction));
+		const rollingCount = computed(() => columns.value.filter((column) => column.rolling).length);
+		const label = computed(() => isText.value ? String(props.texts[props.texts.length - 1] ?? "") : formatNumbers(props.from, props.value).label);
+		const rolling = ref(props.autoStart);
+		/** Bumped on every start: the columns are re-created, which restarts the CSS animation. */
+		const runId = ref(0);
+		function prefersReducedMotion() {
+			return inBrowser && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		}
+		/** With reduced motion the css jumps to the target and no `animationend` fires. */
+		function finishWithoutMotion() {
+			if (!prefersReducedMotion()) return;
+			const id = runId.value;
+			nextTick(() => {
+				if (rolling.value && id === runId.value) emit("finish");
+			});
+		}
+		function start() {
+			runId.value += 1;
+			rolling.value = true;
+			finishWithoutMotion();
+		}
+		function reset() {
+			runId.value += 1;
+			rolling.value = false;
+		}
+		function getDelay(order) {
+			return `${(props.stopOrder === "rtl" ? rollingCount.value - 1 - order : order) * STAGGER}s`;
+		}
+		function handleAnimationEnd(order) {
+			if (!rolling.value) return;
+			if (order === (props.stopOrder === "rtl" ? 0 : rollingCount.value - 1)) emit("finish");
+		}
+		onMounted(() => {
+			if (rolling.value) finishWithoutMotion();
+		});
+		watch(() => props.autoStart, (value) => {
+			if (value) start();
+		});
+		watch(() => [
+			props.value,
+			props.from,
+			props.direction,
+			props.texts
+		], () => props.autoStart ? start() : reset(), { deep: true });
+		const rootStyle = computed(() => {
+			const style = { "--am-rolling-text-duration": `${props.duration}s` };
+			const height = addUnit(props.height);
+			if (height) style["--am-rolling-text-item-height"] = height;
+			return {
+				...style,
+				...props.styles?.root
+			};
+		});
+		__expose({
+			start,
+			reset
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+				class: ["am-rolling-text", [
+					`am-rolling-text-${__props.direction}`,
+					{ "am-rolling-text-rolling": rolling.value },
+					__props.rootClass,
+					__props.classes?.root
+				]],
+				style: unref(mergeAttrsStyle)(rootStyle.value, _ctx.$attrs.style),
+				role: "img",
+				"aria-label": label.value
+			}), [(openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (column, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: `${runId.value}-${index}` }, [column.rolling ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(["am-rolling-text-item", __props.classes?.item]),
+					style: normalizeStyle([{
+						"--am-rolling-text-steps": column.figures.length - 1,
+						"--am-rolling-text-delay": getDelay(column.order)
+					}, __props.styles?.item]),
+					"aria-hidden": "true"
+				}, [createElementVNode("span", {
+					class: "am-rolling-text-item-box",
+					onAnimationend: ($event) => handleAnimationEnd(column.order)
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(column.figures, (figure, i) => {
+					return openBlock(), createElementBlock("span", {
+						key: i,
+						class: "am-rolling-text-item-figure"
+					}, toDisplayString(figure), 1);
+				}), 128))], 40, _hoisted_2)], 6)) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(column.figures[0]), 1))], 64);
+			}), 128))], 16, _hoisted_1);
+		};
+	}
+});
+export { RollingText_vue_vue_type_script_setup_true_lang_default as default };

package/dist/rolling-text/index.d.ts

@@ -0,0 +1,17 @@
+export type * from './interface';
+declare const RollingText: import("../_util/withInstall").WithInstall<import("vue").DefineComponent<import("./interface").RollingTextProps, {
+    start: () => void;
+    reset: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    finish: () => any;
+}, string, import("vue").PublicProps, Readonly<import("./interface").RollingTextProps> & Readonly<{
+    onFinish?: (() => any) | undefined;
+}>, {
+    value: number;
+    duration: number;
+    direction: import("./interface").RollingTextDirection;
+    from: number;
+    autoStart: boolean;
+    stopOrder: import("./interface").RollingTextStopOrder;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, object>;
+export default RollingText;

package/dist/rolling-text/index.js

@@ -0,0 +1,5 @@
+import { withInstall } from "../_util/withInstall.js";
+import RollingText_default from "./RollingText.js";
+// src/rolling-text/index.ts
+var RollingText = withInstall(RollingText_default, "AmRollingText");
+export { RollingText as default };

package/dist/rolling-text/interface.d.ts

@@ -0,0 +1,42 @@
+import type { CSSProperties } from 'vue';
+export type RollingTextDirection = 'up' | 'down';
+export type RollingTextStopOrder = 'ltr' | 'rtl';
+export interface RollingTextSemanticClassNames {
+    root?: string;
+    item?: string;
+}
+export interface RollingTextSemanticStyles {
+    root?: CSSProperties;
+    item?: CSSProperties;
+}
+export interface RollingTextProps {
+    /** Target number */
+    value?: number;
+    /** Start number */
+    from?: number;
+    /** Duration of one column, in seconds */
+    duration?: number;
+    /** Start rolling when mounted (and again whenever the value changes) */
+    autoStart?: boolean;
+    /** Rolling direction of the figures */
+    direction?: RollingTextDirection;
+    /** Which side stops first */
+    stopOrder?: RollingTextStopOrder;
+    /** Roll through these texts instead of numbers; the first one is the start, the last one the target */
+    texts?: string[];
+    /** Row height, a number is in px */
+    height?: number | string;
+    rootClass?: string;
+    classes?: RollingTextSemanticClassNames;
+    styles?: RollingTextSemanticStyles;
+}
+export interface RollingTextEmits {
+    /** The last column stopped */
+    finish: [];
+}
+export interface RollingTextExpose {
+    /** (Re)start rolling from the start value */
+    start: () => void;
+    /** Stop and go back to the start value */
+    reset: () => void;
+}

package/dist/rolling-text/style/index.css

@@ -0,0 +1,86 @@
+.am-rolling-text {
+  /* component tokens */
+  --am-rolling-text-color: var(--am-color-text-heading);
+  --am-rolling-text-font-size: 24px;
+  --am-rolling-text-font-weight: var(--am-font-weight-strong);
+  --am-rolling-text-gap: 0px;
+  --am-rolling-text-item-height: 40px;
+  --am-rolling-text-item-width: auto;
+  --am-rolling-text-item-background: transparent;
+  --am-rolling-text-item-border-radius: 0;
+  /* set by the component */
+  --am-rolling-text-duration: 2s;
+
+  display: inline-flex;
+  gap: var(--am-rolling-text-gap);
+  align-items: center;
+  box-sizing: border-box;
+  color: var(--am-rolling-text-color);
+  font-weight: var(--am-rolling-text-font-weight);
+  font-size: var(--am-rolling-text-font-size);
+  font-family: var(--am-font-family);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--am-rolling-text-item-height);
+  white-space: nowrap;
+  vertical-align: middle;
+  /* figures keep their reading order in rtl pages */
+  direction: ltr;
+}
+
+.am-rolling-text-item {
+  display: inline-block;
+  flex: none;
+  box-sizing: border-box;
+  width: var(--am-rolling-text-item-width);
+  height: var(--am-rolling-text-item-height);
+  overflow: hidden;
+  text-align: center;
+  background: var(--am-rolling-text-item-background);
+  border-radius: var(--am-rolling-text-item-border-radius);
+}
+
+.am-rolling-text-item-box {
+  --am-rolling-text-distance: calc(var(--am-rolling-text-item-height) * var(--am-rolling-text-steps, 0) * -1);
+  --am-rolling-text-start: 0px;
+  --am-rolling-text-end: var(--am-rolling-text-distance);
+
+  display: block;
+  transform: translateY(var(--am-rolling-text-start));
+  will-change: transform;
+}
+
+.am-rolling-text-down .am-rolling-text-item-box {
+  --am-rolling-text-start: var(--am-rolling-text-distance);
+  --am-rolling-text-end: 0px;
+}
+
+.am-rolling-text-item-figure {
+  display: block;
+  height: var(--am-rolling-text-item-height);
+}
+
+.am-rolling-text-separator {
+  flex: none;
+  height: var(--am-rolling-text-item-height);
+}
+
+.am-rolling-text-rolling .am-rolling-text-item-box {
+  animation: am-rolling-text-roll var(--am-rolling-text-duration) ease-in-out var(--am-rolling-text-delay, 0s) both;
+}
+
+@keyframes am-rolling-text-roll {
+  from {
+    transform: translateY(var(--am-rolling-text-start));
+  }
+
+  to {
+    transform: translateY(var(--am-rolling-text-end));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .am-rolling-text-rolling .am-rolling-text-item-box {
+    transform: translateY(var(--am-rolling-text-end));
+    animation: none;
+  }
+}

package/dist/rolling-text/utils.d.ts

@@ -0,0 +1,18 @@
+import type { RollingTextDirection } from './interface';
+export interface RollingTextColumn {
+    /** `false`: a static character such as the sign or the decimal point */
+    rolling: boolean;
+    /** Figures from top to bottom */
+    figures: string[];
+    /** Position among the rolling columns, `-1` for a static one */
+    order: number;
+}
+/** `from` and `value` as equal-length digit strings (same number of decimals, zero padded). */
+export declare function formatNumbers(from: unknown, value: unknown): {
+    start: string;
+    target: string;
+    negative: boolean;
+    label: string;
+};
+export declare function getNumberColumns(from: unknown, value: unknown, direction: RollingTextDirection): RollingTextColumn[];
+export declare function getTextColumns(texts: string[], direction: RollingTextDirection): RollingTextColumn[];

package/dist/rolling-text/utils.js

@@ -0,0 +1,74 @@
+// src/rolling-text/utils.ts
+/** How many full 0-9 loops a digit column makes between its start and target figure. */
+var LOOPS = 2;
+function getDecimals(num) {
+	const text = String(num);
+	if (text.includes("e")) return 0;
+	const dot = text.indexOf(".");
+	return dot === -1 ? 0 : text.length - dot - 1;
+}
+function toFinite(num) {
+	const value = Number(num);
+	return Number.isFinite(value) ? value : 0;
+}
+/** `from` and `value` as equal-length digit strings (same number of decimals, zero padded). */
+function formatNumbers(from, value) {
+	const start = toFinite(from);
+	const target = toFinite(value);
+	const decimals = Math.min(Math.max(getDecimals(start), getDecimals(target)), 20);
+	const startText = Math.abs(start).toFixed(decimals);
+	const targetText = Math.abs(target).toFixed(decimals);
+	const length = Math.max(startText.length, targetText.length);
+	return {
+		start: startText.padStart(length, "0"),
+		target: targetText.padStart(length, "0"),
+		negative: target < 0,
+		label: target.toFixed(decimals)
+	};
+}
+function getDigitFigures(start, target) {
+	const figures = [];
+	for (let i = start; i <= 9; i++) figures.push(String(i));
+	for (let loop = 0; loop < LOOPS; loop++) for (let i = 0; i <= 9; i++) figures.push(String(i));
+	for (let i = 0; i <= target; i++) figures.push(String(i));
+	return figures;
+}
+function finalize(columns, direction) {
+	let order = 0;
+	return columns.map((column) => ({
+		rolling: column.rolling,
+		figures: column.rolling && direction === "down" ? [...column.figures].reverse() : column.figures,
+		order: column.rolling ? order++ : -1
+	}));
+}
+function getNumberColumns(from, value, direction) {
+	const { start, target, negative } = formatNumbers(from, value);
+	const columns = [];
+	if (negative) columns.push({
+		rolling: false,
+		figures: ["-"]
+	});
+	for (let i = 0; i < target.length; i++) {
+		const char = target[i];
+		if (char >= "0" && char <= "9") columns.push({
+			rolling: true,
+			figures: getDigitFigures(Number(start[i]) || 0, Number(char))
+		});
+		else columns.push({
+			rolling: false,
+			figures: [char]
+		});
+	}
+	return finalize(columns, direction);
+}
+function getTextColumns(texts, direction) {
+	const rows = texts.map((text) => Array.from(String(text ?? "")));
+	const length = rows.length ? rows[rows.length - 1].length : 0;
+	const columns = [];
+	for (let i = 0; i < length; i++) columns.push({
+		rolling: true,
+		figures: rows.map((row) => row[i] ?? "")
+	});
+	return finalize(columns, direction);
+}
+export { formatNumbers, getNumberColumns, getTextColumns };

package/dist/safe-area/SafeArea.js

@@ -0,0 +1,4 @@
+import SafeArea_vue_vue_type_script_setup_true_lang_default from "./SafeArea.vue_vue_type_script_setup_true_lang.js";
+// src/safe-area/SafeArea.vue
+var SafeArea_default = SafeArea_vue_vue_type_script_setup_true_lang_default;
+export { SafeArea_default as default };

package/dist/safe-area/SafeArea.vue.d.ts

@@ -0,0 +1,15 @@
+import type { SafeAreaProps, SafeAreaSlots } from './interface';
+import '../style';
+import './style/index.css';
+type __VLS_Slots = SafeAreaSlots;
+declare const __VLS_base: import("vue").DefineComponent<SafeAreaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SafeAreaProps> & Readonly<{}>, {
+    position: import("./interface").SafeAreaPosition;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/safe-area/SafeArea.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,19 @@
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { createElementBlock, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+// src/safe-area/SafeArea.vue?vue&type=script&setup=true&lang.ts
+var SafeArea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmSafeArea",
+	inheritAttrs: false,
+	__name: "SafeArea",
+	props: {
+		position: { default: "bottom" },
+		rootClass: {}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, { class: ["am-safe-area", [`am-safe-area-position-${__props.position}`, __props.rootClass]] }), [renderSlot(_ctx.$slots, "default")], 16);
+		};
+	}
+});
+export { SafeArea_vue_vue_type_script_setup_true_lang_default as default };

package/dist/safe-area/index.d.ts

@@ -0,0 +1,23 @@
+export type * from './interface';
+declare const SafeArea: import("../_util/withInstall").WithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./interface").SafeAreaProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        position: import("./interface").SafeAreaPosition;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./interface").SafeAreaProps> & Readonly<{}>, {}, {}, {}, {}, {
+        position: import("./interface").SafeAreaPosition;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./interface").SafeAreaProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    position: import("./interface").SafeAreaPosition;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./interface").SafeAreaSlots;
+}), object>;
+export default SafeArea;

package/dist/safe-area/index.js

@@ -0,0 +1,5 @@
+import { withInstall } from "../_util/withInstall.js";
+import SafeArea_default from "./SafeArea.js";
+// src/safe-area/index.ts
+var SafeArea = withInstall(SafeArea_default, "AmSafeArea");
+export { SafeArea as default };

package/dist/safe-area/interface.d.ts

@@ -0,0 +1,9 @@
+export type SafeAreaPosition = 'top' | 'bottom';
+export interface SafeAreaProps {
+    /** Which inset of the screen to reserve */
+    position?: SafeAreaPosition;
+    rootClass?: string;
+}
+export interface SafeAreaSlots {
+    default?: () => any;
+}

package/dist/safe-area/style/index.css

@@ -0,0 +1,18 @@
+.am-safe-area {
+  /* component tokens: multiplier of the inset, e.g. `2` doubles the reserved space */
+  --am-safe-area-multiple: 1;
+
+  display: block;
+  box-sizing: content-box;
+  width: 100%;
+}
+
+.am-safe-area-position-top {
+  padding-top: calc(constant(safe-area-inset-top) * var(--am-safe-area-multiple));
+  padding-top: calc(env(safe-area-inset-top) * var(--am-safe-area-multiple));
+}
+
+.am-safe-area-position-bottom {
+  padding-bottom: calc(constant(safe-area-inset-bottom) * var(--am-safe-area-multiple));
+  padding-bottom: calc(env(safe-area-inset-bottom) * var(--am-safe-area-multiple));
+}

package/dist/segmented/Segmented.js

@@ -0,0 +1,4 @@
+import Segmented_vue_vue_type_script_setup_true_lang_default from "./Segmented.vue_vue_type_script_setup_true_lang.js";
+// src/segmented/Segmented.vue
+var Segmented_default = Segmented_vue_vue_type_script_setup_true_lang_default;
+export { Segmented_default as default };

package/dist/segmented/Segmented.vue.d.ts

@@ -0,0 +1,25 @@
+import type { SegmentedProps, SegmentedSlots, SegmentedValue } from './interface';
+import '../style';
+import './style/index.css';
+type __VLS_Slots = SegmentedSlots;
+declare const __VLS_base: import("vue").DefineComponent<SegmentedProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: SegmentedValue) => any;
+    "update:value": (value: SegmentedValue) => any;
+}, string, import("vue").PublicProps, Readonly<SegmentedProps> & Readonly<{
+    onChange?: ((value: SegmentedValue) => any) | undefined;
+    "onUpdate:value"?: ((value: SegmentedValue) => any) | undefined;
+}>, {
+    block: boolean;
+    vertical: boolean;
+    disabled: boolean;
+    shape: "default" | "round";
+    options: import("./interface").SegmentedOption[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};