@antdv-next/mobile 0.0.0-stage → 0.1.0

package/dist/modal/Modal.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,362 @@
+import { cls, isPromise, isRenderable } from "../_util/index.js";
+import RenderNode_default from "../_util/RenderNode.js";
+import Button_default from "../button/Button.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 { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, reactive, renderList, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
+import { CloseOutlined } from "@antdv-next/icons";
+// src/modal/Modal.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = { class: "am-modal-content" };
+var _hoisted_3 = ["src"];
+var Modal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmModal",
+	inheritAttrs: false,
+	__name: "Modal",
+	props: {
+		open: {
+			type: Boolean,
+			default: false
+		},
+		title: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		content: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		footer: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		okText: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		cancelText: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		okType: { default: "primary" },
+		okButtonProps: {},
+		cancelButtonProps: {},
+		confirmLoading: {
+			type: Boolean,
+			default: false
+		},
+		okCancel: {
+			type: Boolean,
+			default: true
+		},
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		closeIcon: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		mask: {
+			type: Boolean,
+			default: true
+		},
+		maskClosable: {
+			type: Boolean,
+			default: true
+		},
+		centered: {
+			type: Boolean,
+			default: true
+		},
+		keyboard: {
+			type: Boolean,
+			default: true
+		},
+		destroyOnHidden: {
+			type: Boolean,
+			default: false
+		},
+		forceRender: {
+			type: Boolean,
+			default: false
+		},
+		getContainer: {
+			type: [
+				String,
+				Function,
+				Boolean
+			],
+			default: void 0
+		},
+		zIndex: {},
+		width: {},
+		scrollLock: {
+			type: Boolean,
+			default: true
+		},
+		image: {},
+		actions: {},
+		closeOnAction: {
+			type: Boolean,
+			default: false
+		},
+		rootClass: {},
+		rootStyle: {},
+		classes: {},
+		styles: {}
+	},
+	emits: [
+		"update:open",
+		"ok",
+		"cancel",
+		"action",
+		"afterClose",
+		"afterOpenChange"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const locale = useLocale("Modal");
+		const commonLocale = useLocale("common");
+		const hasTitle = computed(() => !!slots.title || isRenderable(props.title));
+		const hasBody = computed(() => !!slots.default || isRenderable(props.content));
+		const hasHeader = computed(() => !!slots.header || !!props.image);
+		const showClose = computed(() => props.closable && props.closeIcon !== null && props.closeIcon !== false);
+		const hasActions = computed(() => Array.isArray(props.actions) && props.actions.length > 0);
+		/** `footer: null | false` removes the footer; `undefined` renders the default buttons */
+		const footerMode = computed(() => {
+			if (slots.footer) return "custom";
+			if (props.footer === null || props.footer === false) return "none";
+			if (props.footer !== void 0) return "custom";
+			return hasActions.value ? "actions" : "default";
+		});
+		const verticalActions = computed(() => (props.actions?.length ?? 0) > 2);
+		const okColor = computed(() => {
+			if (props.okType === "danger") return "danger";
+			return props.okType === "primary" || props.okType === "link" ? "primary" : "default";
+		});
+		function handleCancel(event) {
+			emit("cancel", event);
+			emit("update:open", false);
+		}
+		function handleOk(event) {
+			emit("ok", event);
+		}
+		const actionLoading = reactive({});
+		function handleAction(action, index) {
+			if (action.disabled || actionLoading[String(action.key)]) return;
+			const finish = () => {
+				emit("action", action, index);
+				if (props.closeOnAction) emit("update:open", false);
+			};
+			const result = action.onClick?.(action);
+			if (isPromise(result)) {
+				const key = String(action.key);
+				actionLoading[key] = true;
+				result.then(() => {
+					actionLoading[key] = false;
+					finish();
+				}, () => {
+					actionLoading[key] = false;
+				});
+			} else finish();
+		}
+		function getActionColor(action) {
+			if (action.danger) return "danger";
+			return action.bold ? "primary" : "default";
+		}
+		function onAfterOpenChange(open) {
+			emit("afterOpenChange", open);
+			if (!open) emit("afterClose");
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Popup_default, mergeProps(_ctx.$attrs, {
+				open: __props.open,
+				placement: "center",
+				mask: __props.mask,
+				"mask-closable": __props.maskClosable,
+				keyboard: __props.keyboard,
+				"lock-scroll": __props.scrollLock,
+				"destroy-on-hidden": __props.destroyOnHidden,
+				"force-render": __props.forceRender,
+				"get-container": __props.getContainer,
+				"z-index": __props.zIndex,
+				width: __props.width,
+				"root-class": unref(cls)("am-modal-root", __props.rootClass),
+				classes: {
+					root: __props.classes?.root,
+					mask: __props.classes?.mask,
+					body: unref(cls)("am-modal", __props.classes?.container)
+				},
+				styles: {
+					root: {
+						...__props.rootStyle,
+						...__props.styles?.root
+					},
+					mask: __props.styles?.mask,
+					body: __props.styles?.container
+				},
+				onClose: handleCancel,
+				onAfterOpenChange
+			}), {
+				default: withCtx(() => [
+					showClose.value ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						type: "button",
+						class: normalizeClass(["am-modal-close", __props.classes?.close]),
+						style: normalizeStyle(__props.styles?.close),
+						"aria-label": unref(commonLocale).close,
+						onClick: handleCancel
+					}, [renderSlot(_ctx.$slots, "closeIcon", {}, () => [unref(isRenderable)(__props.closeIcon) ? (openBlock(), createBlock(unref(RenderNode_default), {
+						key: 0,
+						node: __props.closeIcon
+					}, null, 8, ["node"])) : (openBlock(), createBlock(unref(CloseOutlined), { key: 1 }))])], 14, _hoisted_1)) : createCommentVNode("", true),
+					createElementVNode("div", _hoisted_2, [
+						hasHeader.value ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: normalizeClass(["am-modal-header", __props.classes?.header]),
+							style: normalizeStyle(__props.styles?.header)
+						}, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("img", {
+							class: "am-modal-image",
+							src: __props.image,
+							alt: ""
+						}, null, 8, _hoisted_3)])], 6)) : createCommentVNode("", true),
+						hasTitle.value ? (openBlock(), createElementBlock("div", {
+							key: 1,
+							class: normalizeClass(["am-modal-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),
+						hasBody.value ? (openBlock(), createElementBlock("div", {
+							key: 2,
+							class: normalizeClass(["am-modal-body", __props.classes?.body]),
+							style: normalizeStyle(__props.styles?.body)
+						}, [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(unref(RenderNode_default), { node: __props.content }, null, 8, ["node"])])], 6)) : createCommentVNode("", true)
+					]),
+					footerMode.value !== "none" ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: normalizeClass(["am-modal-footer", [__props.classes?.footer, {
+							"am-modal-footer-custom": footerMode.value === "custom",
+							"am-modal-footer-vertical": footerMode.value === "actions" && verticalActions.value
+						}]]),
+						style: normalizeStyle(__props.styles?.footer)
+					}, [footerMode.value === "custom" ? renderSlot(_ctx.$slots, "footer", {
+						ok: handleOk,
+						cancel: handleCancel,
+						confirmLoading: __props.confirmLoading
+					}, () => [createVNode(unref(RenderNode_default), { node: __props.footer }, null, 8, ["node"])], void 0, 0) : footerMode.value === "actions" ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(__props.actions, (action, index) => {
+						return openBlock(), createBlock(Button_default, {
+							key: action.key,
+							class: normalizeClass(["am-modal-action", { "am-modal-action-bold": action.bold }]),
+							variant: "text",
+							color: getActionColor(action),
+							disabled: action.disabled,
+							loading: !!actionLoading[String(action.key)],
+							onClick: ($event) => handleAction(action, index)
+						}, {
+							default: withCtx(() => [createVNode(unref(RenderNode_default), { node: action.text }, null, 8, ["node"])]),
+							_: 2
+						}, 1032, [
+							"class",
+							"color",
+							"disabled",
+							"loading",
+							"onClick"
+						]);
+					}), 128)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [__props.okCancel ? (openBlock(), createBlock(Button_default, mergeProps({
+						key: 0,
+						class: "am-modal-action am-modal-action-cancel",
+						variant: "text",
+						color: "default"
+					}, __props.cancelButtonProps, { onClick: handleCancel }), {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "cancelText", {}, () => [unref(isRenderable)(__props.cancelText) ? (openBlock(), createBlock(unref(RenderNode_default), {
+							key: 0,
+							node: __props.cancelText
+						}, null, 8, ["node"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(unref(locale).cancelText), 1)], 64))])]),
+						_: 3
+					}, 16)) : createCommentVNode("", true), createVNode(Button_default, mergeProps({
+						class: "am-modal-action am-modal-action-ok am-modal-action-bold",
+						variant: "text",
+						color: okColor.value
+					}, __props.okButtonProps, {
+						loading: __props.confirmLoading || __props.okButtonProps?.loading,
+						onClick: handleOk
+					}), {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "okText", {}, () => [unref(isRenderable)(__props.okText) ? (openBlock(), createBlock(unref(RenderNode_default), {
+							key: 0,
+							node: __props.okText
+						}, null, 8, ["node"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(__props.okCancel ? unref(locale).okText : unref(locale).justOkText), 1)], 64))])]),
+						_: 3
+					}, 16, ["color", "loading"])], 64))], 6)) : createCommentVNode("", true)
+				]),
+				_: 3
+			}, 16, [
+				"open",
+				"mask",
+				"mask-closable",
+				"keyboard",
+				"lock-scroll",
+				"destroy-on-hidden",
+				"force-render",
+				"get-container",
+				"z-index",
+				"width",
+				"root-class",
+				"classes",
+				"styles"
+			]);
+		};
+	}
+});
+export { Modal_vue_vue_type_script_setup_true_lang_default as default };

