capacitor-native-input-dialog/dist/plugin.js

Capacitor plugin for native input dialogs with enhanced text input experience on mobile devices

var capacitorNativeInput = (function (exports, core) {
    'use strict';

    const NativeInput = core.registerPlugin('NativeInput', {
        web: () => Promise.resolve().then(function () { return web; }).then((m) => new m.NativeInputWeb()),
    });

    class NativeInputWeb extends core.WebPlugin {
        constructor() {
            super(...arguments);
            this.overlayMap = new Map();
        }
        async showNativeInput(options) {
            // Web 平台使用浏览器的 prompt 作为降级方案
            const title = options.title || '输入';
            const placeholder = options.placeholder || '';
            const initialValue = options.initialValue || '';
            const message = title + (placeholder ? `\n${placeholder}` : '');
            const result = prompt(message, initialValue);
            return {
                value: result || '',
                cancelled: result === null
            };
        }
        async createNativeOverlay(options) {
            // Web 平台创建一个 HTML 输入框作为覆盖层
            const overlayId = 'overlay_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
            // 创建输入框元素
            const input = document.createElement(options.multiline ? 'textarea' : 'input');
            // 设置基本属性
            if (!options.multiline && input instanceof HTMLInputElement) {
                input.type = this.getInputType(options.inputType);
            }
            input.placeholder = options.placeholder || '';
            input.value = options.initialValue || '';
            if (options.maxLength) {
                input.maxLength = options.maxLength;
            }
            // 设置样式
            input.style.position = 'absolute';
            input.style.left = `${options.x}px`;
            input.style.top = `${options.y}px`;
            input.style.width = `${options.width}px`;
            input.style.height = `${options.height}px`;
            input.style.zIndex = '9999';
            if (options.fontSize) {
                input.style.fontSize = `${options.fontSize}px`;
            }
            if (options.backgroundColor) {
                input.style.backgroundColor = options.backgroundColor;
            }
            if (options.textColor) {
                input.style.color = options.textColor;
            }
            if (options.borderColor) {
                input.style.borderColor = options.borderColor;
                input.style.borderWidth = '1px';
                input.style.borderStyle = 'solid';
            }
            if (options.borderRadius) {
                input.style.borderRadius = `${options.borderRadius}px`;
            }
            // 添加事件监听器
            input.addEventListener('input', () => {
                this.notifyListeners('overlayTextChanged', {
                    overlayId,
                    text: input.value
                });
            });
            input.addEventListener('focus', () => {
                this.notifyListeners('overlayFocusChanged', {
                    overlayId,
                    hasFocus: true
                });
            });
            input.addEventListener('blur', () => {
                this.notifyListeners('overlayFocusChanged', {
                    overlayId,
                    hasFocus: false
                });
            });
            // 添加到页面
            document.body.appendChild(input);
            // 存储引用
            this.overlayMap.set(overlayId, input);
            return { id: overlayId };
        }
        async updateNativeOverlay(options) {
            const input = this.overlayMap.get(options.id);
            if (!input) {
                throw new Error('Overlay not found');
            }
            if (options.value !== undefined) {
                input.value = options.value;
            }
            if (options.placeholder !== undefined) {
                input.placeholder = options.placeholder;
            }
            if (options.x !== undefined) {
                input.style.left = `${options.x}px`;
            }
            if (options.y !== undefined) {
                input.style.top = `${options.y}px`;
            }
            if (options.width !== undefined) {
                input.style.width = `${options.width}px`;
            }
            if (options.height !== undefined) {
                input.style.height = `${options.height}px`;
            }
        }
        async removeNativeOverlay(options) {
            const input = this.overlayMap.get(options.id);
            if (!input) {
                throw new Error('Overlay not found');
            }
            input.remove();
            this.overlayMap.delete(options.id);
        }
        async isAvailable() {
            // Web 平台总是可用
            return { available: true };
        }
        getInputType(inputType) {
            switch (inputType) {
                case 'email':
                    return 'email';
                case 'password':
                    return 'password';
                case 'number':
                    return 'number';
                default:
                    return 'text';
            }
        }
    }

    var web = /*#__PURE__*/Object.freeze({
        __proto__: null,
        NativeInputWeb: NativeInputWeb
    });

    exports.NativeInput = NativeInput;

    return exports;

})({}, capacitorExports);
//# sourceMappingURL=plugin.js.map