@antdv-next/mobile 0.0.0-stage → 0.1.0

package/dist/number-keyboard/NumberKeyboard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,398 @@
+import Portal_default from "../_base/Portal.js";
+import { preventDefault, toArray } from "../_util/index.js";
+import { nextZIndex } from "../_util/hooks/useZIndex.js";
+import { useClickAway } from "../_util/hooks/useClickAway.js";
+import { useControlled } from "../_util/hooks/useControlled.js";
+import { useTouch } from "../_util/hooks/useTouch.js";
+import RenderNode_default from "../_util/RenderNode.js";
+import { useLocale } from "../locale/index.js";
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, renderSlot, shallowRef, toDisplayString, unref, useSlots, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+// src/number-keyboard/NumberKeyboard.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["dir"];
+var _hoisted_2 = { class: "am-number-keyboard-title" };
+var _hoisted_3 = { class: "am-number-keyboard-keys" };
+var _hoisted_4 = [
+	"role",
+	"aria-label",
+	"onTouchstartPassive",
+	"onTouchend",
+	"onClick"
+];
+var _hoisted_5 = {
+	key: 0,
+	class: "am-number-keyboard-sidebar"
+};
+var _hoisted_6 = [
+	"aria-label",
+	"onTouchstartPassive",
+	"onTouchend",
+	"onClick"
+];
+var LONG_PRESS_DELAY = 500;
+var REPEAT_INTERVAL = 100;
+var GHOST_CLICK_DELAY = 500;
+var NumberKeyboard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmNumberKeyboard",
+	inheritAttrs: false,
+	__name: "NumberKeyboard",
+	props: {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		value: {},
+		defaultValue: {},
+		maxlength: {},
+		title: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		theme: { default: "default" },
+		extraKey: {},
+		randomKeyOrder: {
+			type: Boolean,
+			default: false
+		},
+		showDeleteKey: {
+			type: Boolean,
+			default: true
+		},
+		closeButtonText: {},
+		confirmText: {},
+		hideOnClickOutside: {
+			type: Boolean,
+			default: true
+		},
+		safeArea: {
+			type: Boolean,
+			default: true
+		},
+		poppable: {
+			type: Boolean,
+			default: true
+		},
+		getContainer: {
+			type: [
+				String,
+				Function,
+				Boolean
+			],
+			default: void 0
+		},
+		zIndex: {},
+		rootClass: {},
+		classes: {},
+		styles: {}
+	},
+	emits: [
+		"update:open",
+		"openChange",
+		"update:value",
+		"input",
+		"delete",
+		"confirm",
+		"close",
+		"blur"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const locale = useLocale("NumberKeyboard");
+		const touch = useTouch();
+		const rootRef = ref();
+		const [open, setOpenState] = useControlled(props, "open", {
+			defaultValue: () => props.defaultOpen ?? !props.poppable,
+			onChange: (value) => {
+				emit("update:open", value);
+				emit("openChange", value);
+			}
+		});
+		const [value, setValue] = useControlled(props, "value", {
+			defaultValue: () => props.defaultValue ?? "",
+			onChange: (val) => emit("update:value", val)
+		});
+		const rendered = ref(open.value);
+		const zIndex = ref(props.zIndex);
+		function hide() {
+			if (open.value) setOpenState(false);
+		}
+		function shuffle(list) {
+			const result = list.slice();
+			for (let i = result.length - 1; i > 0; i--) {
+				const j = Math.floor(Math.random() * (i + 1));
+				[result[i], result[j]] = [result[j], result[i]];
+			}
+			return result;
+		}
+		const ordered = Array.from({ length: 9 }, (_, index) => String(index + 1));
+		const digits = ref(props.randomKeyOrder ? shuffle(ordered) : ordered);
+		watch(open, (val) => {
+			if (!val) return;
+			rendered.value = true;
+			if (props.poppable) zIndex.value = props.zIndex ?? nextZIndex();
+			if (props.randomKeyOrder) digits.value = shuffle(ordered);
+		}, { immediate: true });
+		watch(() => props.randomKeyOrder, (random) => {
+			digits.value = random ? shuffle(ordered) : ordered;
+		});
+		watch(() => props.zIndex, (val) => {
+			if (val !== void 0) zIndex.value = val;
+		});
+		const extraKeys = computed(() => toArray(props.extraKey).map(String));
+		const keys = computed(() => {
+			const list = digits.value.map((text) => ({
+				text,
+				type: "digit"
+			}));
+			const extras = extraKeys.value;
+			if (props.theme === "custom") {
+				if (extras.length === 0) list.push({
+					text: "0",
+					type: "digit",
+					span: 3
+				});
+				else if (extras.length === 1) list.push({
+					text: "0",
+					type: "digit",
+					span: 2
+				}, {
+					text: extras[0],
+					type: "extra"
+				});
+				else list.push({
+					text: extras[0],
+					type: "extra"
+				}, {
+					text: "0",
+					type: "digit"
+				}, {
+					text: extras[1],
+					type: "extra"
+				});
+				return list;
+			}
+			const extra = extras[0] ?? "";
+			list.push({
+				text: extra,
+				type: extra || slots.extraKey ? "extra" : "blank"
+			}, {
+				text: "0",
+				type: "digit"
+			}, {
+				text: "",
+				type: props.showDeleteKey ? "delete" : "blank"
+			});
+			return list;
+		});
+		const sideKeys = computed(() => {
+			const list = [];
+			if (props.showDeleteKey) list.push({
+				text: "",
+				type: "delete"
+			});
+			list.push({
+				text: props.confirmText ?? locale.value.done,
+				type: "confirm"
+			});
+			return list;
+		});
+		const showHeader = computed(() => props.title !== void 0 || !!slots.title || props.theme === "default" && !!props.closeButtonText);
+		function press(key) {
+			switch (key.type) {
+				case "blank": break;
+				case "delete":
+					emit("delete");
+					if (value.value) setValue(value.value.slice(0, -1));
+					break;
+				case "confirm":
+					emit("confirm");
+					onClose();
+					break;
+				default:
+					if (!key.text || props.maxlength !== void 0 && value.value.length >= props.maxlength) break;
+					emit("input", key.text);
+					setValue(value.value + key.text);
+			}
+		}
+		function onClose() {
+			emit("close");
+			hide();
+		}
+		/** key under the finger, for press feedback */
+		const activeKey = shallowRef();
+		let repeatTimer;
+		let repeated = false;
+		/** time of the last touchend, to drop the click a browser still fires after it */
+		let lastTouchEnd = 0;
+		function stopRepeat() {
+			clearTimeout(repeatTimer);
+			repeatTimer = void 0;
+		}
+		function onTouchStart(key, event) {
+			touch.start(event);
+			activeKey.value = key;
+			repeated = false;
+			stopRepeat();
+			if (key.type === "delete") {
+				const repeat = () => {
+					repeated = true;
+					press(key);
+					repeatTimer = setTimeout(repeat, REPEAT_INTERVAL);
+				};
+				repeatTimer = setTimeout(repeat, LONG_PRESS_DELAY);
+			}
+		}
+		function onTouchMove(event) {
+			touch.move(event);
+			if (!touch.isTap.value) {
+				activeKey.value = void 0;
+				stopRepeat();
+			}
+		}
+		function onTouchEnd(key, event) {
+			stopRepeat();
+			lastTouchEnd = Date.now();
+			if (activeKey.value !== key) return;
+			activeKey.value = void 0;
+			preventDefault(event);
+			if (!repeated) press(key);
+		}
+		function onClick(key) {
+			if (Date.now() - lastTouchEnd < GHOST_CLICK_DELAY) return;
+			press(key);
+		}
+		function onTouchCancel() {
+			activeKey.value = void 0;
+			stopRepeat();
+		}
+		onBeforeUnmount(stopRepeat);
+		let lastTouch = 0;
+		function onOutside(event) {
+			if (event.type === "touchstart") lastTouch = Date.now();
+			else if (Date.now() - lastTouch < 500) return;
+			emit("blur");
+			hide();
+		}
+		const hideOnOutside = () => !!open.value && props.poppable && props.hideOnClickOutside;
+		useClickAway(rootRef, onOutside, {
+			eventName: "touchstart",
+			enabled: hideOnOutside
+		});
+		useClickAway(rootRef, onOutside, {
+			eventName: "mousedown",
+			enabled: hideOnOutside
+		});
+		const classNames = computed(() => [
+			"am-number-keyboard",
+			`am-number-keyboard-${props.theme}`,
+			{
+				"am-number-keyboard-fixed": props.poppable,
+				"am-number-keyboard-safe-area": props.safeArea && props.poppable,
+				"am-number-keyboard-with-header": showHeader.value
+			},
+			props.rootClass,
+			props.classes?.root
+		]);
+		function keyClass(key) {
+			return [
+				`am-number-keyboard-key-${key.type}`,
+				{ "am-number-keyboard-key-active": activeKey.value === key },
+				props.classes?.key
+			];
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Portal_default), { "get-container": __props.poppable ? __props.getContainer : false }, {
+				default: withCtx(({ theme: scope }) => [createVNode(Transition, {
+					name: __props.poppable ? "am-slide-bottom" : void 0,
+					css: __props.poppable,
+					appear: ""
+				}, {
+					default: withCtx(() => [rendered.value ? withDirectives((openBlock(), createElementBlock("div", mergeProps({
+						key: 0,
+						ref_key: "rootRef",
+						ref: rootRef
+					}, _ctx.$attrs, {
+						class: [classNames.value, scope.class],
+						style: [
+							scope.style,
+							{ zIndex: __props.poppable ? zIndex.value : void 0 },
+							__props.styles?.root
+						],
+						dir: scope.dir,
+						onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
+					}), [showHeader.value ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(["am-number-keyboard-header", __props.classes?.header]),
+						style: normalizeStyle(__props.styles?.header)
+					}, [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "title", {}, () => [createVNode(unref(RenderNode_default), { node: __props.title }, null, 8, ["node"])])]), __props.theme === "default" && __props.closeButtonText ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						type: "button",
+						class: "am-number-keyboard-close",
+						onClick: onClose
+					}, toDisplayString(__props.closeButtonText), 1)) : createCommentVNode("", true)], 6)) : createCommentVNode("", true), createElementVNode("div", {
+						class: normalizeClass(["am-number-keyboard-body", __props.classes?.body]),
+						style: normalizeStyle(__props.styles?.body)
+					}, [createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(keys.value, (key, index) => {
+						return openBlock(), createElementBlock("div", {
+							key: index,
+							class: "am-number-keyboard-key-wrapper",
+							style: normalizeStyle(key.span ? { gridColumn: `span ${key.span}` } : void 0)
+						}, [createElementVNode("div", {
+							class: normalizeClass(["am-number-keyboard-key", keyClass(key)]),
+							style: normalizeStyle(__props.styles?.key),
+							role: key.type === "blank" ? void 0 : "button",
+							"aria-label": key.type === "delete" ? unref(locale).delete : void 0,
+							onTouchstartPassive: ($event) => onTouchStart(key, $event),
+							onTouchmovePassive: onTouchMove,
+							onTouchend: ($event) => onTouchEnd(key, $event),
+							onTouchcancel: onTouchCancel,
+							onClick: ($event) => onClick(key)
+						}, [key.type === "delete" ? renderSlot(_ctx.$slots, "delete", {}, () => [_cache[1] || (_cache[1] = createElementVNode("svg", {
+							class: "am-number-keyboard-delete-icon",
+							viewBox: "0 0 32 22",
+							fill: "none",
+							stroke: "currentColor",
+							"stroke-width": "2",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"aria-hidden": "true"
+						}, [createElementVNode("path", { d: "M11 1h17a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H11a3 3 0 0 1-2.2-1l-7.3-7.7a2 2 0 0 1 0-2.6L8.8 2A3 3 0 0 1 11 1z" }), createElementVNode("path", { d: "M16 7l8 8M24 7l-8 8" })], -1))], void 0, 0) : key.type === "extra" && _ctx.$slots.extraKey && __props.theme === "default" ? renderSlot(_ctx.$slots, "extraKey", {}, () => [createTextVNode(toDisplayString(key.text), 1)], void 0, 1) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(key.text), 1)], 64))], 46, _hoisted_4)], 4);
+					}), 128))]), __props.theme === "custom" ? (openBlock(), createElementBlock("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(sideKeys.value, (key) => {
+						return openBlock(), createElementBlock("div", {
+							key: key.type,
+							class: "am-number-keyboard-key-wrapper"
+						}, [createElementVNode("div", {
+							class: normalizeClass(["am-number-keyboard-key am-number-keyboard-key-large", keyClass(key)]),
+							style: normalizeStyle(__props.styles?.key),
+							role: "button",
+							"aria-label": key.type === "delete" ? unref(locale).delete : void 0,
+							onTouchstartPassive: ($event) => onTouchStart(key, $event),
+							onTouchmovePassive: onTouchMove,
+							onTouchend: ($event) => onTouchEnd(key, $event),
+							onTouchcancel: onTouchCancel,
+							onClick: ($event) => onClick(key)
+						}, [key.type === "delete" ? renderSlot(_ctx.$slots, "delete", {}, () => [createTextVNode(toDisplayString(unref(locale).delete), 1)], void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(key.text), 1)], 64))], 46, _hoisted_6)]);
+					}), 128))])) : createCommentVNode("", true)], 6)], 16, _hoisted_1)), [[vShow, unref(open)]]) : createCommentVNode("", true)]),
+					_: 2
+				}, 1032, ["name", "css"])]),
+				_: 3
+			}, 8, ["get-container"]);
+		};
+	}
+});
+export { NumberKeyboard_vue_vue_type_script_setup_true_lang_default as default };

