@antdv-next/mobile 0.0.0-stage → 0.1.0

package/dist/draggable/index.d.ts

@@ -0,0 +1,74 @@
+export type * from './interface';
+declare const Draggable: import("../_util/withInstall").WithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./interface").DraggableProps> & Readonly<{
+        onClick?: ((event: MouseEvent) => any) | undefined;
+        "onUpdate:offset"?: ((offset: import("./interface").DraggableOffset) => any) | undefined;
+        onOffsetChange?: ((offset: import("./interface").DraggableOffset) => any) | undefined;
+        onDragStart?: (() => any) | undefined;
+        onDragEnd?: ((offset: import("./interface").DraggableOffset) => any) | undefined;
+    }>, {
+        reset: () => void;
+        resize: () => void;
+        nativeElement: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        click: (event: MouseEvent) => any;
+        "update:offset": (offset: import("./interface").DraggableOffset) => any;
+        offsetChange: (offset: import("./interface").DraggableOffset) => any;
+        dragStart: () => any;
+        dragEnd: (offset: import("./interface").DraggableOffset) => any;
+    }, import("vue").PublicProps, {
+        disabled: boolean;
+        getContainer: import("../index.ts").GetContainer;
+        gap: number | import("./interface").DraggableGap;
+        axis: import("./interface").DraggableAxis;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./interface").DraggableProps> & Readonly<{
+        onClick?: ((event: MouseEvent) => any) | undefined;
+        "onUpdate:offset"?: ((offset: import("./interface").DraggableOffset) => any) | undefined;
+        onOffsetChange?: ((offset: import("./interface").DraggableOffset) => any) | undefined;
+        onDragStart?: (() => any) | undefined;
+        onDragEnd?: ((offset: import("./interface").DraggableOffset) => any) | undefined;
+    }>, {
+        reset: () => void;
+        resize: () => void;
+        nativeElement: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    }, {}, {}, {}, {
+        disabled: boolean;
+        getContainer: import("../index.ts").GetContainer;
+        gap: number | import("./interface").DraggableGap;
+        axis: import("./interface").DraggableAxis;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./interface").DraggableProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    "onUpdate:offset"?: ((offset: import("./interface").DraggableOffset) => any) | undefined;
+    onOffsetChange?: ((offset: import("./interface").DraggableOffset) => any) | undefined;
+    onDragStart?: (() => any) | undefined;
+    onDragEnd?: ((offset: import("./interface").DraggableOffset) => any) | undefined;
+}>, {
+    reset: () => void;
+    resize: () => void;
+    nativeElement: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+    "update:offset": (offset: import("./interface").DraggableOffset) => any;
+    offsetChange: (offset: import("./interface").DraggableOffset) => any;
+    dragStart: () => any;
+    dragEnd: (offset: import("./interface").DraggableOffset) => any;
+}, string, {
+    disabled: boolean;
+    getContainer: import("../index.ts").GetContainer;
+    gap: number | import("./interface").DraggableGap;
+    axis: import("./interface").DraggableAxis;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./interface").DraggableSlots;
+}), object>;
+export default Draggable;

package/dist/draggable/index.js

@@ -0,0 +1,5 @@
+import { withInstall } from "../_util/withInstall.js";
+import Draggable_default from "./Draggable.js";
+// src/draggable/index.ts
+var Draggable = withInstall(Draggable_default, "AmDraggable");
+export { Draggable as default };

package/dist/draggable/interface.d.ts

