@antdv-next/mobile 0.0.0-stage → 0.1.0

package/dist/listy/interface.d.ts

@@ -0,0 +1,84 @@
+import type { CSSProperties, VNodeChild } from 'vue';
+import type { Key } from '../_util/type';
+/** Key of a row: a field name or a getter */
+export type ListyRowKey = string | ((item: any, index: number) => Key);
+export type ListyScrollAlign = 'top' | 'bottom' | 'auto';
+export interface ListyGroup {
+    /** Group key of an item (items with the same key form one group), or one fixed key for every item */
+    key: ((item: any) => Key) | Key;
+    /** Renders the group header; the `groupTitle` slot wins. Default: the group key. */
+    title?: (groupKey: Key, items: any[]) => VNodeChild;
+}
+export interface ListyClassNames {
+    root?: string;
+    item?: string;
+    groupHeader?: string;
+}
+export interface ListyStyles {
+    root?: CSSProperties;
+    item?: CSSProperties;
+    groupHeader?: CSSProperties;
+}
+export interface ListySemanticType {
+    classes?: ListyClassNames;
+    styles?: ListyStyles;
+}
+export interface ListyKeyScrollToConfig {
+    /** `rowKey` of the target item */
+    key: Key;
+    align?: ListyScrollAlign;
+    offset?: number;
+}
+export interface ListyGroupScrollToConfig {
+    groupKey: Key;
+    align?: ListyScrollAlign;
+    offset?: number;
+}
+export interface ListyPositionScrollToConfig {
+    left?: number;
+    top?: number;
+}
+export type ListyScrollToConfig = number | null | ListyKeyScrollToConfig | ListyPositionScrollToConfig | ListyGroupScrollToConfig;
+export interface ListyRef {
+    scrollTo: (config?: ListyScrollToConfig) => void;
+}
+export interface ListyProps {
+    /** Data source */
+    items?: any[];
+    /** Unique key of an item: a field name or a getter */
+    rowKey: ListyRowKey;
+    /** Renders a row; the same-named slot wins */
+    itemRender?: (item: any, index: number) => VNodeChild;
+    /** Group config: items with the same group key are collected under one header */
+    group?: ListyGroup;
+    /** Keep the header of the current group at the top while scrolling */
+    sticky?: boolean;
+    /** Max height of the scroll container (numbers are px); the list scrolls once the content is taller */
+    height?: number | string;
+    /** Only mount the rows around the visible window. `false` renders every row with the same DOM. */
+    virtual?: boolean;
+    /** Width of the content in px: the list scrolls horizontally when it is wider than the container */
+    scrollWidth?: number;
+    /** Press feedback on rows */
+    rowHoverable?: boolean;
+    /** Estimated row height in px, used before a row is measured */
+    itemHeight?: number;
+    rootClass?: string;
+    classes?: ListyClassNames;
+    styles?: ListyStyles;
+}
+export interface ListyEmits {
+    /** Native scroll event of the scroll container */
+    scroll: [event: Event];
+    /** Scrolled close to the end of the list, the hook for loading more */
+    reachEnd: [];
+}
+export interface ListySlots {
+    /** Renders a row. Called like the prop: the slot props are the item itself (`#itemRender="item"`). */
+    itemRender?: (item: any) => any;
+    /** Renders a group header, wins over `group.title` */
+    groupTitle?: (ctx: {
+        groupKey: Key;
+        items: any[];
+    }) => any;
+}

package/dist/listy/style/index.css

