@dorsk/tsumikit 0.2.4 → 0.2.5
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.
|
@@ -0,0 +1,226 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
// A timestamp you can read four ways and inspect in one place. Inline it
|
|
3
|
+
// renders in the chosen `mode` (ISO / local / clock / relative); by default
|
|
4
|
+
// clicking it opens a popover that lays out the same instant as ISO-UTC,
|
|
5
|
+
// local, relative, the IANA zone and the unix epoch — so the one value
|
|
6
|
+
// answers "when, exactly?" without leaving the row. The popover is read-only
|
|
7
|
+
// unless you opt into `selectable`, which adds buttons to switch the inline
|
|
8
|
+
// display mode (handy in a demo / settings surface, rarely in a data row).
|
|
9
|
+
//
|
|
10
|
+
// All formatting is delegated to the pure helpers in `$lib/timestamp`; this
|
|
11
|
+
// component owns only the mode state, the live tick for relative mode, and
|
|
12
|
+
// the popover chrome. The trigger is a real <time datetime> element for
|
|
13
|
+
// machine-readability and a11y.
|
|
14
|
+
import Popover from './Popover.svelte';
|
|
15
|
+
import {
|
|
16
|
+
formatTimestamp,
|
|
17
|
+
localTimeZone,
|
|
18
|
+
relativeTime,
|
|
19
|
+
toDate,
|
|
20
|
+
toEpochSeconds,
|
|
21
|
+
toISO,
|
|
22
|
+
toLocal,
|
|
23
|
+
type TimeInput,
|
|
24
|
+
type TimestampMode
|
|
25
|
+
} from '../../timestamp';
|
|
26
|
+
|
|
27
|
+
type Tone = 'inherit' | 'default' | 'muted' | 'faint' | 'danger' | 'accent';
|
|
28
|
+
|
|
29
|
+
let {
|
|
30
|
+
value,
|
|
31
|
+
mode = 'iso',
|
|
32
|
+
details = true,
|
|
33
|
+
selectable = false,
|
|
34
|
+
mono = false,
|
|
35
|
+
tone = 'muted',
|
|
36
|
+
tickMs = 30_000
|
|
37
|
+
}: {
|
|
38
|
+
/** The instant: a Date, epoch milliseconds, or an ISO/parseable string. */
|
|
39
|
+
value: TimeInput;
|
|
40
|
+
/** Inline display mode. Default 'iso'. */
|
|
41
|
+
mode?: TimestampMode;
|
|
42
|
+
/** Click to open the details popover (UTC / local / relative / zone /
|
|
43
|
+
* epoch). Default true. When false, renders as a bare inline <time>. */
|
|
44
|
+
details?: boolean;
|
|
45
|
+
/** Add mode-switch buttons inside the popover so the viewer can change the
|
|
46
|
+
* inline display mode. Default false. Implies `details`. */
|
|
47
|
+
selectable?: boolean;
|
|
48
|
+
/** Render in the monospace font (tabular figures stay on regardless). */
|
|
49
|
+
mono?: boolean;
|
|
50
|
+
/** Text colour, mirroring <Text> tones. Default 'muted' — timestamps read
|
|
51
|
+
* as subdued metadata; pass 'inherit' to blend with surrounding copy. */
|
|
52
|
+
tone?: Tone;
|
|
53
|
+
/** How often relative mode re-renders so "3m ago" stays fresh. */
|
|
54
|
+
tickMs?: number;
|
|
55
|
+
} = $props();
|
|
56
|
+
|
|
57
|
+
// User's in-popover choice overrides the `mode` prop; until they pick, we
|
|
58
|
+
// follow the prop (so a parent can still drive it reactively). Deriving —
|
|
59
|
+
// rather than seeding $state from a prop — keeps both behaviours and avoids
|
|
60
|
+
// capturing only the prop's initial value.
|
|
61
|
+
let override = $state<TimestampMode | null>(null);
|
|
62
|
+
const current = $derived(override ?? mode);
|
|
63
|
+
// Live clock for relative mode only — a single timer that exists solely while
|
|
64
|
+
// relative is on screen, so static modes cost nothing.
|
|
65
|
+
let now = $state(Date.now());
|
|
66
|
+
$effect(() => {
|
|
67
|
+
if (current !== 'relative') return;
|
|
68
|
+
const t = setInterval(() => (now = Date.now()), tickMs);
|
|
69
|
+
return () => clearInterval(t);
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
const date = $derived(toDate(value));
|
|
73
|
+
const label = $derived(formatTimestamp(value, current, now));
|
|
74
|
+
// datetime= wants a valid ISO string; omit it entirely on bad input.
|
|
75
|
+
const machine = $derived(date ? toISO(date) : undefined);
|
|
76
|
+
const showPopover = $derived(details || selectable);
|
|
77
|
+
const cls = $derived(`ts tone-${tone}${mono ? ' mono' : ''}`);
|
|
78
|
+
|
|
79
|
+
const MODES: { id: TimestampMode; name: string }[] = [
|
|
80
|
+
{ id: 'iso', name: 'ISO' },
|
|
81
|
+
{ id: 'local', name: 'Local' },
|
|
82
|
+
{ id: 'time', name: 'Time' },
|
|
83
|
+
{ id: 'relative', name: 'Relative' }
|
|
84
|
+
];
|
|
85
|
+
|
|
86
|
+
const rows = $derived(
|
|
87
|
+
date
|
|
88
|
+
? [
|
|
89
|
+
{ k: 'UTC', v: toISO(date) },
|
|
90
|
+
{ k: 'Local', v: toLocal(date) },
|
|
91
|
+
{ k: 'Relative', v: relativeTime(date, now) },
|
|
92
|
+
{ k: 'Time zone', v: localTimeZone() },
|
|
93
|
+
{ k: 'Unix', v: String(toEpochSeconds(date)) }
|
|
94
|
+
]
|
|
95
|
+
: []
|
|
96
|
+
);
|
|
97
|
+
</script>
|
|
98
|
+
|
|
99
|
+
{#if !date}
|
|
100
|
+
<!-- Unparseable input: degrade to an inert dash rather than empty text. -->
|
|
101
|
+
<time class="{cls} ts-invalid">—</time>
|
|
102
|
+
{:else if showPopover}
|
|
103
|
+
<Popover label="Timestamp details" placement="bottom-start" bare>
|
|
104
|
+
{#snippet trigger()}
|
|
105
|
+
<time class="{cls} ts-trigger" datetime={machine}>{label}</time>
|
|
106
|
+
{/snippet}
|
|
107
|
+
<div class="ts-panel">
|
|
108
|
+
{#if selectable}
|
|
109
|
+
<div class="ts-modes" role="group" aria-label="Display mode">
|
|
110
|
+
{#each MODES as m (m.id)}
|
|
111
|
+
<button
|
|
112
|
+
type="button"
|
|
113
|
+
class="ts-mode"
|
|
114
|
+
class:active={current === m.id}
|
|
115
|
+
aria-pressed={current === m.id}
|
|
116
|
+
onclick={() => (override = m.id)}
|
|
117
|
+
>
|
|
118
|
+
{m.name}
|
|
119
|
+
</button>
|
|
120
|
+
{/each}
|
|
121
|
+
</div>
|
|
122
|
+
{/if}
|
|
123
|
+
<dl class="ts-details">
|
|
124
|
+
{#each rows as row (row.k)}
|
|
125
|
+
<dt>{row.k}</dt>
|
|
126
|
+
<dd>{row.v}</dd>
|
|
127
|
+
{/each}
|
|
128
|
+
</dl>
|
|
129
|
+
</div>
|
|
130
|
+
</Popover>
|
|
131
|
+
{:else}
|
|
132
|
+
<time class={cls} datetime={machine}>{label}</time>
|
|
133
|
+
{/if}
|
|
134
|
+
|
|
135
|
+
<style>
|
|
136
|
+
.ts {
|
|
137
|
+
font-variant-numeric: tabular-nums;
|
|
138
|
+
}
|
|
139
|
+
.mono {
|
|
140
|
+
font-family: var(--font-mono);
|
|
141
|
+
}
|
|
142
|
+
/* Tones mirror <Text>; 'inherit' deliberately sets no colour so the timestamp
|
|
143
|
+
blends into surrounding copy. */
|
|
144
|
+
.tone-default {
|
|
145
|
+
color: var(--text);
|
|
146
|
+
}
|
|
147
|
+
.tone-muted {
|
|
148
|
+
color: var(--text-muted);
|
|
149
|
+
}
|
|
150
|
+
.tone-faint {
|
|
151
|
+
color: var(--text-faint);
|
|
152
|
+
}
|
|
153
|
+
.tone-danger {
|
|
154
|
+
color: var(--danger);
|
|
155
|
+
}
|
|
156
|
+
.tone-accent {
|
|
157
|
+
color: var(--accent);
|
|
158
|
+
}
|
|
159
|
+
.ts-invalid {
|
|
160
|
+
color: var(--text-muted);
|
|
161
|
+
}
|
|
162
|
+
/* The popover trigger is a plain inline run of text that hints it's clickable
|
|
163
|
+
— no button chrome (we pass `bare`), just an underline on hover/focus. */
|
|
164
|
+
.ts-trigger {
|
|
165
|
+
cursor: pointer;
|
|
166
|
+
border-radius: var(--r-sm);
|
|
167
|
+
text-decoration-line: underline;
|
|
168
|
+
text-decoration-style: dotted;
|
|
169
|
+
text-underline-offset: 2px;
|
|
170
|
+
text-decoration-color: var(--border-strong);
|
|
171
|
+
}
|
|
172
|
+
.ts-trigger:hover,
|
|
173
|
+
.ts-trigger:focus-visible {
|
|
174
|
+
text-decoration-color: currentColor;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.ts-panel {
|
|
178
|
+
display: flex;
|
|
179
|
+
flex-direction: column;
|
|
180
|
+
gap: var(--sp-2);
|
|
181
|
+
padding: var(--sp-1);
|
|
182
|
+
}
|
|
183
|
+
.ts-modes {
|
|
184
|
+
display: flex;
|
|
185
|
+
gap: var(--sp-1);
|
|
186
|
+
}
|
|
187
|
+
.ts-mode {
|
|
188
|
+
flex: 1;
|
|
189
|
+
padding: var(--sp-1) var(--sp-2);
|
|
190
|
+
border: 1px solid var(--border-strong);
|
|
191
|
+
border-radius: var(--r-sm);
|
|
192
|
+
background: transparent;
|
|
193
|
+
color: var(--text-muted);
|
|
194
|
+
font-size: var(--fs-xs);
|
|
195
|
+
cursor: pointer;
|
|
196
|
+
transition:
|
|
197
|
+
background 0.12s var(--ease),
|
|
198
|
+
color 0.12s var(--ease);
|
|
199
|
+
}
|
|
200
|
+
.ts-mode:hover {
|
|
201
|
+
background: var(--bg-elevated-2);
|
|
202
|
+
color: var(--text);
|
|
203
|
+
}
|
|
204
|
+
.ts-mode.active {
|
|
205
|
+
background: var(--bg-elevated-2);
|
|
206
|
+
color: var(--text);
|
|
207
|
+
border-color: var(--text);
|
|
208
|
+
}
|
|
209
|
+
.ts-details {
|
|
210
|
+
display: grid;
|
|
211
|
+
grid-template-columns: auto 1fr;
|
|
212
|
+
gap: var(--sp-1) var(--sp-2);
|
|
213
|
+
margin: 0;
|
|
214
|
+
font-size: var(--fs-xs);
|
|
215
|
+
}
|
|
216
|
+
.ts-details dt {
|
|
217
|
+
color: var(--text-muted);
|
|
218
|
+
white-space: nowrap;
|
|
219
|
+
}
|
|
220
|
+
.ts-details dd {
|
|
221
|
+
margin: 0;
|
|
222
|
+
color: var(--text);
|
|
223
|
+
font-variant-numeric: tabular-nums;
|
|
224
|
+
overflow-wrap: anywhere;
|
|
225
|
+
}
|
|
226
|
+
</style>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { type TimeInput, type TimestampMode } from '../../timestamp';
|
|
2
|
+
type Tone = 'inherit' | 'default' | 'muted' | 'faint' | 'danger' | 'accent';
|
|
3
|
+
type $$ComponentProps = {
|
|
4
|
+
/** The instant: a Date, epoch milliseconds, or an ISO/parseable string. */
|
|
5
|
+
value: TimeInput;
|
|
6
|
+
/** Inline display mode. Default 'iso'. */
|
|
7
|
+
mode?: TimestampMode;
|
|
8
|
+
/** Click to open the details popover (UTC / local / relative / zone /
|
|
9
|
+
* epoch). Default true. When false, renders as a bare inline <time>. */
|
|
10
|
+
details?: boolean;
|
|
11
|
+
/** Add mode-switch buttons inside the popover so the viewer can change the
|
|
12
|
+
* inline display mode. Default false. Implies `details`. */
|
|
13
|
+
selectable?: boolean;
|
|
14
|
+
/** Render in the monospace font (tabular figures stay on regardless). */
|
|
15
|
+
mono?: boolean;
|
|
16
|
+
/** Text colour, mirroring <Text> tones. Default 'muted' — timestamps read
|
|
17
|
+
* as subdued metadata; pass 'inherit' to blend with surrounding copy. */
|
|
18
|
+
tone?: Tone;
|
|
19
|
+
/** How often relative mode re-renders so "3m ago" stays fresh. */
|
|
20
|
+
tickMs?: number;
|
|
21
|
+
};
|
|
22
|
+
declare const Timestamp: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
23
|
+
type Timestamp = ReturnType<typeof Timestamp>;
|
|
24
|
+
export default Timestamp;
|
package/dist/index.d.ts
CHANGED
|
@@ -38,6 +38,7 @@ export { default as RadioGroup, type RadioOption, } from './components/molecules
|
|
|
38
38
|
export { default as SelectButton } from './components/molecules/SelectButton.svelte';
|
|
39
39
|
export { default as Tabs, type TabItem } from './components/molecules/Tabs.svelte';
|
|
40
40
|
export { default as ThemePicker } from './components/molecules/ThemePicker.svelte';
|
|
41
|
+
export { default as Timestamp } from './components/molecules/Timestamp.svelte';
|
|
41
42
|
export { default as Toaster } from './components/molecules/Toaster.svelte';
|
|
42
43
|
export { default as Toggle } from './components/molecules/Toggle.svelte';
|
|
43
44
|
export { default as Tooltip } from './components/molecules/Tooltip.svelte';
|
|
@@ -46,4 +47,5 @@ export { type Column, default as DataTable } from './components/organisms/DataTa
|
|
|
46
47
|
export { fontScale, SCALE_LEVELS, type ScaleLevel } from './stores/fontscale.svelte';
|
|
47
48
|
export { type Mode, THEMES, theme } from './stores/theme.svelte';
|
|
48
49
|
export { type Toast, type ToastTone, toasts } from './stores/toast.svelte';
|
|
50
|
+
export { formatTimestamp, localTimeZone, relativeTime, type TimeInput, type TimestampMode, } from './timestamp';
|
|
49
51
|
export { type TruncateMode, type TruncateOptions, truncate } from './truncate';
|
package/dist/index.js
CHANGED
|
@@ -46,6 +46,7 @@ export { default as RadioGroup, } from './components/molecules/RadioGroup.svelte
|
|
|
46
46
|
export { default as SelectButton } from './components/molecules/SelectButton.svelte';
|
|
47
47
|
export { default as Tabs } from './components/molecules/Tabs.svelte';
|
|
48
48
|
export { default as ThemePicker } from './components/molecules/ThemePicker.svelte';
|
|
49
|
+
export { default as Timestamp } from './components/molecules/Timestamp.svelte';
|
|
49
50
|
export { default as Toaster } from './components/molecules/Toaster.svelte';
|
|
50
51
|
export { default as Toggle } from './components/molecules/Toggle.svelte';
|
|
51
52
|
export { default as Tooltip } from './components/molecules/Tooltip.svelte';
|
|
@@ -56,4 +57,5 @@ export { fontScale, SCALE_LEVELS } from './stores/fontscale.svelte';
|
|
|
56
57
|
// ---- stores / actions ----
|
|
57
58
|
export { THEMES, theme } from './stores/theme.svelte';
|
|
58
59
|
export { toasts } from './stores/toast.svelte';
|
|
60
|
+
export { formatTimestamp, localTimeZone, relativeTime, } from './timestamp';
|
|
59
61
|
export { truncate } from './truncate';
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export type TimeInput = Date | number | string;
|
|
2
|
+
/** How the timestamp text renders inline. */
|
|
3
|
+
export type TimestampMode = 'iso' | 'local' | 'time' | 'relative';
|
|
4
|
+
/** Coerce a loose input to a Date, or null when it can't be parsed. */
|
|
5
|
+
export declare function toDate(value: TimeInput): Date | null;
|
|
6
|
+
/** Full ISO 8601, UTC — `2026-06-14T07:30:00.000Z`. */
|
|
7
|
+
export declare function toISO(d: Date): string;
|
|
8
|
+
/** Locale date+time in the viewer's zone — `6/14/2026, 4:30:00 PM`. */
|
|
9
|
+
export declare function toLocal(d: Date): string;
|
|
10
|
+
/** Clock only, zero-padded `HH:MM:SS`, in the viewer's local zone. */
|
|
11
|
+
export declare function toClock(d: Date): string;
|
|
12
|
+
/** Unix epoch in whole seconds. */
|
|
13
|
+
export declare function toEpochSeconds(d: Date): number;
|
|
14
|
+
/** The viewer's IANA time zone — `Asia/Tokyo`, `UTC`, … */
|
|
15
|
+
export declare function localTimeZone(): string;
|
|
16
|
+
/**
|
|
17
|
+
* "3m ago", "2h ago", "5d ago" — past-relative, coarsening as it ages and
|
|
18
|
+
* falling back to a locale date once past ~30 days. Future instants read
|
|
19
|
+
* "in 3m" etc. `now` is injectable so callers (and tests) control the clock.
|
|
20
|
+
*/
|
|
21
|
+
export declare function relativeTime(value: TimeInput, now?: number): string;
|
|
22
|
+
/** Render a date in the chosen inline mode. Returns '' for unparseable input. */
|
|
23
|
+
export declare function formatTimestamp(value: TimeInput, mode: TimestampMode, now?: number): string;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
// Pure date-formatting helpers behind <Timestamp> — the logic lives here (and
|
|
2
|
+
// stays unit-testable / framework-free) while the component owns only the
|
|
3
|
+
// display-mode switching and the popover. Everything accepts the same loose
|
|
4
|
+
// `TimeInput` (Date | epoch ms | ISO string) and tolerates bad input by
|
|
5
|
+
// returning '' rather than throwing, so a single malformed value never takes
|
|
6
|
+
// down a table row.
|
|
7
|
+
/** Coerce a loose input to a Date, or null when it can't be parsed. */
|
|
8
|
+
export function toDate(value) {
|
|
9
|
+
const d = value instanceof Date ? value : new Date(value);
|
|
10
|
+
return Number.isNaN(d.getTime()) ? null : d;
|
|
11
|
+
}
|
|
12
|
+
/** Full ISO 8601, UTC — `2026-06-14T07:30:00.000Z`. */
|
|
13
|
+
export function toISO(d) {
|
|
14
|
+
return d.toISOString();
|
|
15
|
+
}
|
|
16
|
+
/** Locale date+time in the viewer's zone — `6/14/2026, 4:30:00 PM`. */
|
|
17
|
+
export function toLocal(d) {
|
|
18
|
+
return d.toLocaleString();
|
|
19
|
+
}
|
|
20
|
+
/** Clock only, zero-padded `HH:MM:SS`, in the viewer's local zone. */
|
|
21
|
+
export function toClock(d) {
|
|
22
|
+
const p = (n) => String(n).padStart(2, '0');
|
|
23
|
+
return `${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
|
|
24
|
+
}
|
|
25
|
+
/** Unix epoch in whole seconds. */
|
|
26
|
+
export function toEpochSeconds(d) {
|
|
27
|
+
return Math.floor(d.getTime() / 1000);
|
|
28
|
+
}
|
|
29
|
+
/** The viewer's IANA time zone — `Asia/Tokyo`, `UTC`, … */
|
|
30
|
+
export function localTimeZone() {
|
|
31
|
+
return Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* "3m ago", "2h ago", "5d ago" — past-relative, coarsening as it ages and
|
|
35
|
+
* falling back to a locale date once past ~30 days. Future instants read
|
|
36
|
+
* "in 3m" etc. `now` is injectable so callers (and tests) control the clock.
|
|
37
|
+
*/
|
|
38
|
+
export function relativeTime(value, now = Date.now()) {
|
|
39
|
+
const d = toDate(value);
|
|
40
|
+
if (!d)
|
|
41
|
+
return '';
|
|
42
|
+
const deltaMs = now - d.getTime();
|
|
43
|
+
const future = deltaMs < 0;
|
|
44
|
+
const secs = Math.floor(Math.abs(deltaMs) / 1000);
|
|
45
|
+
const suffix = (s) => (future ? `in ${s}` : `${s} ago`);
|
|
46
|
+
if (secs < 60)
|
|
47
|
+
return suffix(`${secs}s`);
|
|
48
|
+
const mins = Math.floor(secs / 60);
|
|
49
|
+
if (mins < 60)
|
|
50
|
+
return suffix(`${mins}m`);
|
|
51
|
+
const hrs = Math.floor(mins / 60);
|
|
52
|
+
if (hrs < 24)
|
|
53
|
+
return suffix(`${hrs}h`);
|
|
54
|
+
const days = Math.floor(hrs / 24);
|
|
55
|
+
if (days < 30)
|
|
56
|
+
return suffix(`${days}d`);
|
|
57
|
+
return d.toLocaleDateString();
|
|
58
|
+
}
|
|
59
|
+
/** Render a date in the chosen inline mode. Returns '' for unparseable input. */
|
|
60
|
+
export function formatTimestamp(value, mode, now) {
|
|
61
|
+
const d = toDate(value);
|
|
62
|
+
if (!d)
|
|
63
|
+
return '';
|
|
64
|
+
switch (mode) {
|
|
65
|
+
case 'iso':
|
|
66
|
+
return toISO(d);
|
|
67
|
+
case 'local':
|
|
68
|
+
return toLocal(d);
|
|
69
|
+
case 'time':
|
|
70
|
+
return toClock(d);
|
|
71
|
+
case 'relative':
|
|
72
|
+
return relativeTime(d, now);
|
|
73
|
+
}
|
|
74
|
+
}
|
package/package.json
CHANGED