graphieros.npmx.social / vue-data-ui
[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
3
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

chore(VueUiWaffle): add type defs for emits

graphieros (May 23, 2026, 9:20 AM +0200) 20cbeea7 c9dcf735

+61 -5
+2 -2
manual-testing/backend/database.json
··· 1498 1498 "VueUiTimer": true, 1499 1499 "VueUiTiremarks": true, 1500 1500 "VueUiTreemap": true, 1501 - "VueUiWaffle": false, 1501 + "VueUiWaffle": true, 1502 1502 "VueUiWheel": false, 1503 1503 "VueUiWordCloud": false, 1504 1504 "VueUiWorld": false, ··· 1509 1509 "customCheckList": {}, 1510 1510 "id": "4b423dba-9fc5-45b8-9dca-20e1f2678b9e", 1511 1511 "createdAt": 1779169675598, 1512 - "updatedAt": 1779520434397 1512 + "updatedAt": 1779520807214 1513 1513 } 1514 1514 ] 1515 1515 }
+16 -1
ts-playground/src/components/charts/ts-vue-ui-waffle.vue
··· 7 7 VueUiWaffle, 8 8 type VueUiWaffleConfig, 9 9 type VueUiWaffleDatasetItem, 10 + type VueUiWaffleEmitCopyAlt, 11 + type VueUiWaffleEmitSelectLegend, 10 12 } from 'vue-data-ui/vue-ui-waffle'; 11 13 import { mergeConfigs } from 'vue-data-ui/utils'; 12 14 import 'vue-data-ui/style.css'; ··· 279 281 function log(n: unknown) { 280 282 console.log(n); 281 283 } 284 + 285 + function selectLegend(payload: VueUiWaffleEmitSelectLegend) { 286 + console.log('@selectLegend', payload); 287 + } 288 + 289 + function copyAlt(payload: VueUiWaffleEmitCopyAlt) { 290 + console.log('@copyAlt', payload); 291 + } 282 292 </script> 283 293 284 294 <template> 285 295 <div style="max-width: 500px"> 286 - <VueUiWaffle :dataset :config> 296 + <VueUiWaffle 297 + :dataset 298 + :config 299 + @selectLegend="selectLegend" 300 + @copyAlt="copyAlt" 301 + > 287 302 <template #annotator-action-close> 288 303 <span style="color: chocolate">X</span> 289 304 </template>
+27 -1
types/vue-data-ui.d.ts
··· 7312 7312 dataset: VueUiWaffleDatasetItem[]; 7313 7313 }; 7314 7314 7315 - const VueUiWaffleBase: DefineComponent<VueUiWaffleProps>; 7315 + export type VueUiWaffleEmitSelectLegend = Array<{ 7316 + color: string; 7317 + name: string; 7318 + proportion: number; 7319 + value: number; 7320 + }>; 7321 + 7322 + export type VueUiWaffleEmitCopyAlt = { 7323 + config: VueUiWaffleConfig; 7324 + dataset: VueUiWaffleDatapoint[]; 7325 + }; 7326 + 7327 + export type VueUiWaffleEmits = { 7328 + selectLegend: (payload: VueUiWaffleEmitSelectLegend) => void; 7329 + copyAlt: (payload: VueUiWaffleEmitCopyAlt) => void; 7330 + }; 7331 + 7332 + const VueUiWaffleBase: DefineComponent< 7333 + VueUiWaffleProps, 7334 + {}, 7335 + {}, 7336 + {}, 7337 + {}, 7338 + {}, 7339 + {}, 7340 + VueUiWaffleEmits 7341 + >; 7316 7342 7317 7343 export const VueUiWaffle: typeof VueUiWaffleBase & { 7318 7344 new (): VueUiWaffleExpose & {
+16 -1
types/vue-ui-waffle.d.ts
··· 19 19 VueUiWaffleLegendItem, 20 20 VueUiWaffleLegendSlotProps, 21 21 VueUiWaffleTooltipSlotProps, 22 + VueUiWaffleEmits, 23 + VueUiWaffleEmitSelectLegend, 24 + VueUiWaffleEmitCopyAlt, 22 25 } from 'vue-data-ui'; 23 26 24 27 export type { ··· 40 43 VueUiWaffleLegendItem, 41 44 VueUiWaffleLegendSlotProps, 42 45 VueUiWaffleTooltipSlotProps, 46 + VueUiWaffleEmits, 47 + VueUiWaffleEmitSelectLegend, 48 + VueUiWaffleEmitCopyAlt, 43 49 }; 44 50 45 - declare const VueUiWaffleBase: DefineComponent<VueUiWaffleProps>; 51 + declare const VueUiWaffleBase: DefineComponent< 52 + VueUiWaffleProps, 53 + {}, 54 + {}, 55 + {}, 56 + {}, 57 + {}, 58 + {}, 59 + VueUiWaffleEmits 60 + >; 46 61 47 62 export const VueUiWaffle: typeof VueUiWaffleBase & { 48 63 new (): VueUiWaffleExpose & {