@@ -0,0 +1,91 @@
+/* Listy renders through VirtualList: `.am-listy` sits on its root, the scroll container */
+.am-listy {
+  /* component tokens */
+  --am-listy-item-padding-block: var(--am-padding-sm);
+  --am-listy-item-padding-inline: var(--am-padding);
+  --am-listy-item-border-color: var(--am-color-split);
+  --am-listy-item-active-bg: var(--am-color-fill-tertiary);
+  --am-listy-group-header-padding-block: var(--am-padding-xs);
+  --am-listy-group-header-color: var(--am-color-text-description);
+  --am-listy-group-header-font-weight: var(--am-font-weight-strong);
+  --am-listy-group-header-bg: var(--am-color-bg-container);
+  --am-listy-group-header-fill: var(--am-color-fill-alter);
+  --am-listy-group-header-z-index: 1;
+
+  position: relative;
+  box-sizing: border-box;
+  color: var(--am-color-text);
+  font-size: var(--am-font-size);
+  font-family: var(--am-font-family);
+  line-height: var(--am-line-height);
+  /* a measured row must not jump when the browser re-anchors the scroll position */
+  overflow-anchor: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.am-listy-scroll-x {
+  overflow-x: auto;
+}
+
+/* never narrower than the container, whatever `scrollWidth` says */
+.am-listy-scroll-x > .am-virtual-list-holder {
+  min-width: 100%;
+}
+
+/* ---------- item ---------- */
+.am-listy-item {
+  box-sizing: border-box;
+  padding: var(--am-listy-item-padding-block) var(--am-listy-item-padding-inline);
+  border-bottom: var(--am-line-width) solid var(--am-listy-item-border-color);
+}
+
+.am-listy-hoverable .am-listy-item {
+  transition: background-color var(--am-motion-duration-mid) var(--am-motion-ease-in-out);
+}
+
+.am-listy-hoverable .am-listy-item:active {
+  background-color: var(--am-listy-item-active-bg);
+}
+
+@media (hover: hover) {
+  .am-listy-hoverable .am-listy-item:hover {
+    background-color: var(--am-listy-item-active-bg);
+  }
+}
+
+/* ---------- group header ---------- */
+.am-listy-group-header {
+  box-sizing: border-box;
+  padding: var(--am-listy-group-header-padding-block) var(--am-listy-item-padding-inline);
+  color: var(--am-listy-group-header-color);
+  font-weight: var(--am-listy-group-header-font-weight);
+  /* opaque, so the rows never show through the pinned header */
+  background-color: var(--am-listy-group-header-bg);
+  background-image: linear-gradient(var(--am-listy-group-header-fill), var(--am-listy-group-header-fill));
+}
+
+/* zero-height sticky layer at the top of the scroll container: holds the pinned header */
+.am-listy > .am-virtual-list-header {
+  position: sticky;
+  top: 0;
+  z-index: var(--am-listy-group-header-z-index);
+  height: 0;
+}
+
+.am-listy-group-header-fixed {
+  position: absolute;
+  top: 0;
+  inset-inline: 0;
+  will-change: transform;
+}
+
+/* as wide as the scrolled content, so it scrolls horizontally with the rows */
+.am-listy-scroll-x .am-listy-group-header-fixed {
+  inset-inline-end: auto;
+  min-width: 100%;
+}
+
+/* ---------- rtl ---------- */
+.am-listy-rtl {
+  direction: rtl;
+}

package/dist/listy/util.d.ts

@@ -0,0 +1,56 @@
+import type { Key } from '../_util/type';
+import type { ListyGroup, ListyRowKey } from './interface';
+export interface ListyGroupEntry {
+    key: Key;
+    /** items of the group, in data order */
+    items: any[];
+    /** index of the header row in the flat row list */
+    rowIndex: number;
+}
+export interface ListyGroupRow {
+    type: 'group';
+    taggedKey: string;
+    group: ListyGroupEntry;
+}
+export interface ListyItemRow {
+    type: 'item';
+    taggedKey: string;
+    item: any;
+    /** index in `items` */
+    index: number;
+}
+export type ListyRow = ListyGroupRow | ListyItemRow;
+export interface ListyFlatRows {
+    rows: ListyRow[];
+    groups: ListyGroupEntry[];
+    /** flat row index -> index in `groups` (empty without groups) */
+    rowGroups: number[];
+}
+/**
+ * Type-tagged row key (`item:x` / `group:x`), so item and group keys never collide.
+ * Built and compared as a whole, never parsed back.
+ */
+export declare function toTaggedKey(key: Key, type: 'item' | 'group'): string;
+export declare function getItemKey(rowKey: ListyRowKey | undefined, item: any, index: number): Key;
+/**
+ * Flattens the data into the rows handed to VirtualList. With `group`, items sharing a group
+ * key are collected under one header row (groups are ordered by their first item), exactly
+ * like the PC implementation.
+ */
+export declare function flattenRows(items: any[], rowKey: ListyRowKey | undefined, group?: ListyGroup): ListyFlatRows;
+export interface RenderedRows {
+    /** the row wrappers currently in the DOM, in order */
+    elements: HTMLCollection;
+    /** flat row index of `elements[0]` */
+    first: number;
+    /** top edge of the scroll viewport (client coordinates) */
+    top: number;
+    /** bottom edge of the scroll viewport */
+    bottom: number;
+}
+/**
+ * The rows VirtualList currently renders inside `root` (its scroll container). Row positions are
+ * read from the DOM, so they are exact whatever the measured heights are.
+ */
+export declare function getRenderedRows(root: HTMLElement): RenderedRows | undefined;
+export declare function getRowElement(rendered: RenderedRows, rowIndex: number): HTMLElement | undefined;

package/dist/listy/util.js

@@ -0,0 +1,85 @@
+// src/listy/util.ts
+/**
+* Type-tagged row key (`item:x` / `group:x`), so item and group keys never collide.
+* Built and compared as a whole, never parsed back.
+*/
+function toTaggedKey(key, type) {
+	return `${type}:${key}`;
+}
+function getItemKey(rowKey, item, index) {
+	if (typeof rowKey === "function") return rowKey(item, index);
+	if (rowKey !== void 0 && item !== null && typeof item === "object" && item[rowKey] !== void 0) return item[rowKey];
+	return index;
+}
+/**
+* Flattens the data into the rows handed to VirtualList. With `group`, items sharing a group
+* key are collected under one header row (groups are ordered by their first item), exactly
+* like the PC implementation.
+*/
+function flattenRows(items, rowKey, group) {
+	const itemRow = (item, index) => ({
+		type: "item",
+		item,
+		index,
+		taggedKey: toTaggedKey(getItemKey(rowKey, item, index), "item")
+	});
+	if (!group) return {
+		rows: items.map(itemRow),
+		groups: [],
+		rowGroups: []
+	};
+	const segments = /* @__PURE__ */ new Map();
+	items.forEach((item, index) => {
+		const groupKey = typeof group.key === "function" ? group.key(item) : group.key;
+		const segment = segments.get(groupKey);
+		if (segment) segment.push(itemRow(item, index));
+		else segments.set(groupKey, [itemRow(item, index)]);
+	});
+	const rows = [];
+	const groups = [];
+	const rowGroups = [];
+	segments.forEach((segment, key) => {
+		const entry = {
+			key,
+			items: segment.map((row) => row.item),
+			rowIndex: rows.length
+		};
+		const groupIndex = groups.push(entry) - 1;
+		rows.push({
+			type: "group",
+			taggedKey: toTaggedKey(key, "group"),
+			group: entry
+		});
+		rowGroups.push(groupIndex);
+		segment.forEach((row) => {
+			rows.push(row);
+			rowGroups.push(groupIndex);
+		});
+	});
+	return {
+		rows,
+		groups,
+		rowGroups
+	};
+}
+/**
+* The rows VirtualList currently renders inside `root` (its scroll container). Row positions are
+* read from the DOM, so they are exact whatever the measured heights are.
+*/
+function getRenderedRows(root) {
+	const elements = root.querySelector(".am-virtual-list-inner")?.children;
+	if (!elements?.length) return void 0;
+	const first = Number(elements[0].dataset.index);
+	if (Number.isNaN(first)) return void 0;
+	const top = root.getBoundingClientRect().top + root.clientTop;
+	return {
+		elements,
+		first,
+		top,
+		bottom: top + root.clientHeight
+	};
+}
+function getRowElement(rendered, rowIndex) {
+	return rendered.elements[rowIndex - rendered.first];
+}
+export { flattenRows, getItemKey, getRenderedRows, getRowElement, toTaggedKey };

package/dist/loading-bar/LoadingBar.js

@@ -0,0 +1,4 @@
+import LoadingBar_vue_vue_type_script_setup_true_lang_default from "./LoadingBar.vue_vue_type_script_setup_true_lang.js";
+// src/loading-bar/LoadingBar.vue
+var LoadingBar_default = LoadingBar_vue_vue_type_script_setup_true_lang_default;
+export { LoadingBar_default as default };

package/dist/loading-bar/LoadingBar.vue.d.ts

@@ -0,0 +1,14 @@
+import type { LoadingBarProps } from './interface';
+import '../style';
+import './style/index.css';
+declare const __VLS_export: import("vue").DefineComponent<LoadingBarProps, {
+    nativeElement: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoadingBarProps> & Readonly<{}>, {
+    open: boolean;
+    status: import("./interface").LoadingBarStatus;
+    percent: number;
+    animated: boolean;
+    leaving: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/loading-bar/LoadingBar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,80 @@
+import Portal_default from "../_base/Portal.js";
+import { addUnit } from "../_util/index.js";
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { computed, createBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, openBlock, ref, unref, withCtx } from "vue";
+// src/loading-bar/LoadingBar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"dir",
+	"aria-valuenow",
+	"aria-hidden"
+];
+var LoadingBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmLoadingBar",
+	inheritAttrs: false,
+	__name: "LoadingBar",
+	props: {
+		open: {
+			type: Boolean,
+			default: false
+		},
+		percent: { default: 0 },
+		status: { default: "loading" },
+		animated: {
+			type: Boolean,
+			default: true
+		},
+		leaving: {
+			type: Boolean,
+			default: false
+		},
+		color: {},
+		errorColor: {},
+		height: {},
+		top: {},
+		zIndex: {},
+		getContainer: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const rootRef = ref();
+		const rootStyle = computed(() => ({
+			"zIndex": props.zIndex,
+			"--am-loading-bar-color": props.color,
+			"--am-loading-bar-error-color": props.errorColor,
+			"--am-loading-bar-height": addUnit(props.height),
+			"--am-loading-bar-top": addUnit(props.top)
+		}));
+		__expose({ nativeElement: rootRef });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Portal_default), { "get-container": __props.getContainer }, {
+				default: withCtx(({ theme }) => [createElementVNode("div", mergeProps({
+					ref_key: "rootRef",
+					ref: rootRef
+				}, _ctx.$attrs, {
+					class: ["am-loading-bar", [
+						theme.class,
+						`am-loading-bar-${__props.status}`,
+						{
+							"am-loading-bar-open": __props.open,
+							"am-loading-bar-animated": __props.animated,
+							"am-loading-bar-leaving": __props.leaving
+						}
+					]],
+					style: [theme.style, rootStyle.value],
+					dir: theme.dir,
+					role: "progressbar",
+					"aria-valuemin": "0",
+					"aria-valuemax": "100",
+					"aria-valuenow": Math.round(__props.percent),
+					"aria-hidden": !__props.open
+				}), [createElementVNode("div", {
+					class: "am-loading-bar-inner",
+					style: normalizeStyle({ width: `${__props.percent}%` })
+				}, null, 4)], 16, _hoisted_1)]),
+				_: 1
+			}, 8, ["get-container"]);
+		};
+	}
+});
+export { LoadingBar_vue_vue_type_script_setup_true_lang_default as default };

