stimulus_plumbers 0.4.9 → 0.4.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +34 -0
- data/README.md +2 -2
- data/app/assets/javascripts/stimulus-plumbers/controllers.manifest.json +36 -3
- data/app/assets/javascripts/stimulus-plumbers/index.es.js +351 -173
- data/app/assets/javascripts/stimulus-plumbers/index.es.js.map +1 -1
- data/app/assets/javascripts/stimulus-plumbers/index.umd.js +1 -1
- data/app/assets/javascripts/stimulus-plumbers/index.umd.js.map +1 -1
- data/docs/component/form.md +27 -5
- data/docs/guide.md +9 -0
- data/lib/generators/stimulus_plumbers/install/install_generator.rb +7 -1
- data/lib/stimulus_plumbers/engine.rb +0 -4
- data/lib/stimulus_plumbers/form/builder.rb +4 -0
- data/lib/stimulus_plumbers/form/field.rb +1 -1
- data/lib/stimulus_plumbers/form/fields/inputs/code.rb +86 -0
- data/lib/stimulus_plumbers/form/fields/inputs/credit_card.rb +98 -0
- data/lib/stimulus_plumbers/form/fields/renderer.rb +2 -0
- data/lib/stimulus_plumbers/generators/css_entrypoint.rb +53 -0
- data/lib/stimulus_plumbers/generators/tokens_directive.rb +5 -5
- data/lib/stimulus_plumbers/themes/schema.rb +43 -22
- data/lib/stimulus_plumbers/version.rb +1 -1
- data/vendor/ARIA.md +7 -0
- data/vendor/component/manifest.json +3 -0
- data/vendor/controller/docs/input-formatter.md +87 -21
- data/vendor/controller/manifest.json +36 -3
- metadata +3 -1
|
@@ -6,18 +6,20 @@ Formats, masks, and reveals values written to an input element. Handles password
|
|
|
6
6
|
|
|
7
7
|
## Targets
|
|
8
8
|
|
|
9
|
-
| Target | Element | Description
|
|
10
|
-
| -------- | ------------------------ |
|
|
11
|
-
| `input` | `<input>` or any element | Write destination — sets `.value` for `<input>`, `.textContent` otherwise
|
|
12
|
-
| `toggle` | `<button>` | Reveal/conceal button; hidden at connect when the formatter is not maskable
|
|
9
|
+
| Target | Element | Description |
|
|
10
|
+
| -------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
11
|
+
| `input` | `<input>` or any element | Write destination — sets `.value` for `<input>`, `.textContent` otherwise |
|
|
12
|
+
| `toggle` | `<button>` | Reveal/conceal button; hidden at connect when the formatter is not maskable |
|
|
13
|
+
| `cell` | `<div>` (any element) | Optional character cells; when present, the canonical value is painted one character per cell, or (grouped mode — cell count equals `groups.length`) one group-sized slice per cell — see [character-cells](../plumber/character-cells.md) |
|
|
13
14
|
|
|
14
15
|
## Values
|
|
15
16
|
|
|
16
|
-
| Value | Type | Default | Description
|
|
17
|
-
| ---------- | ------- | --------- |
|
|
18
|
-
| `format` | String | `"plain"` | Formatter type — see [Formatters](#formatters) for valid identifiers
|
|
19
|
-
| `options` | Object | `{}` | Formatter-specific options (e.g. `{ locale: "en-US" }` for currency)
|
|
20
|
-
| `revealed` | Boolean | `false` | Whether a masked value is currently revealed; managed by `toggle()`
|
|
17
|
+
| Value | Type | Default | Description |
|
|
18
|
+
| ---------- | ------- | --------- | --------------------------------------------------------------------------------- |
|
|
19
|
+
| `format` | String | `"plain"` | Formatter type — see [Formatters](#formatters) for valid identifiers |
|
|
20
|
+
| `options` | Object | `{}` | Formatter-specific options (e.g. `{ locale: "en-US" }` for currency) |
|
|
21
|
+
| `revealed` | Boolean | `false` | Whether a masked value is currently revealed; managed by `toggle()` |
|
|
22
|
+
| `groups` | Array | `[]` | Cell group widths (e.g. `[4,4,4,4]`); overrides the formatter's own grouping hint |
|
|
21
23
|
|
|
22
24
|
## Methods
|
|
23
25
|
|
|
@@ -27,24 +29,29 @@ Formats, masks, and reveals values written to an input element. Handles password
|
|
|
27
29
|
| `toggle()` | `data-action` | Action — flips `revealedValue`; no-op unless `format` is `"password"` or formatter is maskable |
|
|
28
30
|
| `onChange(event)` | `input-combobox:changed` | Event adapter — extracts `event.detail.value`, calls `format(value)` |
|
|
29
31
|
| `onPaste(event)` | `clipboard:pasted` | Event adapter — normalises and validates pasted text, calls `format(value)` |
|
|
32
|
+
| `onInput(event)` | `input` DOM event | Event adapter — re-formats from the input's current value |
|
|
33
|
+
| `onFocus(event)` | `focus` DOM event | Event adapter — redraws cells so the caret cell appears |
|
|
34
|
+
| `onBlur(event)` | `blur` DOM event | Event adapter — redraws cells so the caret cell clears |
|
|
30
35
|
|
|
31
36
|
## Dispatches
|
|
32
37
|
|
|
33
|
-
| Event | Detail | When
|
|
34
|
-
| --------------------------- | ----------- |
|
|
35
|
-
| `input-formatter:formatted` | `{ value }` | After every write to the `input` target
|
|
38
|
+
| Event | Detail | When |
|
|
39
|
+
| --------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
40
|
+
| `input-formatter:formatted` | `{ value }` | After every write to the `input` target |
|
|
41
|
+
| `input-formatter:filled` | `{ value }` | When a valid, cell-capable formatter's value reaches its expected cell length — auto-submit hook. Fires once per fill, on the transition into "full"; not on connect with an already-full value. |
|
|
36
42
|
|
|
37
43
|
## Formatters
|
|
38
44
|
|
|
39
|
-
| `type` | Description
|
|
40
|
-
| -------------- |
|
|
41
|
-
| `"plain"` | No-op — passes the value through unchanged
|
|
42
|
-
| `"password"` | Switches `input[type]` between `"password"` and `"text"` on reveal
|
|
43
|
-
| `"creditCard"` | Groups digits as `#### #### #### ####`
|
|
44
|
-
| `"phone"` | Formats as a local phone number
|
|
45
|
-
| `"currency"` | Locale-aware thousands separator and decimal places
|
|
46
|
-
| `"date"` | Locale-aware date string
|
|
47
|
-
| `"time"` | Locale-aware time string
|
|
45
|
+
| `type` | Description |
|
|
46
|
+
| -------------- | ------------------------------------------------------------------------------------------------------------------ |
|
|
47
|
+
| `"plain"` | No-op — passes the value through unchanged |
|
|
48
|
+
| `"password"` | Switches `input[type]` between `"password"` and `"text"` on reveal |
|
|
49
|
+
| `"creditCard"` | Groups digits as `#### #### #### ####` |
|
|
50
|
+
| `"phone"` | Formats as a local phone number |
|
|
51
|
+
| `"currency"` | Locale-aware thousands separator and decimal places |
|
|
52
|
+
| `"date"` | Locale-aware date string |
|
|
53
|
+
| `"time"` | Locale-aware time string |
|
|
54
|
+
| `"code"` | Charset-filtered fixed-length codes (OTP, PIN); options `{ charset: "digits"\|"letters"\|"alphanumeric", length }` |
|
|
48
55
|
|
|
49
56
|
Custom formatters can be registered at runtime:
|
|
50
57
|
|
|
@@ -83,7 +90,66 @@ Formatter.register('iban', {
|
|
|
83
90
|
</div>
|
|
84
91
|
```
|
|
85
92
|
|
|
93
|
+
### One-time code entry (cells)
|
|
94
|
+
|
|
95
|
+
```html
|
|
96
|
+
<div
|
|
97
|
+
data-controller="input-formatter"
|
|
98
|
+
data-input-formatter-format-value="code"
|
|
99
|
+
data-input-formatter-options-value='{"charset":"digits","length":6}'
|
|
100
|
+
>
|
|
101
|
+
<label for="otp" class="sr-only">Verification code</label>
|
|
102
|
+
<div class="cells-row">
|
|
103
|
+
<div data-input-formatter-target="cell"></div>
|
|
104
|
+
<div data-input-formatter-target="cell"></div>
|
|
105
|
+
<div data-input-formatter-target="cell"></div>
|
|
106
|
+
<div data-input-formatter-target="cell"></div>
|
|
107
|
+
<div data-input-formatter-target="cell"></div>
|
|
108
|
+
<div data-input-formatter-target="cell"></div>
|
|
109
|
+
</div>
|
|
110
|
+
<input
|
|
111
|
+
id="otp"
|
|
112
|
+
data-input-formatter-target="input"
|
|
113
|
+
autocomplete="one-time-code"
|
|
114
|
+
inputmode="numeric"
|
|
115
|
+
maxlength="6"
|
|
116
|
+
data-action="input->input-formatter#onInput focus->input-formatter#onFocus blur->input-formatter#onBlur"
|
|
117
|
+
/>
|
|
118
|
+
</div>
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
Cells are decoration; style them via `[data-filled]`, `[data-caret]`, `[data-group-end]`, `[data-inactive]`. See [ARIA.md's Code Input pattern](../../../ARIA.md) for the overlay/labeling requirements.
|
|
122
|
+
|
|
123
|
+
### Credit card formatting (grouped cells)
|
|
124
|
+
|
|
125
|
+
Rendering exactly `groups.length` cells (instead of one cell per digit) puts the plumber into
|
|
126
|
+
grouped mode: each cell displays its whole group of digits. Separators between cells (e.g. a
|
|
127
|
+
dash) are authored HTML, never inserted by the plumber — see
|
|
128
|
+
[character-cells](../plumber/character-cells.md#grouped-mode).
|
|
129
|
+
|
|
130
|
+
```html
|
|
131
|
+
<div data-controller="input-formatter" data-input-formatter-format-value="creditCard">
|
|
132
|
+
<div class="cells-row">
|
|
133
|
+
<span data-input-formatter-target="cell"></span>
|
|
134
|
+
<span aria-hidden="true">-</span>
|
|
135
|
+
<span data-input-formatter-target="cell"></span>
|
|
136
|
+
<span aria-hidden="true">-</span>
|
|
137
|
+
<span data-input-formatter-target="cell"></span>
|
|
138
|
+
<span aria-hidden="true">-</span>
|
|
139
|
+
<span data-input-formatter-target="cell"></span>
|
|
140
|
+
</div>
|
|
141
|
+
<input
|
|
142
|
+
data-input-formatter-target="input"
|
|
143
|
+
autocomplete="cc-number"
|
|
144
|
+
inputmode="numeric"
|
|
145
|
+
maxlength="16"
|
|
146
|
+
data-action="input->input-formatter#onInput focus->input-formatter#onFocus blur->input-formatter#onBlur"
|
|
147
|
+
/>
|
|
148
|
+
</div>
|
|
149
|
+
```
|
|
150
|
+
|
|
86
151
|
## Accessibility
|
|
87
152
|
|
|
88
153
|
- Password `type` attribute switches between `"password"` (masked) and `"text"` (revealed), so screen readers announce the field type correctly.
|
|
89
154
|
- See [ARIA.md's Password Reveal pattern](../../../ARIA.md) for the `toggle` button's `aria-label`/`aria-pressed` requirements.
|
|
155
|
+
- Cell display: see [ARIA.md's Code Input pattern](../../../ARIA.md).
|
|
@@ -464,21 +464,49 @@
|
|
|
464
464
|
"identifier": "input-formatter",
|
|
465
465
|
"targets": [
|
|
466
466
|
"input",
|
|
467
|
-
"toggle"
|
|
467
|
+
"toggle",
|
|
468
|
+
"cell"
|
|
468
469
|
],
|
|
469
|
-
"values": {
|
|
470
|
+
"values": {
|
|
471
|
+
"format": {
|
|
472
|
+
"type": "String",
|
|
473
|
+
"default": "plain"
|
|
474
|
+
},
|
|
475
|
+
"options": {
|
|
476
|
+
"type": "Object",
|
|
477
|
+
"default": {}
|
|
478
|
+
},
|
|
479
|
+
"revealed": {
|
|
480
|
+
"type": "Boolean",
|
|
481
|
+
"default": false
|
|
482
|
+
},
|
|
483
|
+
"groups": {
|
|
484
|
+
"type": "Array",
|
|
485
|
+
"default": []
|
|
486
|
+
}
|
|
487
|
+
},
|
|
470
488
|
"outlets": [],
|
|
471
489
|
"classes": [],
|
|
472
490
|
"actions": [
|
|
491
|
+
"attachCells",
|
|
492
|
+
"cellsValue",
|
|
493
|
+
"detachCells",
|
|
494
|
+
"drawCells",
|
|
473
495
|
"drawToggle",
|
|
474
496
|
"format",
|
|
497
|
+
"isFull",
|
|
498
|
+
"onBlur",
|
|
475
499
|
"onChange",
|
|
500
|
+
"onFocus",
|
|
476
501
|
"onFormatting",
|
|
502
|
+
"onInput",
|
|
477
503
|
"onPaste",
|
|
504
|
+
"primeFilledState",
|
|
478
505
|
"readValue",
|
|
479
506
|
"toggle"
|
|
480
507
|
],
|
|
481
508
|
"dispatches": [
|
|
509
|
+
"filled",
|
|
482
510
|
"formatted"
|
|
483
511
|
]
|
|
484
512
|
},
|
|
@@ -660,7 +688,12 @@
|
|
|
660
688
|
"detail",
|
|
661
689
|
"time"
|
|
662
690
|
],
|
|
663
|
-
"values": {
|
|
691
|
+
"values": {
|
|
692
|
+
"dateFormat": {
|
|
693
|
+
"type": "Object",
|
|
694
|
+
"default": {}
|
|
695
|
+
}
|
|
696
|
+
},
|
|
664
697
|
"outlets": [],
|
|
665
698
|
"classes": [],
|
|
666
699
|
"actions": [
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: stimulus_plumbers
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.4.
|
|
4
|
+
version: 0.4.11
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Ryan Chang
|
|
@@ -131,7 +131,9 @@ files:
|
|
|
131
131
|
- lib/stimulus_plumbers/form/fields/group.rb
|
|
132
132
|
- lib/stimulus_plumbers/form/fields/hint.rb
|
|
133
133
|
- lib/stimulus_plumbers/form/fields/inputs/checkbox.rb
|
|
134
|
+
- lib/stimulus_plumbers/form/fields/inputs/code.rb
|
|
134
135
|
- lib/stimulus_plumbers/form/fields/inputs/combobox.rb
|
|
136
|
+
- lib/stimulus_plumbers/form/fields/inputs/credit_card.rb
|
|
135
137
|
- lib/stimulus_plumbers/form/fields/inputs/datetime.rb
|
|
136
138
|
- lib/stimulus_plumbers/form/fields/inputs/file.rb
|
|
137
139
|
- lib/stimulus_plumbers/form/fields/inputs/password.rb
|