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

Draw the progress indicator without Tailwind

Browse Source 
Plan step 36 (actions). <x-progress> renders data-md-progress with
data-md-color and data-md-circular/-wavy/-thick, and
data-md-value/-max in place of data-value/data-max; no class list.
progress.css draws LinearProgressIndicatorTokens and
CircularProgressIndicatorTokens' stroke, sizes and colours, and the
linear indicator's unconditional right-to-left mirror. Its sizing is
a default only, same as loading.css: a caller's own class, unlayered
or in Tailwind's utilities layer, still outranks it, so the width/
size detection regex the view carried is gone with it.

resources/js/progress.js's WATCHED array and its reads follow the
renamed hooks. ProgressTest (Feature and Browser) is rewritten on the
hooks and ComponentStylesheet.

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 16:46:52 +02:00
co-authored by Claude Opus 5
parent ce8ac4d316
commit 15cd306aba
7 changed files with 211 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/progress.js
+7 -7
View File
@@ -5,7 +5,7 @@
*
* The server renders a first frame (the value, or a still of the indeterminate animation), so
* the indicator is right before this runs. This then owns the SVG, which is `wire:ignore`: a
* Livewire morph only changes the root's `data-value` (so does `x-bind`, for `bind`), and a
* Livewire morph only changes the root's `data-md-value` (so does `x-bind`, for `bind`), and a
* MutationObserver turns that into motion.
*
* - A new value moves on M3 Expressive's effects-slow spring (damping ratio 1, stiffness 800,
@@ -54,7 +54,7 @@
*/
const SVG = 'http://www.w3.org/2000/svg'
const WATCHED = ['data-value', 'data-max', 'data-circular', 'data-wavy', 'data-thick']
const WATCHED = ['data-md-value', 'data-md-max', 'data-md-circular', 'data-md-wavy', 'data-md-thick']
// Tokens: *ProgressIndicatorTokens, WavyProgressIndicatorDefaults, ProgressIndicator.kt ----
@@ -1061,16 +1061,16 @@ class Indicator {
read(initial) {
const element = this.element
const shape = WATCHED.slice(2).map((name) => element.hasAttribute(name)).join()
const maximum = parseFloat(element.getAttribute('data-max')) > 0 ? parseFloat(element.getAttribute('data-max')) : 100
const raw = element.getAttribute('data-value')
const maximum = parseFloat(element.getAttribute('data-md-max')) > 0 ? parseFloat(element.getAttribute('data-md-max')) : 100
const raw = element.getAttribute('data-md-value')
const number = raw === null || raw.trim() === '' ? NaN : Number(raw)
const target = Number.isFinite(number) ? clamp(number / maximum, 0, 1) : null
if (initial || shape !== this.shape) {
this.shape = shape
this.circular = element.hasAttribute('data-circular')
this.wavy = element.hasAttribute('data-wavy')
this.stroke = element.hasAttribute('data-thick') ? 8 : 4
this.circular = element.hasAttribute('data-md-circular')
this.wavy = element.hasAttribute('data-md-wavy')
this.stroke = element.hasAttribute('data-md-thick') ? 8 : 4
this.build()
this.reset(target)
} else if ((target === null) !== (this.target === null)) {