[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4
flo-bit.dev/ui-kit/
svelte
tailwindcss
ui-components
add test nested-comments, add relativetime
+618
-315
+4
-31
pnpm-lock.yaml
+4
-31
pnpm-lock.yaml
···
22
22
version: 3.5.2
23
23
prettier-plugin-svelte:
24
24
specifier: ^3.3.3
25
-
version: 3.3.3(prettier@3.5.2)(svelte@5.29.0)
25
+
version: 3.3.3(prettier@3.5.2)(svelte@5.36.16)
26
26
prettier-plugin-tailwindcss:
27
27
specifier: ^0.6.11
28
28
version: 0.6.11(prettier-plugin-svelte@3.3.3)(prettier@3.5.2)
···
426
426
'@fuxui/base':
427
427
specifier: workspace:*
428
428
version: link:../base
429
+
'@fuxui/time':
430
+
specifier: workspace:*
431
+
version: link:../time
429
432
'@use-gesture/vanilla':
430
433
specifier: ^10.3.1
431
434
version: 10.3.1
···
4393
4396
svelte: 5.28.1
4394
4397
dev: true
4395
4398
4396
-
/prettier-plugin-svelte@3.3.3(prettier@3.5.2)(svelte@5.29.0):
4397
-
resolution: {integrity: sha512-yViK9zqQ+H2qZD1w/bH7W8i+bVfKrD8GIFjkFe4Thl6kCT9SlAsXVNmt3jCvQOCsnOhcvYgsoVlRV/Eu6x5nNw==}
4398
-
peerDependencies:
4399
-
prettier: ^3.0.0
4400
-
svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
4401
-
dependencies:
4402
-
prettier: 3.5.2
4403
-
svelte: 5.29.0
4404
-
dev: true
4405
-
4406
4399
/prettier-plugin-svelte@3.3.3(prettier@3.5.2)(svelte@5.36.16):
4407
4400
resolution: {integrity: sha512-yViK9zqQ+H2qZD1w/bH7W8i+bVfKrD8GIFjkFe4Thl6kCT9SlAsXVNmt3jCvQOCsnOhcvYgsoVlRV/Eu6x5nNw==}
4408
4401
peerDependencies:
···
5044
5037
locate-character: 3.0.0
5045
5038
magic-string: 0.30.17
5046
5039
zimmerframe: 1.1.2
5047
-
5048
-
/svelte@5.29.0:
5049
-
resolution: {integrity: sha512-ZF1FXoTsDbTlHShZs0kTznahQhU8drBXF2Vx1dt635MW/OHpy+iWvAHsIRp+ia25L1Vrczq9EsuMdLXM+cjknw==, tarball: https://registry.npmjs.org/svelte/-/svelte-5.29.0.tgz}
5050
-
engines: {node: '>=18'}
5051
-
dependencies:
5052
-
'@ampproject/remapping': 2.3.0
5053
-
'@jridgewell/sourcemap-codec': 1.5.0
5054
-
'@sveltejs/acorn-typescript': 1.0.5(acorn@8.14.1)
5055
-
'@types/estree': 1.0.7
5056
-
acorn: 8.14.1
5057
-
aria-query: 5.3.2
5058
-
axobject-query: 4.1.0
5059
-
clsx: 2.1.1
5060
-
esm-env: 1.2.2
5061
-
esrap: 1.4.6
5062
-
is-reference: 3.0.3
5063
-
locate-character: 3.0.0
5064
-
magic-string: 0.30.17
5065
-
zimmerframe: 1.1.2
5066
-
dev: true
5067
5040
5068
5041
/svelte@5.36.16:
5069
5042
resolution: {integrity: sha512-C7HnyISfvZEofs7T4p7+bmjrbQlhd6lZfgV2tLYg6Eb3nUFM/Zu9dGlSg+GWbUBU/WPw6zDPOFNZAx9qXsoCkg==, tarball: https://registry.npmjs.org/svelte/-/svelte-5.36.16.tgz}
+6
.changeset/fancy-clocks-greet.md
+6
.changeset/fancy-clocks-greet.md
+12
-1
.vscode/settings.json
+12
-1
.vscode/settings.json
···
3
3
{
4
4
"mode": "auto"
5
5
}
6
-
]
6
+
],
7
+
"files.exclude": {
8
+
"**/.git": true,
9
+
"**/.svn": true,
10
+
"**/.hg": true,
11
+
"**/.DS_Store": true,
12
+
"**/Thumbs.db": true,
13
+
"**/.retool_types/**": true,
14
+
"**/*tsconfig.json": true,
15
+
".cache": true,
16
+
"retool.config.json": true
17
+
}
7
18
}
+6
apps/docs/src/lib/site-components/components_time.ts
+6
apps/docs/src/lib/site-components/components_time.ts
···
1
1
import type { ComponentCard } from './components_base';
2
2
import CardStopwatch from '$lib/cards/time/CardStopwatch.svelte';
3
3
import CardTimer from '$lib/cards/time/CardTimer.svelte';
4
+
import CardRelativeTime from '$lib/cards/time/CardRelativeTime.svelte';
4
5
5
6
export const timeComponents: ComponentCard[] = [
6
7
{
···
12
13
component: CardTimer,
13
14
label: 'Timer',
14
15
href: 'timer'
16
+
},
17
+
{
18
+
component: CardRelativeTime,
19
+
label: 'Relative Time',
20
+
href: 'relative-time'
15
21
}
16
22
].sort((a, b) => a.label.localeCompare(b.label));
+1
packages/time/src/lib/components/index.ts
+1
packages/time/src/lib/components/index.ts
+18
apps/docs/src/lib/cards/time/CardRelativeTime.svelte
+18
apps/docs/src/lib/cards/time/CardRelativeTime.svelte
···
1
+
<script lang="ts">
2
+
import { Box } from '@fuxui/base';
3
+
import { RelativeTime, TimerState } from '@fuxui/time';
4
+
import { onMount } from 'svelte';
5
+
6
+
let timer: TimerState | undefined = $state();
7
+
8
+
onMount(() => {
9
+
timer?.start();
10
+
});
11
+
</script>
12
+
13
+
<div class="text-base-900 dark:text-base-50 flex flex-col items-center justify-center">
14
+
<RelativeTime date={new Date(Date.now() - 10000)} locale="en-US" />
15
+
<RelativeTime date={new Date(Date.now() - 1000 * 60 * 10.0)} locale="en-US" />
16
+
<RelativeTime date={new Date(Date.now() - 1000 * 60 * 60 * 24)} locale="en-US" />
17
+
<RelativeTime date={new Date(Date.now() - 1000 * 60 * 60 * 24 * 30)} locale="en-US" />
18
+
</div>
+17
packages/time/src/lib/components/relative-time/RelativeTime.svelte
+17
packages/time/src/lib/components/relative-time/RelativeTime.svelte
···
1
+
<script lang="ts">
2
+
import { onDestroy } from 'svelte';
3
+
import { register, unregister } from './state';
4
+
5
+
export let date: Date | number;
6
+
export let locale: string;
7
+
export let live = true;
8
+
9
+
let instance = new Object();
10
+
let text = '';
11
+
12
+
register(instance, date, locale, live, (value) => ({ text } = value));
13
+
14
+
onDestroy(() => unregister(instance));
15
+
</script>
16
+
17
+
<span class={$$props.class} title={date.toLocaleString()}>{text}</span>
+31
packages/time/src/lib/components/relative-time/action.ts
+31
packages/time/src/lib/components/relative-time/action.ts
···
1
+
import type { Callback } from './render';
2
+
import { register, unregister } from './state';
3
+
4
+
export interface Options {
5
+
date: Date | number;
6
+
locale?: string;
7
+
live?: boolean;
8
+
}
9
+
10
+
export function relativeTime(node: HTMLElement, options: Options) {
11
+
const callback: Callback = ({ text }) => (node.textContent = text);
12
+
13
+
function init(options: Options) {
14
+
const date = options.date;
15
+
const locale = options.locale ?? navigator.language;
16
+
const live = (options.live = true);
17
+
18
+
register(node, date, locale, live, callback);
19
+
}
20
+
21
+
init(options);
22
+
23
+
return {
24
+
update(options: Options) {
25
+
init(options);
26
+
},
27
+
destroy() {
28
+
unregister(node);
29
+
}
30
+
};
31
+
}
+12
packages/time/src/lib/components/relative-time/formatter.ts
+12
packages/time/src/lib/components/relative-time/formatter.ts
···
1
+
// keep a cache of formatter per locale, to avoid re-creating them (GC)
2
+
const formatters = new Map<string, Intl.RelativeTimeFormat>();
3
+
4
+
// get the Intl.RelativeTimeFormat formatter for the given locale
5
+
export function getFormatter(locale: string) {
6
+
if (formatters.has(locale)) {
7
+
return formatters.get(locale)!;
8
+
}
9
+
const formatter = new Intl.RelativeTimeFormat(locale, { numeric: 'always', style: 'narrow' });
10
+
formatters.set(locale, formatter);
11
+
return formatter;
12
+
}
+8
packages/time/src/lib/components/relative-time/index.ts
+8
packages/time/src/lib/components/relative-time/index.ts
···
1
+
// adapted from https://github.com/CaptainCodeman/svelte-relative-time
2
+
3
+
export * from './action';
4
+
export type { Callback } from './render';
5
+
export { register, unregister } from './state';
6
+
export { default } from './RelativeTime.svelte';
7
+
8
+
export { default as RelativeTime } from './RelativeTime.svelte';
+80
packages/time/src/lib/components/relative-time/render.ts
+80
packages/time/src/lib/components/relative-time/render.ts
···
1
+
export type Callback = (result: {
2
+
seconds: number;
3
+
count: number;
4
+
units: Intl.RelativeTimeFormatUnit;
5
+
text: string;
6
+
}) => void;
7
+
8
+
export interface RenderState {
9
+
date: Date | number;
10
+
callback: Callback;
11
+
formatter: Intl.RelativeTimeFormat;
12
+
}
13
+
14
+
// Array reprsenting one minute, hour, day, week, month, etc in seconds
15
+
const cutoffs = [60, 3600, 86400, 86400 * 7, 86400 * 30, 86400 * 365, Infinity];
16
+
17
+
// Array equivalent to the above but in the string representation of the units
18
+
const formatUnits: Intl.RelativeTimeFormatUnit[] = [
19
+
'seconds',
20
+
'minutes',
21
+
'hours',
22
+
'days',
23
+
'weeks',
24
+
'months',
25
+
'years'
26
+
];
27
+
28
+
// function to render relative time into
29
+
export function render(state: RenderState, now: number) {
30
+
const { date, callback, formatter } = state;
31
+
32
+
// Allow dates or times to be passed
33
+
const timeMs = typeof date === 'number' ? date : date.getTime();
34
+
35
+
// Get the amount of seconds between the given date and now
36
+
const delta = timeMs - now;
37
+
const seconds = Math.round(delta / 1000);
38
+
39
+
// Grab the ideal cutoff unit
40
+
const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(seconds));
41
+
42
+
// units
43
+
const units = formatUnits[unitIndex];
44
+
45
+
// Get the divisor to divide from the seconds. E.g. if our unit is 'day' our divisor
46
+
// is one day in seconds, so we can divide our seconds by this to get the # of days
47
+
const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;
48
+
49
+
// count of units
50
+
const count = Math.round(seconds / divisor);
51
+
52
+
// Intl.RelativeTimeFormat do its magic
53
+
callback({
54
+
seconds: seconds,
55
+
count,
56
+
units,
57
+
text: formatter.format(count, units).replace('ago', '')
58
+
});
59
+
60
+
// calculate time to next update, taking account rounding (e.g. it goes from 2 minutes to 1 minute at 90 seconds)
61
+
// and also the changeover from units (59 seconds shouldn't show as 1 minute, so at 61 seconds we schedule the next
62
+
// update for 1 second time)
63
+
64
+
const divisorMs = divisor * 1000;
65
+
66
+
let updateIn;
67
+
68
+
if (unitIndex) {
69
+
updateIn = divisorMs / 2 - (Math.abs(delta) % divisorMs);
70
+
if (updateIn < 0) {
71
+
updateIn += divisorMs;
72
+
}
73
+
} else {
74
+
updateIn = divisorMs - (Math.abs(delta) % divisorMs);
75
+
}
76
+
77
+
const updateAt = now + updateIn;
78
+
79
+
return updateAt;
80
+
}
+60
packages/time/src/lib/components/relative-time/state.ts
+60
packages/time/src/lib/components/relative-time/state.ts
···
1
+
import { getFormatter } from './formatter';
2
+
import { render } from './render';
3
+
import type { Callback, RenderState } from './render';
4
+
5
+
interface UpdateState extends RenderState {
6
+
update: number;
7
+
}
8
+
9
+
// keep track of each instance
10
+
const instances = new Map<object, UpdateState>();
11
+
12
+
// we use a single timer for efficiency and to keep updates in sync
13
+
let updateInterval: number | NodeJS.Timeout;
14
+
15
+
// register or update instance
16
+
export function register(
17
+
instance: object,
18
+
date: Date | number,
19
+
locale: string,
20
+
live: boolean,
21
+
callback: Callback
22
+
) {
23
+
// get the formatter for the given locale, we do this here so we don't keep having to look it up on each tick
24
+
const formatter = getFormatter(locale);
25
+
26
+
// create state to render
27
+
const state = { date, callback, formatter };
28
+
29
+
// initial render is immediate, so works for SSR
30
+
const update = render(state, Date.now());
31
+
32
+
// if it's to update live, we keep a track and schedule the next update
33
+
if (live) {
34
+
instances.set(instance, { ...state, update });
35
+
} else {
36
+
instances.delete(instance);
37
+
}
38
+
39
+
// start the clock ticking if there are any live instances
40
+
if (instances.size) {
41
+
updateInterval =
42
+
updateInterval ||
43
+
setInterval(() => {
44
+
const now = Date.now();
45
+
for (const state of instances.values()) {
46
+
if (state.update <= now) {
47
+
state.update = render(state, now);
48
+
}
49
+
}
50
+
}, 1000);
51
+
}
52
+
}
53
+
54
+
export function unregister(instance: object) {
55
+
instances.delete(instance);
56
+
if (instances.size === 0) {
57
+
clearInterval(updateInterval);
58
+
updateInterval = 0;
59
+
}
60
+
}
+8
apps/docs/src/routes/(main)/components/time/relative-time/+page.svelte
+8
apps/docs/src/routes/(main)/components/time/relative-time/+page.svelte
+8
apps/docs/src/routes/(main)/components/time/relative-time/Example.svelte
+8
apps/docs/src/routes/(main)/components/time/relative-time/Example.svelte
+23
apps/docs/src/routes/(main)/components/time/relative-time/RelativeTime.md
+23
apps/docs/src/routes/(main)/components/time/relative-time/RelativeTime.md
···
1
+
<script lang="ts">
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Stopwatch
6
+
7
+
## Example
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script lang="ts">
15
+
import { RelativeTime } from '@fuxui/time';
16
+
</script>
17
+
18
+
<RelativeTime date={new Date(Date.now() - 10000)} locale="en-US" />
19
+
```
20
+
21
+
## Credits
22
+
23
+
- Based on [svelte-relative-time](https://github.com/CaptainCodeman/svelte-relative-time)