package/dist/loading-bar/api.d.ts

@@ -0,0 +1,3 @@
+import type { LoadingBarApi } from './interface';
+declare const LoadingBar: LoadingBarApi;
+export default LoadingBar;

package/dist/loading-bar/api.js

@@ -0,0 +1,110 @@
+import { inBrowser } from "../_util/index.js";
+import { nextZIndex } from "../_util/hooks/useZIndex.js";
+import { mountComponent } from "../_util/mount.js";
+import LoadingBar_default from "./LoadingBar.js";
+import { h, reactive, shallowReactive } from "vue";
+// src/loading-bar/api.ts
+/** the bar creeps towards this value while waiting */
+var WAITING_PERCENT = 90;
+var TRICKLE_INTERVAL = 200;
+/** time the bar stays full before it fades (matches the width transition) */
+var FILL_DURATION = 200;
+/** matches the opacity transition */
+var FADE_DURATION = 300;
+var globalOptions = shallowReactive({});
+var state = reactive({
+	open: false,
+	percent: 0,
+	status: "loading",
+	animated: false,
+	leaving: false,
+	zIndex: void 0
+});
+var timer;
+var trickleTimer;
+var holder;
+function clearTimers() {
+	clearTimeout(timer);
+	clearInterval(trickleTimer);
+	timer = void 0;
+	trickleTimer = void 0;
+}
+function ensureHolder() {
+	if (holder) {
+		const el = holder.instance?.nativeElement;
+		if (!el || el.isConnected) return;
+		holder.unmount();
+		holder = void 0;
+	}
+	const created = { unmount: () => {} };
+	holder = created;
+	created.unmount = mountComponent(() => h(LoadingBar_default, {
+		open: state.open,
+		percent: state.percent,
+		status: state.status,
+		animated: state.animated,
+		leaving: state.leaving,
+		zIndex: globalOptions.zIndex ?? state.zIndex,
+		color: globalOptions.color,
+		errorColor: globalOptions.errorColor,
+		height: globalOptions.height,
+		top: globalOptions.top,
+		getContainer: globalOptions.getContainer,
+		ref: (instance) => {
+			if (instance) created.instance = instance;
+		}
+	}), globalOptions.appContext).unmount;
+}
+function show(status, percent) {
+	clearTimers();
+	ensureHolder();
+	state.status = status;
+	state.leaving = false;
+	state.animated = false;
+	state.percent = percent;
+	state.zIndex = nextZIndex();
+	state.open = true;
+}
+function start() {
+	if (!inBrowser) return;
+	show("loading", 0);
+	timer = setTimeout(() => {
+		state.animated = true;
+		state.percent = 20;
+		trickleTimer = setInterval(() => {
+			state.percent = Math.round((state.percent + (WAITING_PERCENT - state.percent) * .1) * 100) / 100;
+		}, TRICKLE_INTERVAL);
+	}, 16);
+}
+function complete(status) {
+	if (!inBrowser) return;
+	if (!state.open || state.leaving) {
+		if (status !== "error") return;
+		show("error", 0);
+	}
+	clearTimers();
+	state.status = status;
+	timer = setTimeout(() => {
+		state.animated = true;
+		state.percent = 100;
+		timer = setTimeout(() => {
+			state.leaving = true;
+			timer = setTimeout(() => {
+				state.open = false;
+				state.leaving = false;
+				state.animated = false;
+				state.percent = 0;
+				state.status = "loading";
+			}, FADE_DURATION);
+		}, FILL_DURATION);
+	}, 16);
+}
+var LoadingBar = {
+	start,
+	finish: () => complete("loading"),
+	error: () => complete("error"),
+	config(options) {
+		Object.assign(globalOptions, options);
+	}
+};
+export { LoadingBar as default };