package/dist/number-keyboard/index.d.ts

@@ -0,0 +1,101 @@
+export type * from './interface';
+declare const NumberKeyboard: import("../_util/withInstall").WithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./interface").NumberKeyboardProps> & Readonly<{
+        onInput?: ((key: string) => any) | undefined;
+        onBlur?: (() => any) | undefined;
+        onClose?: (() => any) | undefined;
+        onDelete?: (() => any) | undefined;
+        onConfirm?: (() => any) | undefined;
+        "onUpdate:open"?: ((open: boolean) => any) | undefined;
+        "onUpdate:value"?: ((value: string) => any) | undefined;
+        onOpenChange?: ((open: boolean) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        input: (key: string) => any;
+        blur: () => any;
+        close: () => any;
+        delete: () => any;
+        confirm: () => any;
+        "update:open": (open: boolean) => any;
+        "update:value": (value: string) => any;
+        openChange: (open: boolean) => any;
+    }, import("vue").PublicProps, {
+        title: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+        safeArea: boolean;
+        open: boolean;
+        getContainer: import("../index.ts").GetContainer;
+        theme: import("./interface").NumberKeyboardTheme;
+        defaultOpen: boolean;
+        poppable: boolean;
+        randomKeyOrder: boolean;
+        showDeleteKey: boolean;
+        hideOnClickOutside: boolean;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./interface").NumberKeyboardProps> & Readonly<{
+        onInput?: ((key: string) => any) | undefined;
+        onBlur?: (() => any) | undefined;
+        onClose?: (() => any) | undefined;
+        onDelete?: (() => any) | undefined;
+        onConfirm?: (() => any) | undefined;
+        "onUpdate:open"?: ((open: boolean) => any) | undefined;
+        "onUpdate:value"?: ((value: string) => any) | undefined;
+        onOpenChange?: ((open: boolean) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        title: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+        safeArea: boolean;
+        open: boolean;
+        getContainer: import("../index.ts").GetContainer;
+        theme: import("./interface").NumberKeyboardTheme;
+        defaultOpen: boolean;
+        poppable: boolean;
+        randomKeyOrder: boolean;
+        showDeleteKey: boolean;
+        hideOnClickOutside: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./interface").NumberKeyboardProps> & Readonly<{
+    onInput?: ((key: string) => any) | undefined;
+    onBlur?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onDelete?: (() => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    "onUpdate:value"?: ((value: string) => any) | undefined;
+    onOpenChange?: ((open: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (key: string) => any;
+    blur: () => any;
+    close: () => any;
+    delete: () => any;
+    confirm: () => any;
+    "update:open": (open: boolean) => any;
+    "update:value": (value: string) => any;
+    openChange: (open: boolean) => any;
+}, string, {
+    title: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+    safeArea: boolean;
+    open: boolean;
+    getContainer: import("../index.ts").GetContainer;
+    theme: import("./interface").NumberKeyboardTheme;
+    defaultOpen: boolean;
+    poppable: boolean;
+    randomKeyOrder: boolean;
+    showDeleteKey: boolean;
+    hideOnClickOutside: 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").NumberKeyboardSlots;
+}), object>;
+export default NumberKeyboard;

package/dist/number-keyboard/index.js

@@ -0,0 +1,5 @@
+import { withInstall } from "../_util/withInstall.js";
+import NumberKeyboard_default from "./NumberKeyboard.js";
+// src/number-keyboard/index.ts
+var NumberKeyboard = withInstall(NumberKeyboard_default, "AmNumberKeyboard");
+export { NumberKeyboard as default };

package/dist/number-keyboard/interface.d.ts

@@ -0,0 +1,72 @@
+import type { CSSProperties } from 'vue';
+import type { GetContainer, VueNode } from '../_util/type';
+export type NumberKeyboardTheme = 'default' | 'custom';
+export type NumberKeyboardKeyType = 'digit' | 'extra' | 'delete' | 'confirm' | 'blank';
+export interface NumberKeyboardSemanticClassNames {
+    root?: string;
+    header?: string;
+    body?: string;
+    key?: string;
+}
+export interface NumberKeyboardSemanticStyles {
+    root?: CSSProperties;
+    header?: CSSProperties;
+    body?: CSSProperties;
+    key?: CSSProperties;
+}
+export interface NumberKeyboardProps {
+    /** Whether the keyboard is shown. Supports `v-model:open`. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    /** The typed string. Supports `v-model:value`. */
+    value?: string;
+    defaultValue?: string;
+    /** Max length of `value`, further keys are ignored */
+    maxlength?: number;
+    /** Title of the header, the `title` slot wins */
+    title?: VueNode;
+    /** `custom`: adds a right column with the delete key and a big confirm button */
+    theme?: NumberKeyboardTheme;
+    /** Extra key(s) such as `.` or `X`: one in the default theme, up to two in the custom theme */
+    extraKey?: string | string[];
+    /** Shuffle the digits every time the keyboard opens */
+    randomKeyOrder?: boolean;
+    showDeleteKey?: boolean;
+    /** Text of the close button in the header (default theme) */
+    closeButtonText?: string;
+    /** Text of the confirm button (custom theme) */
+    confirmText?: string;
+    /** Hide when the user taps outside of the keyboard */
+    hideOnClickOutside?: boolean;
+    /** Reserve the bottom safe area (home indicator) */
+    safeArea?: boolean;
+    /** `true`: fixed to the bottom of the screen; `false`: rendered inline in the page */
+    poppable?: boolean;
+    /** Teleport target when poppable. Default `document.body`; `false` renders in place. */
+    getContainer?: GetContainer;
+    zIndex?: number;
+    rootClass?: string;
+    classes?: NumberKeyboardSemanticClassNames;
+    styles?: NumberKeyboardSemanticStyles;
+}
+export interface NumberKeyboardEmits {
+    'update:open': [open: boolean];
+    'openChange': [open: boolean];
+    'update:value': [value: string];
+    /** A digit or extra key was pressed */
+    'input': [key: string];
+    'delete': [];
+    /** The confirm button was pressed (custom theme) */
+    'confirm': [];
+    /** The close / confirm button was pressed */
+    'close': [];
+    /** The user tapped outside of the keyboard */
+    'blur': [];
+}
+export interface NumberKeyboardSlots {
+    title?: () => any;
+    /** Content of the delete key */
+    delete?: () => any;
+    /** Content of the bottom-left key of the default theme */
+    extraKey?: () => any;
+}