noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Draw the checkbox and the selection controls' row without Tailwind

Browse Source 
<x-checkbox> renders data-md-checkbox, its box, tick and dash, and its
row, text and errors as data-md-* attributes; the 18px tick takes a size
prop and a label-less box md-touch-target (plan step 36). selection.css
moves into material.components as the row, text and state layer the
three controls share, and each control's drawing goes to its own file:
checkbox.css, radio.css, toggle.css, on the state tokens. The radio and
the switch take the renamed shared hooks now and lose their layout
classes in their own commits. field.js follows data-md-indeterminate.

Renaming the switch's data-handle also stops selection.css matching the
slider's handles, which it drew 24px above the track.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 14:34:00 +02:00
co-authored by Claude Opus 5
parent 3083fe28b2
commit f86afc0542
12 changed files with 510 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/field.js
+5 -5
View File
@@ -8,13 +8,13 @@
* in.
*
* `<x-checkbox indeterminate>`: HTML has no attribute for a checkbox's mixed state, only the
* `indeterminate` property, so the component marks the input `data-indeterminate` and this keeps
* `indeterminate` property, so the component marks the input `data-md-indeterminate` and this keeps
* the property in step with the mark — when the page loads, and when a render adds or removes the
* mark. A person pressing the box clears the property as the browser always does; the mark stays
* until the server decides again.
*/
const GROWING = 'textarea[data-md-autogrow]'
const MIXED = 'input[type="checkbox"][data-indeterminate]'
const MIXED = 'input[type="checkbox"][data-md-indeterminate]'
const growsByItself = window.CSS?.supports?.('field-sizing', 'content') ?? false
@@ -49,8 +49,8 @@ if (! growsByItself) {
new MutationObserver((records) => {
for (const record of records) {
if (record.type === 'attributes') {
if (record.attributeName === 'data-indeterminate' && record.target instanceof HTMLInputElement) {
record.target.indeterminate = record.target.hasAttribute('data-indeterminate')
if (record.attributeName === 'data-md-indeterminate' && record.target instanceof HTMLInputElement) {
record.target.indeterminate = record.target.hasAttribute('data-md-indeterminate')
} else if (! growsByItself && record.target.matches(GROWING)) {
grow(record.target)
}
@@ -76,7 +76,7 @@ new MutationObserver((records) => {
subtree: true,
childList: true,
attributes: true,
attributeFilter: ['data-indeterminate', 'data-md-autogrow'],
attributeFilter: ['data-md-indeterminate', 'data-md-autogrow'],
})
markAll(document)