[READ-ONLY] Mirror of https://github.com/graphieros/vue-data-ui. An open source user-empowering data visualization Vue 3 components library for eloquent data storytelling
vue-data-ui.graphieros.com/
charts
components-library
dashboard
data-storytelling
data-visualization
donut
gauge
heatmap
quadrant
radar
rating-stars
scatter
screenshot
skeleton-loader
sparkline
table
vue-data-ui
vue3
vuejs
vuejs3
chore(VueUiTimer): add type defs for emits
graphieros
(May 23, 2026, 8:58 AM +0200)
7f50da71
7b1ee218
+70
-11
+2
-2
manual-testing/backend/database.json
+2
-2
manual-testing/backend/database.json
···
1495
1495
"VueUiTable": true,
1496
1496
"VueUiTableSparkline": true,
1497
1497
"VueUiThermometer": true,
1498
-
"VueUiTimer": false,
1498
+
"VueUiTimer": true,
1499
1499
"VueUiTiremarks": false,
1500
1500
"VueUiTreemap": false,
1501
1501
"VueUiWaffle": false,
···
1509
1509
"customCheckList": {},
1510
1510
"id": "4b423dba-9fc5-45b8-9dca-20e1f2678b9e",
1511
1511
"createdAt": 1779169675598,
1512
-
"updatedAt": 1779518903510
1512
+
"updatedAt": 1779519480239
1513
1513
}
1514
1514
]
1515
1515
}
+29
-2
ts-playground/src/components/charts/ts-vue-ui-timer.vue
+29
-2
ts-playground/src/components/charts/ts-vue-ui-timer.vue
···
3
3
* This playground showcases all the slots and their implementations for <VueUiTimer>
4
4
*/
5
5
import { computed } from 'vue';
6
-
import { VueUiTimer, type VueUiTimerConfig } from 'vue-data-ui/vue-ui-timer';
6
+
import { VueUiTimer, type VueUiTimerConfig, type VueUiTimerLap } from 'vue-data-ui/vue-ui-timer';
7
7
import 'vue-data-ui/style.css';
8
8
9
9
const config = computed<VueUiTimerConfig>(() => {
···
96
96
function log(n: unknown) {
97
97
console.log(n);
98
98
}
99
+
100
+
function start() {
101
+
console.log('@start');
102
+
}
103
+
104
+
function pause(payload: number) {
105
+
console.log('@pause', payload);
106
+
}
107
+
108
+
function reset() {
109
+
console.log('@reset');
110
+
}
111
+
112
+
function restart() {
113
+
console.log('@restart');
114
+
}
115
+
116
+
function lap(payload: VueUiTimerLap[]) {
117
+
console.log('@lap', payload);
118
+
}
99
119
</script>
100
120
101
121
<template>
102
122
<div style="max-width: 500px">
103
-
<VueUiTimer :config>
123
+
<VueUiTimer
124
+
:config
125
+
@start="start"
126
+
@pause="pause"
127
+
@reset="reset"
128
+
@restart="restart"
129
+
@lap="lap"
130
+
>
104
131
<template #chart-background>
105
132
<div
106
133
style="
+25
-6
types/vue-data-ui.d.ts
+25
-6
types/vue-data-ui.d.ts
···
12600
12600
width: number;
12601
12601
};
12602
12602
12603
+
export type VueUiTimerLap = {
12604
+
timestamp: number;
12605
+
elapsed: number;
12606
+
formatted: string;
12607
+
};
12608
+
12603
12609
export type VueUiTimerControlsSlotProps = {
12604
12610
isPaused: boolean;
12605
12611
isRunning: boolean;
···
12608
12614
reset: () => void;
12609
12615
restart: () => void;
12610
12616
lap: () => void;
12611
-
laps: Array<{
12612
-
timestamp: number;
12613
-
elapsed: number;
12614
-
formatted: string;
12615
-
}>;
12617
+
laps: VueUiTimerLap[];
12616
12618
elapsed?: number;
12617
12619
timestamp?: number;
12618
12620
formatted?: string;
···
12629
12631
| 'formatted'
12630
12632
>;
12631
12633
12632
-
const VueUiTimerBase: DefineComponent<VueUiTimerProps>;
12634
+
export type VueUiTimerEmits = {
12635
+
start: () => void;
12636
+
reset: () => void;
12637
+
pause: (payload: number) => void;
12638
+
restart: () => void;
12639
+
lap: (payload: VueUiTimerLap[]) => void;
12640
+
};
12641
+
12642
+
const VueUiTimerBase: DefineComponent<
12643
+
VueUiTimerProps,
12644
+
{},
12645
+
{},
12646
+
{},
12647
+
{},
12648
+
{},
12649
+
{},
12650
+
VueUiTimerEmits
12651
+
>;
12633
12652
12634
12653
export const VueUiTimer: typeof VueUiTimerBase & {
12635
12654
new (): VueUiTimerExpose & {
+14
-1
types/vue-ui-timer.d.ts
+14
-1
types/vue-ui-timer.d.ts
···
7
7
VueUiTimerTimeSlotProps,
8
8
VueUiTimerControlsSlotProps,
9
9
VueUiTimerLapsSlotProps,
10
+
VueUiTimerEmits,
11
+
VueUiTimerLap,
10
12
} from 'vue-data-ui';
11
13
12
14
export type {
···
16
18
VueUiTimerTimeSlotProps,
17
19
VueUiTimerControlsSlotProps,
18
20
VueUiTimerLapsSlotProps,
21
+
VueUiTimerEmits,
22
+
VueUiTimerLap,
19
23
};
20
24
21
-
declare const VueUiTimerBase: DefineComponent<VueUiTimerProps>;
25
+
declare const VueUiTimerBase: DefineComponent<
26
+
VueUiTimerProps,
27
+
{},
28
+
{},
29
+
{},
30
+
{},
31
+
{},
32
+
{},
33
+
VueUiTimerEmits
34
+
>;
22
35
23
36
export const VueUiTimer: typeof VueUiTimerBase & {
24
37
new (): VueUiTimerExpose & {