README

创建 Filament Mask Input 包的动机

问题

在处理 Web 应用程序中的数据输入掩码时，我在 Firefox 浏览器中遇到了一个特定挑战。问题是，在此浏览器中实施的掩码没有按预期工作，导致用户体验中存在不一致性和问题。

此外，当考虑使用 Alpine.js 的原生 x-mask 作为替代解决方案时，我遇到了另一个障碍。Alpine.js 和 Livewire 之间的交互似乎存在问题，特别是在状态更新方面。这种行为导致了输入掩码的意外删除，影响了应用程序的可用性和功能。

解决方案

面对这些挑战，我决定创建 filament-maskinput 包。它旨在高效地实施输入掩码，克服 Firefox 和 Alpine.js-Livewire 交互中发现的问题。此包确保浏览器兼容性，并在 Livewire 生命周期中可靠地维护输入掩码。

Filament Mask Input 包

概述

filament-maskinput 包通过添加掩码输入功能来增强 FilamentPHP 应用程序。它允许创建具有各种掩码模式（包括货币、动态和固定模式）的输入。

安装

通过 composer 安装包

composer require rodrigofs/filament-maskinput

配置

您可以通过 config/filament-maskinput.php 文件配置 filament-maskinput 包，为参数如 allowNegative、decimalPrecision、thousandsSeparator 和 decimalSeparator 设置默认值。

可选地，您可以使用以下命令发布配置：

php artisan vendor:publish --tag="config"

使用方法

MaskInput 组件

MaskInput 是 FilamentPHP 中 TextInput 的扩展，用于创建具有自定义掩码模式的输入字段。

方法

money
- 描述：为货币值配置输入字段。
- 参数:
  - $decimalPrecision (int|null)：小数精度。
  - $decimalSeparator (string|null)：小数分隔符。
  - $thousandsSeparator (string|null)：千位分隔符。
  - $allowNegative (bool|null)：允许负数。
mask
- 描述：为输入设置掩码模式。
- 参数:
  - $mask (string | Closure | RawJs | null)：掩码模式或函数。
maxLength
- 描述：对于动态掩码，maxLength 作为在不同掩码模式之间切换的触发器。使用动态掩码时，这是必不可少的。
- 参数:
  - $length (int | Closure)：输入的最大长度。

示例

货币输入

MaskInput::make('money')
->money();

MaskInput::make('money')
->money(decimalPrecision: 3, allowNegative: true);

output: "-1.234,560"

动态输入

MaskInput::make('dynamic')
->mask(RawJs::make("['999.999.999-99', '99.999.999/9999-99']"))
->stripCharacters(['.','-', '/'])
->maxLength(14) // Acts as a trigger for mask switching

output: "123.456.789-01" or "12.345.678/9012-34"

模式输入

MaskInput::make('pattern')
->mask('99999-999')
->stripCharacters(['-'])

output: "12345-678"

MaskInput::make('pattern')
->mask('SS.SS.SSSSS.S.S.SSSSSS')
->stripCharacters(['.'])

output: "9B.GR.D08X0.4.G.117974"

MaskInput::make('pattern')
->mask('AAA-9999')
->stripCharacters(['-'])

output: "ABC-1234"

测试

composer test

变更日志

请参阅变更日志了解最近更改的信息。

贡献

请参阅贡献指南了解详细信息。

安全漏洞

请参阅我们的安全策略了解如何报告安全漏洞。

鸣谢

许可协议

MIT 许可协议（MIT）。请参阅许可文件以获取更多信息。

rodrigofs / filament-maskinput

维护者

详细信息