@stimulus-plumbers/controllers 0.4.0 → 0.4.1
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.
- package/README.md +31 -8
- package/dist/controllers.manifest.json +125 -12
- package/dist/stimulus-plumbers-controllers.es.js +681 -312
- package/dist/stimulus-plumbers-controllers.umd.js +1 -1
- package/package.json +1 -1
- package/src/accessibility/aria.js +6 -0
- package/src/accessibility/focus.js +4 -20
- package/src/accessibility/keyboard.js +134 -28
- package/src/controllers/calendar_decade_controller.js +99 -0
- package/src/controllers/calendar_decade_selector_controller.js +14 -0
- package/src/controllers/calendar_month_controller.js +69 -17
- package/src/controllers/calendar_month_selector_controller.js +14 -0
- package/src/controllers/calendar_year_controller.js +104 -0
- package/src/controllers/calendar_year_selector_controller.js +14 -0
- package/src/controllers/combobox_date_controller.js +36 -85
- package/src/controllers/combobox_dropdown_controller.js +12 -25
- package/src/controllers/input_combobox_controller.js +0 -1
- package/src/controllers/modal_controller.js +4 -1
- package/src/controllers/popover_controller.js +5 -0
- package/src/controllers/timeline_controller.js +71 -0
- package/src/index.js +6 -1
- package/src/plumbers/calendar-selector.js +85 -0
- package/src/plumbers/calendar.js +25 -13
- package/src/plumbers/index.js +5 -0
- package/src/plumbers/visibility.js +3 -3
- package/src/controllers/calendar_observer_controller.js +0 -27
package/README.md
CHANGED
|
@@ -31,7 +31,11 @@ import {
|
|
|
31
31
|
ComboboxTimeController,
|
|
32
32
|
ComboboxDropdownController,
|
|
33
33
|
CalendarMonthController,
|
|
34
|
-
|
|
34
|
+
CalendarMonthSelectorController,
|
|
35
|
+
CalendarYearController,
|
|
36
|
+
CalendarYearSelectorController,
|
|
37
|
+
CalendarDecadeController,
|
|
38
|
+
CalendarDecadeSelectorController,
|
|
35
39
|
ModalController,
|
|
36
40
|
PopoverController,
|
|
37
41
|
DismisserController,
|
|
@@ -48,8 +52,12 @@ application.register('input-clearable', InputClearableController)
|
|
|
48
52
|
application.register('combobox-date', ComboboxDateController)
|
|
49
53
|
application.register('combobox-time', ComboboxTimeController)
|
|
50
54
|
application.register('combobox-dropdown', ComboboxDropdownController)
|
|
51
|
-
application.register('calendar-month',
|
|
52
|
-
application.register('calendar-month-
|
|
55
|
+
application.register('calendar-month', CalendarMonthController)
|
|
56
|
+
application.register('calendar-month-selector', CalendarMonthSelectorController)
|
|
57
|
+
application.register('calendar-year', CalendarYearController)
|
|
58
|
+
application.register('calendar-year-selector', CalendarYearSelectorController)
|
|
59
|
+
application.register('calendar-decade', CalendarDecadeController)
|
|
60
|
+
application.register('calendar-decade-selector', CalendarDecadeSelectorController)
|
|
53
61
|
application.register('modal', ModalController)
|
|
54
62
|
application.register('popover', PopoverController)
|
|
55
63
|
application.register('dismisser', DismisserController)
|
|
@@ -68,14 +76,29 @@ application.register('panner', PannerController)
|
|
|
68
76
|
| `combobox-date` | Calendar grid date picker | [docs/component/combobox.md](docs/component/combobox.md#combobox-date) |
|
|
69
77
|
| `combobox-time` | Drum/scroll-wheel time picker | [docs/component/combobox.md](docs/component/combobox.md#combobox-time) |
|
|
70
78
|
| `combobox-dropdown` | Listbox with fuzzy filter or server fetch | [docs/component/combobox.md](docs/component/combobox.md#combobox-dropdown) |
|
|
71
|
-
| `calendar-month` | Calendar grid
|
|
72
|
-
| `calendar-month-
|
|
79
|
+
| `calendar-month` | Calendar month grid — renders days, handles clicks, dispatches selection events | [docs/component/calendar.md](docs/component/calendar.md) |
|
|
80
|
+
| `calendar-month-selector` | SSR/Turbo thin selector for server-rendered month grids | [docs/component/calendar.md](docs/component/calendar.md#calendar-month-selector) |
|
|
81
|
+
| `calendar-year` | Calendar year grid — renders month buttons, dispatches selection events | [docs/component/calendar.md](docs/component/calendar.md#calendar-year) |
|
|
82
|
+
| `calendar-year-selector` | SSR/Turbo thin selector for server-rendered year grids | [docs/component/calendar.md](docs/component/calendar.md#calendar-year-selector) |
|
|
83
|
+
| `calendar-decade` | Calendar decade grid — renders year buttons, dispatches selection events | [docs/component/calendar.md](docs/component/calendar.md#calendar-decade) |
|
|
84
|
+
| `calendar-decade-selector` | SSR/Turbo thin selector for server-rendered decade grids | [docs/component/calendar.md](docs/component/calendar.md#calendar-decade-selector) |
|
|
73
85
|
| `modal` | Native `<dialog>` or custom overlay | [docs/component/modal.md](docs/component/modal.md) |
|
|
74
86
|
| `popover` | Show/hide content with optional remote load | [docs/component/popover.md](docs/component/popover.md) |
|
|
75
87
|
| `dismisser` | Click-outside dismissal | [docs/component/dismisser.md](docs/component/dismisser.md) |
|
|
76
88
|
| `flipper` | Floating element positioning | [docs/component/flipper.md](docs/component/flipper.md) |
|
|
77
89
|
| `clipboard` | Copy-to-clipboard and paste interception | [docs/component/clipboard.md](docs/component/clipboard.md) |
|
|
78
|
-
| `panner` |
|
|
90
|
+
| `panner` | Keeps content element within viewport on resize | [docs/component/panner.md](docs/component/panner.md) |
|
|
91
|
+
| `timeline` | Manages expandable timeline event items with keyboard navigation | [docs/component/timeline.md](docs/component/timeline.md) |
|
|
92
|
+
|
|
93
|
+
## Utilities
|
|
94
|
+
|
|
95
|
+
| Export | Description | Docs |
|
|
96
|
+
|--------|-------------|------|
|
|
97
|
+
| `setExpanded`, `setHidden`, `announce`, `generateId`, `ensureId`, `connectTriggerToTarget` | ARIA state helpers | [docs/utility/accessibility.md](docs/utility/accessibility.md) |
|
|
98
|
+
| `FocusTrap`, `getFocusableElements`, `focusFirst` | Focus management | [docs/utility/accessibility.md](docs/utility/accessibility.md) |
|
|
99
|
+
| `RovingTabIndex`, `ListboxNavigation`, `isActivationKey`, `isArrowKey` | Keyboard interaction | [docs/utility/accessibility.md](docs/utility/accessibility.md) |
|
|
100
|
+
| `Requestor` | Fetch wrapper with lifecycle events | [docs/utility/requestor.md](docs/utility/requestor.md) |
|
|
101
|
+
| `fuzzyMatcher`, `filterOptions` | Option filtering for comboboxes | [docs/utility/researcher.md](docs/utility/researcher.md) |
|
|
79
102
|
|
|
80
103
|
## Method naming convention
|
|
81
104
|
|
|
@@ -83,8 +106,8 @@ Controllers follow a consistent naming pattern:
|
|
|
83
106
|
|
|
84
107
|
| Pattern | Parameter | Role | Example |
|
|
85
108
|
|---------|-----------|------|---------|
|
|
86
|
-
| `x(value)` | raw value | Programmatic API — pure logic, callable directly | `select('us')`, `format('4242…')`, `
|
|
87
|
-
| `onX(event)` | DOM event | Event adapter — extracts payload, calls programmatic API | `onSelect(event)`, `onChange(event)`, `onPaste(event)`, `onInput(event)
|
|
109
|
+
| `x(value)` | raw value | Programmatic API — pure logic, callable directly | `select('us')`, `format('4242…')`, `filter('query')` |
|
|
110
|
+
| `onX(event)` | DOM event | Event adapter — extracts payload, calls programmatic API | `onSelect(event)`, `onChange(event)`, `onPaste(event)`, `onInput(event)` |
|
|
88
111
|
| `past()` | — | Plumber callback — called by plumber after async operation completes | `shown()`, `dismissed()`, `flipped()`, `contentLoaded()` |
|
|
89
112
|
|
|
90
113
|
Wire event adapters via `data-action`; call programmatic APIs directly from other controllers or outlets.
|
|
@@ -1,4 +1,40 @@
|
|
|
1
1
|
{
|
|
2
|
+
"calendar-decade": {
|
|
3
|
+
"identifier": "calendar-decade",
|
|
4
|
+
"targets": [
|
|
5
|
+
"grid"
|
|
6
|
+
],
|
|
7
|
+
"values": {
|
|
8
|
+
"today": {
|
|
9
|
+
"type": "String",
|
|
10
|
+
"default": ""
|
|
11
|
+
},
|
|
12
|
+
"selected": {
|
|
13
|
+
"type": "String",
|
|
14
|
+
"default": ""
|
|
15
|
+
},
|
|
16
|
+
"since": {
|
|
17
|
+
"type": "String",
|
|
18
|
+
"default": ""
|
|
19
|
+
},
|
|
20
|
+
"till": {
|
|
21
|
+
"type": "String",
|
|
22
|
+
"default": ""
|
|
23
|
+
},
|
|
24
|
+
"current": {
|
|
25
|
+
"type": "Number"
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
"outlets": [],
|
|
29
|
+
"classes": []
|
|
30
|
+
},
|
|
31
|
+
"calendar-decade-selector": {
|
|
32
|
+
"identifier": "calendar-decade-selector",
|
|
33
|
+
"targets": [],
|
|
34
|
+
"values": {},
|
|
35
|
+
"outlets": [],
|
|
36
|
+
"classes": []
|
|
37
|
+
},
|
|
2
38
|
"calendar-month": {
|
|
3
39
|
"identifier": "calendar-month",
|
|
4
40
|
"targets": [
|
|
@@ -6,6 +42,22 @@
|
|
|
6
42
|
"daysOfMonth"
|
|
7
43
|
],
|
|
8
44
|
"values": {
|
|
45
|
+
"today": {
|
|
46
|
+
"type": "String",
|
|
47
|
+
"default": ""
|
|
48
|
+
},
|
|
49
|
+
"selected": {
|
|
50
|
+
"type": "String",
|
|
51
|
+
"default": ""
|
|
52
|
+
},
|
|
53
|
+
"since": {
|
|
54
|
+
"type": "String",
|
|
55
|
+
"default": ""
|
|
56
|
+
},
|
|
57
|
+
"till": {
|
|
58
|
+
"type": "String",
|
|
59
|
+
"default": ""
|
|
60
|
+
},
|
|
9
61
|
"locales": {
|
|
10
62
|
"type": "Array",
|
|
11
63
|
"default": "['default']"
|
|
@@ -22,6 +74,34 @@
|
|
|
22
74
|
"type": "Boolean",
|
|
23
75
|
"default": false
|
|
24
76
|
},
|
|
77
|
+
"year": {
|
|
78
|
+
"type": "Number"
|
|
79
|
+
},
|
|
80
|
+
"month": {
|
|
81
|
+
"type": "Number"
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
"outlets": [],
|
|
85
|
+
"classes": [
|
|
86
|
+
"dayOfWeek",
|
|
87
|
+
"dayOfMonth",
|
|
88
|
+
"dayOfOtherMonth",
|
|
89
|
+
"row"
|
|
90
|
+
]
|
|
91
|
+
},
|
|
92
|
+
"calendar-month-selector": {
|
|
93
|
+
"identifier": "calendar-month-selector",
|
|
94
|
+
"targets": [],
|
|
95
|
+
"values": {},
|
|
96
|
+
"outlets": [],
|
|
97
|
+
"classes": []
|
|
98
|
+
},
|
|
99
|
+
"calendar-year": {
|
|
100
|
+
"identifier": "calendar-year",
|
|
101
|
+
"targets": [
|
|
102
|
+
"grid"
|
|
103
|
+
],
|
|
104
|
+
"values": {
|
|
25
105
|
"today": {
|
|
26
106
|
"type": "String",
|
|
27
107
|
"default": ""
|
|
@@ -29,17 +109,32 @@
|
|
|
29
109
|
"selected": {
|
|
30
110
|
"type": "String",
|
|
31
111
|
"default": ""
|
|
112
|
+
},
|
|
113
|
+
"since": {
|
|
114
|
+
"type": "String",
|
|
115
|
+
"default": ""
|
|
116
|
+
},
|
|
117
|
+
"till": {
|
|
118
|
+
"type": "String",
|
|
119
|
+
"default": ""
|
|
120
|
+
},
|
|
121
|
+
"locales": {
|
|
122
|
+
"type": "Array",
|
|
123
|
+
"default": "['default']"
|
|
124
|
+
},
|
|
125
|
+
"monthFormat": {
|
|
126
|
+
"type": "String",
|
|
127
|
+
"default": "short"
|
|
128
|
+
},
|
|
129
|
+
"current": {
|
|
130
|
+
"type": "Number"
|
|
32
131
|
}
|
|
33
132
|
},
|
|
34
133
|
"outlets": [],
|
|
35
|
-
"classes": [
|
|
36
|
-
"dayOfWeek",
|
|
37
|
-
"dayOfMonth",
|
|
38
|
-
"row"
|
|
39
|
-
]
|
|
134
|
+
"classes": []
|
|
40
135
|
},
|
|
41
|
-
"calendar-
|
|
42
|
-
"identifier": "calendar-
|
|
136
|
+
"calendar-year-selector": {
|
|
137
|
+
"identifier": "calendar-year-selector",
|
|
43
138
|
"targets": [],
|
|
44
139
|
"values": {},
|
|
45
140
|
"outlets": [],
|
|
@@ -67,10 +162,7 @@
|
|
|
67
162
|
"day",
|
|
68
163
|
"month",
|
|
69
164
|
"year",
|
|
70
|
-
"viewTitle"
|
|
71
|
-
"monthView",
|
|
72
|
-
"yearView",
|
|
73
|
-
"decadeView"
|
|
165
|
+
"viewTitle"
|
|
74
166
|
],
|
|
75
167
|
"values": {
|
|
76
168
|
"view": {
|
|
@@ -98,7 +190,9 @@
|
|
|
98
190
|
}
|
|
99
191
|
},
|
|
100
192
|
"outlets": [
|
|
101
|
-
"calendar-month"
|
|
193
|
+
"calendar-month",
|
|
194
|
+
"calendar-year",
|
|
195
|
+
"calendar-decade"
|
|
102
196
|
],
|
|
103
197
|
"classes": []
|
|
104
198
|
},
|
|
@@ -249,6 +343,14 @@
|
|
|
249
343
|
"type": "Boolean",
|
|
250
344
|
"default": true
|
|
251
345
|
},
|
|
346
|
+
"announceOpen": {
|
|
347
|
+
"type": "String",
|
|
348
|
+
"default": "Panel opened"
|
|
349
|
+
},
|
|
350
|
+
"announceClose": {
|
|
351
|
+
"type": "String",
|
|
352
|
+
"default": "Panel closed"
|
|
353
|
+
},
|
|
252
354
|
"url": {
|
|
253
355
|
"type": "String"
|
|
254
356
|
},
|
|
@@ -261,6 +363,17 @@
|
|
|
261
363
|
"hidden"
|
|
262
364
|
]
|
|
263
365
|
},
|
|
366
|
+
"timeline": {
|
|
367
|
+
"identifier": "timeline",
|
|
368
|
+
"targets": [
|
|
369
|
+
"trigger",
|
|
370
|
+
"detail",
|
|
371
|
+
"time"
|
|
372
|
+
],
|
|
373
|
+
"values": {},
|
|
374
|
+
"outlets": [],
|
|
375
|
+
"classes": []
|
|
376
|
+
},
|
|
264
377
|
"visibility": {
|
|
265
378
|
"identifier": "visibility",
|
|
266
379
|
"targets": [
|