LmsCountdown

Zeit & Prozess

Fallblattanzeige — für eine Frist, die näher rückt.

In Markdown: ::lms-countdown Im Zusammenhang ansehen

Übernommen aus FlipClock (coactum-nuggets).

Eine Jahreszahl im Text bleibt abstrakt; eine Zahl, die sichtbar kleiner wird, nicht. Deshalb steht dieser Baustein über einer Umsetzungsfrist und nicht als Dekoration in einem Kopfbereich. Die Fläche bleibt in beiden Modi dunkel — wie LmsCta, und aus demselben Grund über neutral-950 statt bg-inverted. Eine Fallblattanzeige ist schwarz; das ist ihre Form, nicht ihr Farbschema. Die Neutral-Palette kommt weiterhin aus dem Theme: mit neutral: 'stone' wird sie warm-dunkel. Die Quelle hielt dafür eine requestAnimationFrame-Schleife am Laufen und rechnete in jedem zehnten Durchlauf. Hier zählt ein Zeitgeber viermal je Sekunde.

Beispiele (3)

Bis zu einer Frist

Ohne Sekundenfeld — bei einer Frist in Jahren zählt es niemand mit.

Bis zur nächsten Umsetzungsfrist

00Tage00Stunden00Minuten

Der Zeitpunkt ist erfunden und dient nur der Anschauung.

Als Uhr

Ohne target zeigt der Baustein die laufende Uhrzeit — dann entfällt das Tagesfeld.

00Stunden00Minuten00Sekunden

Nach dem Ablauf

Ein Zeitpunkt in der Vergangenheit. celebrate ersetzt die Anzeige — auf null gefallene Blätter sagen nichts mehr.

Wir starten bald!

00Tage00Stunden00Minuten00Sekunden

Dazu gibt es confetti — hier bewusst aus, damit der Katalog beim Durchblättern nicht ständig knallt.

API

Vollständig aus den Quellen erzeugt. Dieselben Angaben stehen an jedem Beispiel hinter dem Knopf API — hier ausgeschrieben, damit sie über die Seitensuche und im Druck auffindbar bleiben.

Props

Prop	Typ	Standard	Bedeutung
`target`	`string`	—	Zielzeitpunkt, z. B. `2027-10-18` oder `2027-10-18T09:00:00`. * Ohne Angabe zeigt der Baustein die laufende Uhrzeit.
`title`	`string`	—	Überschrift über der Anzeige.
`caption`	`string`	—	Erläuterung darunter. Inline-Markdown erlaubt.
`showDays`	`boolean`	`true`	Tagesfeld zeigen.
`showSeconds`	`boolean`	`true`	Sekundenfeld zeigen. Bei langen Fristen eher störend als hilfreich.
`celebrate`	`string`	—	Jubelmeldung, sobald der Zeitpunkt erreicht ist. Sie ersetzt die * Anzeige — auf null gefallene Blätter sagen nichts mehr.
`confetti`	`boolean`	`false`	Konfetti, wenn der Zeitpunkt erreicht ist.

Slots

Dieser Baustein hat keine Slots — sein Inhalt kommt vollständig aus den Props.

Emits

Dieser Baustein sendet keine Events.

Theme

Die Beschriftungen dieses Bausteins stehen in der Gruppe lms.labels.countdown. Alle Schlüssel sind einzeln überschreibbar — was nicht gesetzt wird, behält die Vorgabe.

// app.config.ts
export default defineAppConfig({
  lms: {
    labels: {
      countdown: {
        days: 'Tage',
        hours: 'Stunden',
        minutes: 'Minuten',
        seconds: 'Sekunden',
        expired: 'Die Frist ist abgelaufen.'
      }
    }
  }
})

Changelog

Geändert1.3.02026-08-20
celebrate ersetzt nach Ablauf die Anzeige durch eine
Hinzugefügt0.9.02026-08-20
(Zeit & Prozess) — Fallblattanzeige für eine Frist, die
Geändert0.7.02026-08-20
src/runtime/utils/totp.ts kommt hinzu: TOTP in reinem JavaScript, gegen die Testvektoren des RFC geprüft. Einzige Änderung gegenüber der Quelle sind Nicht-Null-Zusicherungen an den Feldzugriffen — der Bestand an @ts-nocheck bleibt bei 51, und keine Ausnahme liegt außerhalb von fx/
Hinzugefügt0.6.02026-08-20
useLmsProgress: Fortschritt lässt sich speichern, ohne dass die Bibliothek ein Backend kennt. Das Zielprojekt hinterlegt einmal einen Adapter mit get/set, die Bausteine nutzen ihn, wenn er da ist — sonst halten sie den Stand im Speicher wie bisher. Ereignisse wären hier nutzlos: MDC kann keine Events abonnieren, und genau dort werden diese Bausteine benutzt
Behoben0.4.02026-08-20
Die Warnung Slot "default" invoked outside of the render function erscheint nicht mehr. Der Katalog läuft jetzt mit 0 Fehlern und 0 Warnungen
Hinzugefügt0.3.02026-08-20
Der MDC-Bereich jedes Beispiels ist jetzt ein Editor: Syntaxhervorhebung, Code-Vervollständigung aus der Registry, Prüfung in sechs Stufen und eine Vorschau, die beim Tippen mitläuft. Oben rechts Zurücksetzen und Kopieren
Hinzugefügt0.3.02026-08-20
Die Prüfung meldet unbekannte Bausteine, unbekannte Props, fehlende Pflicht-Props, unbekannte Slots, Events (die MDC nicht abonnieren kann) und den Typkonflikt, an dem man in MDC am häufigsten hängenbleibt: Inline-Attribute sind immer Zeichenketten, {count=14} übergibt "14"
Hinzugefügt0.2.02026-08-20
API-Ansicht je Baustein: Props, Slots, Emits, Theme und dieser Changelog. In der Demo-Hülle als Reiter hinter dem Knopf API, auf der Detailseite ausgeschrieben
Hinzugefügt0.2.02026-08-20
Emits werden dokumentiert. Sie sind der Grund, warum sich manche Bausteine aus Markdown heraus nicht vollständig bedienen lassen: MDC kann keine Events abonnieren
Geändert0.2.02026-08-20
Die Komponentenreferenz der README wird jetzt vollständig erzeugt statt von Hand gepflegt
Geändert0.2.02026-08-20
Auch die Tabelle der optionalen Abhängigkeiten wird erzeugt. Sie war gedriftet: motion-v stand mit 50 statt 54 Komponenten darin, @uiw/color-convert unter „je 1", obwohl es drei sind
Hinzugefügt0.1.02026-08-19
Erstveröffentlichung: 187 Bausteine in 17 Kategorien, davon 40 didaktische Lms- und 147 dekorative Fx-Bausteine aus Inspira UI