@@ -0,0 +1,48 @@
+import type { CSSProperties } from 'vue';
+import type { DraggableAxis, DraggableGap, DraggableMagnetic, DraggableOffset } from '../_util/hooks';
+import type { GetContainer } from '../_util/type';
+export type { DraggableAxis, DraggableGap, DraggableMagnetic, DraggableOffset };
+export interface DraggableSemanticClassNames {
+    root?: string;
+}
+export interface DraggableSemanticStyles {
+    root?: CSSProperties;
+}
+export interface DraggableProps {
+    /** Axis the element can be dragged along */
+    axis?: DraggableAxis;
+    /** Snap to the nearest edge of that axis when released */
+    magnetic?: DraggableMagnetic;
+    /** Top-left position in px (relative to the viewport, or the offset parent when positioned absolutely). Supports `v-model:offset`. */
+    offset?: DraggableOffset;
+    /** Minimal distance to the edges, one number or one per side */
+    gap?: number | DraggableGap;
+    disabled?: boolean;
+    zIndex?: number;
+    /** Mount node. Rendered in place by default. */
+    getContainer?: GetContainer;
+    rootClass?: string;
+    classes?: DraggableSemanticClassNames;
+    styles?: DraggableSemanticStyles;
+}
+export interface DraggableEmits {
+    /** Not fired for the click that ends a drag */
+    'click': [event: MouseEvent];
+    'update:offset': [offset: DraggableOffset];
+    /** The element was dropped at a new position (after snapping) */
+    'offsetChange': [offset: DraggableOffset];
+    'dragStart': [];
+    'dragEnd': [offset: DraggableOffset];
+}
+export interface DraggableSlots {
+    default?: (ctx: {
+        dragging: boolean;
+    }) => any;
+}
+export interface DraggableExpose {
+    /** Back to the initial position */
+    reset: () => void;
+    /** Clamp the position again after the container was resized (the window is handled automatically) */
+    resize: () => void;
+    nativeElement: HTMLElement | undefined;
+}

package/dist/draggable/style/index.css

@@ -0,0 +1,37 @@
+.am-draggable {
+  /* component tokens */
+  --am-draggable-z-index: 90;
+  --am-draggable-transition-duration: var(--am-motion-duration-mid);
+
+  position: fixed;
+  z-index: var(--am-draggable-z-index);
+  box-sizing: border-box;
+  width: fit-content;
+  color: var(--am-color-text);
+  font-size: var(--am-font-size);
+  font-family: var(--am-font-family);
+  line-height: var(--am-line-height);
+  cursor: grab;
+  /* eases the snap to the edge after release */
+  transition: transform var(--am-draggable-transition-duration) var(--am-motion-ease-out);
+  user-select: none;
+  touch-action: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+}
+
+.am-draggable-dragging {
+  cursor: grabbing;
+  transition: none;
+}
+
+.am-draggable-disabled {
+  cursor: default;
+  touch-action: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .am-draggable {
+    transition: none;
+  }
+}

package/dist/drawer/Drawer.js

@@ -0,0 +1,4 @@
+import Drawer_vue_vue_type_script_setup_true_lang_default from "./Drawer.vue_vue_type_script_setup_true_lang.js";
+// src/drawer/Drawer.vue
+var Drawer_default = Drawer_vue_vue_type_script_setup_true_lang_default;
+export { Drawer_default as default };

package/dist/drawer/Drawer.vue.d.ts