package/dist/loading-bar/index.d.ts

@@ -0,0 +1,3 @@
+import LoadingBar from './api';
+export type * from './interface';
+export default LoadingBar;

package/dist/loading-bar/index.js

@@ -0,0 +1,4 @@
+import LoadingBar from "./api.js";
+// src/loading-bar/index.ts
+var loading_bar_default = LoadingBar;
+export { loading_bar_default as default };

package/dist/loading-bar/interface.d.ts

@@ -0,0 +1,42 @@
+import type { AppContext } from 'vue';
+export type LoadingBarStatus = 'loading' | 'error';
+export interface LoadingBarConfigOptions {
+    /** Bar color, the primary color by default */
+    color?: string;
+    /** Bar color after `error()`, the error color by default */
+    errorColor?: string;
+    /** Bar thickness, numbers are px */
+    height?: number | string;
+    /** Distance to the top of the viewport, numbers are px (e.g. below a fixed NavBar) */
+    top?: number | string;
+    zIndex?: number;
+    getContainer?: () => HTMLElement;
+    /** App context of the host app */
+    appContext?: AppContext;
+}
+export interface LoadingBarApi {
+    /** Show the bar and let it creep forward */
+    start: () => void;
+    /** Fill the bar and fade it out */
+    finish: () => void;
+    /** Fill the bar in the error color and fade it out */
+    error: () => void;
+    config: (options: LoadingBarConfigOptions) => void;
+}
+/** Props of the internal bar component */
+export interface LoadingBarProps {
+    open?: boolean;
+    /** 0 - 100 */
+    percent?: number;
+    status?: LoadingBarStatus;
+    /** `false` jumps to `percent` without a transition */
+    animated?: boolean;
+    /** Fading out after `finish()` / `error()` */
+    leaving?: boolean;
+    color?: string;
+    errorColor?: string;
+    height?: number | string;
+    top?: number | string;
+    zIndex?: number;
+    getContainer?: () => HTMLElement;
+}