package/dist/modal/confirm.d.ts

@@ -0,0 +1,9 @@
+import type { Component } from 'vue';
+import type { ModalHookApi } from './interface';
+export declare const staticApi: ModalHookApi;
+export declare function destroyAll(): void;
+/**
+ * `const [modal, ContextHolder] = Modal.useModal()`: dialogs are rendered where `<ContextHolder />` is placed,
+ * so they keep the ConfigProvider / provide context of the calling component.
+ */
+export declare function useModal(): [ModalHookApi, Component];

package/dist/modal/confirm.js

@@ -0,0 +1,202 @@
+import { isPromise, isRenderable } from "../_util/index.js";
+import { mountComponent } from "../_util/mount.js";
+import Modal_default from "./Modal.js";
+import { Fragment, defineComponent, h, ref, shallowRef } from "vue";
+import { CheckCircleFilled, CloseCircleFilled, ExclamationCircleFilled, InfoCircleFilled } from "@antdv-next/icons";
+// src/modal/confirm.ts
+var staticHost = { add(render, appContext) {
+	return mountComponent(render, appContext).unmount;
+} };
+var destroyFns = /* @__PURE__ */ new Set();
+var typeIcons = {
+	info: InfoCircleFilled,
+	success: CheckCircleFilled,
+	error: CloseCircleFilled,
+	warning: ExclamationCircleFilled
+};
+function renderNode(node) {
+	return typeof node === "function" ? node() : node;
+}
+function createDialog(initial, host) {
+	const config = shallowRef({ ...initial });
+	const open = ref(true);
+	const okLoading = ref(false);
+	const cancelLoading = ref(false);
+	let remove;
+	let settled = false;
+	let resolveResult;
+	const result = new Promise((resolve) => {
+		resolveResult = resolve;
+	});
+	function close(value = false) {
+		if (!settled) {
+			settled = true;
+			resolveResult(value);
+		}
+		open.value = false;
+	}
+	function destroy() {
+		close(false);
+	}
+	destroyFns.add(destroy);
+	function run(handler, loading, value) {
+		if (loading.value) return;
+		if (!handler) {
+			close(value);
+			return;
+		}
+		let returned;
+		if (handler.length > 0) returned = handler(() => close(value));
+		else {
+			returned = handler();
+			if (!isPromise(returned)) {
+				close(value);
+				return;
+			}
+		}
+		if (!isPromise(returned)) return;
+		loading.value = true;
+		returned.then(() => {
+			loading.value = false;
+			close(value);
+		}, () => {
+			loading.value = false;
+		});
+	}
+	function onAfterOpenChange(visible) {
+		if (visible) return;
+		destroyFns.delete(destroy);
+		config.value.afterClose?.();
+		remove?.();
+	}
+	const render = () => {
+		const c = config.value;
+		const type = c.type === "warn" ? "warning" : c.type;
+		const okCancel = c.okCancel ?? type === "confirm";
+		const DefaultIcon = type ? typeIcons[type] : void 0;
+		const iconNode = isRenderable(c.icon) ? renderNode(c.icon) : c.icon === void 0 && DefaultIcon ? h(DefaultIcon) : null;
+		const slots = {};
+		if (isRenderable(c.content)) slots.default = () => renderNode(c.content);
+		if (iconNode) slots.header = () => h("span", { class: ["am-modal-icon", type && `am-modal-icon-${type}`] }, [iconNode]);
+		return h(Modal_default, {
+			"open": open.value,
+			"title": c.title,
+			"image": c.image,
+			"footer": c.footer,
+			"okText": c.okText,
+			"cancelText": c.cancelText,
+			"okType": c.okType,
+			"okCancel": okCancel,
+			"okButtonProps": c.okButtonProps,
+			"cancelButtonProps": {
+				...c.cancelButtonProps,
+				loading: cancelLoading.value || c.cancelButtonProps?.loading
+			},
+			"confirmLoading": okLoading.value,
+			"actions": c.actions,
+			"closable": c.closable ?? false,
+			"closeIcon": c.closeIcon,
+			"mask": c.mask ?? true,
+			"maskClosable": c.maskClosable ?? false,
+			"keyboard": c.keyboard ?? true,
+			"getContainer": c.getContainer,
+			"zIndex": c.zIndex,
+			"width": c.width,
+			"rootClass": c.rootClass,
+			"classes": c.classes,
+			"styles": c.styles,
+			"class": [
+				"am-modal-confirm",
+				type && `am-modal-confirm-${type}`,
+				c.class
+			],
+			"style": c.style,
+			"destroyOnHidden": true,
+			"onOk": () => run(c.onOk, okLoading, true),
+			"onCancel": () => run(c.onCancel, cancelLoading, false),
+			"onAction": (_action) => {
+				if (c.closeOnAction ?? true) close(false);
+			},
+			onAfterOpenChange
+		}, slots);
+	};
+	remove = host.add(render, initial.appContext);
+	return {
+		destroy,
+		update(next) {
+			config.value = typeof next === "function" ? next(config.value) : {
+				...config.value,
+				...next
+			};
+		},
+		result
+	};
+}
+function createApi(host) {
+	const withType = (type) => (config) => {
+		const { destroy, update } = createDialog({
+			...config,
+			type
+		}, host);
+		return {
+			destroy,
+			update
+		};
+	};
+	return {
+		info: withType("info"),
+		success: withType("success"),
+		error: withType("error"),
+		warning: withType("warning"),
+		confirm: withType("confirm"),
+		show(config) {
+			const { destroy, update } = createDialog(config, host);
+			return {
+				destroy,
+				update
+			};
+		},
+		alert(config) {
+			return createDialog({
+				...config,
+				okCancel: false
+			}, host).result.then(() => {});
+		},
+		confirmAsync(config) {
+			return createDialog({
+				type: "confirm",
+				...config
+			}, host).result;
+		}
+	};
+}
+var staticApi = createApi(staticHost);
+function destroyAll() {
+	Array.from(destroyFns).forEach((fn) => fn());
+}
+var holderSeed = 0;
+/**
+* `const [modal, ContextHolder] = Modal.useModal()`: dialogs are rendered where `<ContextHolder />` is placed,
+* so they keep the ConfigProvider / provide context of the calling component.
+*/
+function useModal() {
+	const items = shallowRef([]);
+	const host = { add(render) {
+		const item = {
+			id: ++holderSeed,
+			render
+		};
+		items.value = [...items.value, item];
+		return () => {
+			items.value = items.value.filter((i) => i !== item);
+		};
+	} };
+	const ContextHolder = defineComponent({
+		name: "AmModalContextHolder",
+		setup() {
+			return () => items.value.map((item) => h(Fragment, { key: item.id }, [item.render()]));
+		}
+	});
+	return [createApi(host), ContextHolder];
+}
+export { destroyAll, staticApi, useModal };