@@ -0,0 +1,52 @@
+import type { DrawerClosableConfig, DrawerProps, DrawerSlots } from './interface';
+import '../style';
+import './style/index.css';
+type __VLS_Slots = DrawerSlots;
+declare const __VLS_base: import("vue").DefineComponent<DrawerProps, {
+    /** the drawer panel element */
+    nativeElement: import("vue").ComputedRef<HTMLElement | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (event?: Event | undefined) => any;
+    "update:open": (open: boolean) => any;
+    afterOpenChange: (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<DrawerProps> & Readonly<{
+    onClose?: ((event?: Event | undefined) => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    onAfterOpenChange?: ((open: boolean) => any) | undefined;
+}>, {
+    round: boolean;
+    footer: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+    title: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+    mask: boolean;
+    safeArea: boolean;
+    size: import("./interface").DrawerSize;
+    open: boolean;
+    getContainer: import("../index.ts").GetContainer;
+    loading: boolean;
+    lockScroll: boolean;
+    closable: boolean | DrawerClosableConfig;
+    destroyOnHidden: boolean;
+    placement: import("./interface").DrawerPlacement;
+    maskClosable: boolean;
+    closeIcon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+    forceRender: boolean;
+    keyboard: boolean;
+    extra: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+    swipeToClose: boolean;
+}, {}, {}, {}, 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/drawer/Drawer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,385 @@
+import Spinner_default from "../_base/Spinner.js";
+import { addUnit, cls, isRenderable, preventDefault } from "../_util/index.js";
+import { useTouch } from "../_util/hooks/useTouch.js";
+import RenderNode_default from "../_util/RenderNode.js";
+import { useLocale } from "../locale/index.js";
+import Popup_default from "../popup/Popup.js";
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderSlot, unref, useSlots, watch, withCtx } from "vue";
+import { CloseOutlined } from "@antdv-next/icons";
+// src/drawer/Drawer.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["disabled", "aria-label"];
+var _hoisted_2 = ["aria-label"];
+var Drawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmDrawer",
+	inheritAttrs: false,
+	__name: "Drawer",
+	props: {
+		open: {
+			type: Boolean,
+			default: false
+		},
+		title: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		extra: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		footer: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		placement: { default: "bottom" },
+		closable: {
+			type: [Boolean, Object],
+			default: true
+		},
+		closeIcon: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		mask: {
+			type: Boolean,
+			default: true
+		},
+		maskClosable: {
+			type: Boolean,
+			default: true
+		},
+		keyboard: {
+			type: Boolean,
+			default: true
+		},
+		size: { default: "default" },
+		width: {},
+		height: {},
+		destroyOnHidden: {
+			type: Boolean,
+			default: false
+		},
+		forceRender: {
+			type: Boolean,
+			default: false
+		},
+		getContainer: {
+			type: [
+				String,
+				Function,
+				Boolean
+			],
+			default: void 0
+		},
+		zIndex: {},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		round: {
+			type: Boolean,
+			default: true
+		},
+		safeArea: {
+			type: Boolean,
+			default: true
+		},
+		lockScroll: {
+			type: Boolean,
+			default: true
+		},
+		swipeToClose: {
+			type: Boolean,
+			default: false
+		},
+		rootClass: {},
+		rootStyle: {},
+		classes: {},
+		styles: {}
+	},
+	emits: [
+		"update:open",
+		"close",
+		"afterOpenChange"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const commonLocale = useLocale("common");
+		const popupRef = ref();
+		const isVertical = computed(() => props.placement === "top" || props.placement === "bottom");
+		const closableConfig = computed(() => {
+			if (!props.closable || props.closeIcon === null || props.closeIcon === false) return null;
+			return typeof props.closable === "object" ? props.closable : {};
+		});
+		const mergedCloseIcon = computed(() => closableConfig.value?.closeIcon ?? props.closeIcon);
+		const closeAtStart = computed(() => closableConfig.value?.placement === "start");
+		const hasTitle = computed(() => !!slots.title || isRenderable(props.title));
+		const hasExtra = computed(() => !!slots.extra || isRenderable(props.extra));
+		const hasFooter = computed(() => !!slots.footer || isRenderable(props.footer));
+		const hasHeader = computed(() => hasTitle.value || hasExtra.value || !!closableConfig.value);
+		const showHandle = computed(() => props.swipeToClose && props.placement === "bottom");
+		/** `[width, height]` handed to Popup; `undefined` keeps the css default */
+		const sizeProps = computed(() => {
+			const custom = isVertical.value ? props.height : props.width;
+			let value;
+			if (custom !== void 0 && custom !== null && custom !== "") value = addUnit(custom);
+			else if (props.size !== "default" && props.size !== "large") value = addUnit(props.size);
+			return {
+				sized: value !== void 0,
+				width: isVertical.value ? void 0 : value,
+				height: isVertical.value ? value : void 0
+			};
+		});
+		const sectionClass = computed(() => cls("am-drawer", `am-drawer-${props.placement}`, {
+			"am-drawer-large": props.size === "large" && !sizeProps.value.sized,
+			"am-drawer-sized": sizeProps.value.sized,
+			"am-drawer-with-handle": showHandle.value
+		}, props.classes?.section));
+		function close(event) {
+			emit("close", event);
+			emit("update:open", false);
+		}
+		function onCloseClick(event) {
+			if (closableConfig.value?.disabled) return;
+			close(event);
+		}
+		const touch = useTouch();
+		let dragging = false;
+		let sectionHeight = 0;
+		function getSection() {
+			return popupRef.value?.nativeElement ?? void 0;
+		}
+		function resetSectionStyle() {
+			const el = getSection();
+			if (el) {
+				el.style.transform = "";
+				el.style.transition = "";
+			}
+		}
+		function onTouchStart(event) {
+			if (!showHandle.value) return;
+			touch.start(event);
+			dragging = true;
+			sectionHeight = getSection()?.offsetHeight ?? 0;
+		}
+		function onTouchMove(event) {
+			if (!dragging) return;
+			touch.move(event);
+			if (!touch.isVertical()) return;
+			preventDefault(event);
+			const el = getSection();
+			if (el) {
+				const offset = Math.max(touch.deltaY.value, 0);
+				el.style.transition = "none";
+				el.style.transform = `translate3d(0, ${offset}px, 0)`;
+			}
+		}
+		function onTouchEnd(event) {
+			if (!dragging) return;
+			dragging = false;
+			const el = getSection();
+			const offset = Math.max(touch.deltaY.value, 0);
+			const fast = Date.now() - touch.startTime.value < 300 && offset > 40;
+			const far = offset > Math.max(sectionHeight / 3, 60);
+			if (touch.isVertical() && (fast || far)) {
+				if (el) {
+					el.style.transition = "transform var(--am-motion-duration-mid) var(--am-motion-ease-out)";
+					el.style.transform = "translate3d(0, 100%, 0)";
+				}
+				close(event);
+			} else if (el) {
+				el.style.transition = "transform var(--am-motion-duration-mid) var(--am-motion-ease-out)";
+				el.style.transform = "";
+			}
+		}
+		function toTouchEvent(event) {
+			return {
+				touches: [{
+					clientX: event.clientX,
+					clientY: event.clientY
+				}],
+				cancelable: event.cancelable,
+				preventDefault: () => event.preventDefault()
+			};
+		}
+		function onMouseMove(event) {
+			onTouchMove(toTouchEvent(event));
+		}
+		function onMouseUp(event) {
+			removeMouseListeners();
+			onTouchEnd(event);
+		}
+		function removeMouseListeners() {
+			document.removeEventListener("mousemove", onMouseMove);
+			document.removeEventListener("mouseup", onMouseUp);
+		}
+		function onMouseDown(event) {
+			if (event.button !== 0 || dragging || !showHandle.value) return;
+			onTouchStart(toTouchEvent(event));
+			document.addEventListener("mousemove", onMouseMove);
+			document.addEventListener("mouseup", onMouseUp);
+		}
+		onBeforeUnmount(removeMouseListeners);
+		function onAfterOpenChange(open) {
+			if (!open) resetSectionStyle();
+			emit("afterOpenChange", open);
+		}
+		watch(() => props.open, (open) => {
+			if (open) resetSectionStyle();
+		});
+		__expose({ 
+		/** the drawer panel element */
+nativeElement: computed(() => getSection()) });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Popup_default, mergeProps({
+				ref_key: "popupRef",
+				ref: popupRef
+			}, _ctx.$attrs, {
+				open: __props.open,
+				placement: __props.placement,
+				mask: __props.mask,
+				"mask-closable": __props.maskClosable,
+				keyboard: __props.keyboard,
+				round: __props.round,
+				"safe-area": __props.safeArea,
+				"lock-scroll": __props.lockScroll,
+				"destroy-on-hidden": __props.destroyOnHidden,
+				"force-render": __props.forceRender,
+				"get-container": __props.getContainer,
+				"z-index": __props.zIndex,
+				width: sizeProps.value.width,
+				height: sizeProps.value.height,
+				"root-class": unref(cls)("am-drawer-root", __props.rootClass),
+				classes: {
+					root: __props.classes?.root,
+					mask: __props.classes?.mask,
+					body: sectionClass.value
+				},
+				styles: {
+					root: {
+						...__props.rootStyle,
+						...__props.styles?.root
+					},
+					mask: __props.styles?.mask,
+					body: __props.styles?.section
+				},
+				onClose: close,
+				onAfterOpenChange
+			}), {
+				default: withCtx(() => [
+					showHandle.value ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(["am-drawer-handle", __props.classes?.handle]),
+						style: normalizeStyle(__props.styles?.handle),
+						onMousedown: onMouseDown,
+						onTouchstart: onTouchStart,
+						onTouchmove: onTouchMove,
+						onTouchend: onTouchEnd,
+						onTouchcancel: onTouchEnd
+					}, [..._cache[0] || (_cache[0] = [createElementVNode("span", { class: "am-drawer-handle-bar" }, null, -1)])], 38)) : createCommentVNode("", true),
+					hasHeader.value ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: normalizeClass(["am-drawer-header", [__props.classes?.header, { "am-drawer-header-close-start": closeAtStart.value }]]),
+						style: normalizeStyle(__props.styles?.header),
+						onTouchstart: onTouchStart,
+						onTouchmove: onTouchMove,
+						onTouchend: onTouchEnd,
+						onTouchcancel: onTouchEnd
+					}, [
+						hasTitle.value ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: normalizeClass(["am-drawer-title", __props.classes?.title]),
+							style: normalizeStyle(__props.styles?.title)
+						}, [renderSlot(_ctx.$slots, "title", {}, () => [createVNode(unref(RenderNode_default), { node: __props.title }, null, 8, ["node"])])], 6)) : createCommentVNode("", true),
+						hasExtra.value ? (openBlock(), createElementBlock("div", {
+							key: 1,
+							class: normalizeClass(["am-drawer-extra", __props.classes?.extra]),
+							style: normalizeStyle(__props.styles?.extra)
+						}, [renderSlot(_ctx.$slots, "extra", {}, () => [createVNode(unref(RenderNode_default), { node: __props.extra }, null, 8, ["node"])])], 6)) : createCommentVNode("", true),
+						closableConfig.value ? (openBlock(), createElementBlock("button", {
+							key: 2,
+							type: "button",
+							class: normalizeClass(["am-drawer-close", [__props.classes?.close, { "am-drawer-close-disabled": closableConfig.value.disabled }]]),
+							style: normalizeStyle(__props.styles?.close),
+							disabled: closableConfig.value.disabled || void 0,
+							"aria-label": unref(commonLocale).close,
+							onClick: onCloseClick
+						}, [renderSlot(_ctx.$slots, "closeIcon", {}, () => [unref(isRenderable)(mergedCloseIcon.value) ? (openBlock(), createBlock(unref(RenderNode_default), {
+							key: 0,
+							node: mergedCloseIcon.value
+						}, null, 8, ["node"])) : (openBlock(), createBlock(unref(CloseOutlined), { key: 1 }))])], 14, _hoisted_1)) : createCommentVNode("", true)
+					], 38)) : createCommentVNode("", true),
+					createElementVNode("div", {
+						class: normalizeClass(["am-drawer-body", __props.classes?.body]),
+						style: normalizeStyle(__props.styles?.body)
+					}, [__props.loading ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: "am-drawer-loading",
+						role: "status",
+						"aria-label": unref(commonLocale).loading
+					}, [createVNode(unref(Spinner_default))], 8, _hoisted_2)) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)], 6),
+					hasFooter.value ? (openBlock(), createElementBlock("div", {
+						key: 2,
+						class: normalizeClass(["am-drawer-footer", __props.classes?.footer]),
+						style: normalizeStyle(__props.styles?.footer)
+					}, [renderSlot(_ctx.$slots, "footer", {}, () => [createVNode(unref(RenderNode_default), { node: __props.footer }, null, 8, ["node"])])], 6)) : createCommentVNode("", true)
+				]),
+				_: 3
+			}, 16, [
+				"open",
+				"placement",
+				"mask",
+				"mask-closable",
+				"keyboard",
+				"round",
+				"safe-area",
+				"lock-scroll",
+				"destroy-on-hidden",
+				"force-render",
+				"get-container",
+				"z-index",
+				"width",
+				"height",
+				"root-class",
+				"classes",
+				"styles"
+			]);
+		};
+	}
+});
+export { Drawer_vue_vue_type_script_setup_true_lang_default as default };