package/dist/loading-bar/style/index.css

@@ -0,0 +1,54 @@
+.am-loading-bar {
+  /* component tokens */
+  --am-loading-bar-height: 3px;
+  --am-loading-bar-top: 0px;
+  --am-loading-bar-color: var(--am-color-primary);
+  --am-loading-bar-error-color: var(--am-color-error);
+  --am-loading-bar-z-index: 2000;
+
+  position: fixed;
+  top: var(--am-loading-bar-top);
+  right: 0;
+  left: 0;
+  z-index: var(--am-loading-bar-z-index);
+  display: none;
+  box-sizing: border-box;
+  height: var(--am-loading-bar-height);
+  overflow: hidden;
+  opacity: 1;
+  pointer-events: none;
+}
+
+.am-loading-bar-open {
+  display: block;
+}
+
+.am-loading-bar-leaving {
+  opacity: 0;
+  transition: opacity var(--am-motion-duration-slow) linear;
+}
+
+.am-loading-bar-inner {
+  box-sizing: border-box;
+  width: 0;
+  height: 100%;
+  background: var(--am-loading-bar-color);
+  border-start-end-radius: var(--am-loading-bar-height);
+  border-end-end-radius: var(--am-loading-bar-height);
+}
+
+.am-loading-bar-animated > .am-loading-bar-inner {
+  transition:
+    width var(--am-motion-duration-mid) var(--am-motion-ease-out),
+    background-color var(--am-motion-duration-mid);
+}
+
+.am-loading-bar-error > .am-loading-bar-inner {
+  background: var(--am-loading-bar-error-color);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .am-loading-bar-animated > .am-loading-bar-inner {
+    transition: none;
+  }
+}

package/dist/locale/en_US.d.ts

@@ -0,0 +1,3 @@
+import type { Locale } from './interface';
+declare const enUS: Locale;
+export default enUS;