feat(VueUiWorld): add slot types · graphieros.npmx.social/vue-data-ui@957d3a0

+2 -2

manual-testing/backend/database.json

··· 1239 1239 "VueUiWaffle": true, 1240 1240 "VueUiWheel": true, 1241 1241 "VueUiWordCloud": true, 1242 - "VueUiWorld": false, 1242 + "VueUiWorld": true, 1243 1243 "VueUiXy": true, 1244 1244 "VueUiXyCanvas": false 1245 1245 }, ··· 1247 1247 "customCheckList": {}, 1248 1248 "id": "3846f04c-685f-4509-8042-87b9c0b7ec33", 1249 1249 "createdAt": 1775989842046, 1250 - "updatedAt": 1777179147668 1250 + "updatedAt": 1777185327392 1251 1251 }, 1252 1252 { 1253 1253 "title": "Expose more methods",

+1 -1

src/resources/worldGeo.js

··· 9503 9503 ], 9504 9504 ], 9505 9505 }, 9506 - properties: { admin: 'France', iso_a3: '-99', name: 'France' }, 9506 + properties: { admin: 'France', iso_a3: 'FRA', name: 'France' }, 9507 9507 }, 9508 9508 { 9509 9509 type: 'Feature',

+5

ts-playground/src/App.vue

··· 165 165 const TsVueUiWordCloud = defineAsyncComponent( 166 166 () => import('./components/charts/ts-vue-ui-word-cloud.vue'), 167 167 ); 168 + const TsVueUiWorld = defineAsyncComponent( 169 + () => import('./components/charts/ts-vue-ui-world.vue'), 170 + ); 168 171 169 172 const components = shallowRef([ 170 173 { name: 'VueUiXy' }, ··· 222 225 { name: 'VueUiWaffle' }, 223 226 { name: 'VueUiWheel' }, 224 227 { name: 'VueUiWordCloud' }, 228 + { name: 'VueUiWorld' }, 225 229 ]); 226 230 227 231 const selectedComponent = shallowRef(components.value[0]); ··· 322 326 <TsVueUiWaffle v-if="selectedComponent?.name === 'VueUiWaffle'" /> 323 327 <TsVueUiWheel v-if="selectedComponent?.name === 'VueUiWheel'" /> 324 328 <TsVueUiWordCloud v-if="selectedComponent?.name === 'VueUiWordCloud'" /> 329 + <TsVueUiWorld v-if="selectedComponent?.name === 'VueUiWorld'" /> 325 330 </div> 326 331 </template> 327 332

+411

ts-playground/src/components/charts/ts-vue-ui-world.vue

··· 1 + <script setup lang="ts"> 2 + /** 3 + * This playground showcases all the slots and their implementations for <VueUiWorld> 4 + */ 5 + import { computed } from 'vue'; 6 + import { 7 + VueUiWorld, 8 + type VueUiWorldConfig, 9 + type VueUiWorldDataset, 10 + } from 'vue-data-ui/vue-ui-world'; 11 + import { mergeConfigs } from 'vue-data-ui/utils'; 12 + import { getVueDataUiConfig } from 'vue-data-ui'; 13 + import 'vue-data-ui/style.css'; 14 + 15 + import KeyboardNavigationHint from '../slots/common/keyboard-navigation-hint.vue'; 16 + import Watermark from '../slots/common/watermark.vue'; 17 + import Skeleton from '../slots/common/skeleton.vue'; 18 + import PatternSlot from '../slots/common/pattern-slot.vue'; 19 + import CommonAnnotatorActionColor from '../slots/common/annotator-action-color.vue'; 20 + import CommonAnnotatorActionDraw from '../slots/common/annotator-action-draw.vue'; 21 + import CommonAnnotatorActionUndo from '../slots/common/annotator-action-undo.vue'; 22 + import CommonAnnotatorActionRedo from '../slots/common/annotator-action-redo.vue'; 23 + import CommonAnnotatorActionDelete from '../slots/common/annotator-action-delete.vue'; 24 + import CommonMenuIcon from '../slots/common/menu-icon.vue'; 25 + import CommonOptionFullscreen from '../slots/common/option-fullscreen.vue'; 26 + import CommonOptionAnnotator from '../slots/common/option-annotator.vue'; 27 + import WorldSvg from '../slots/vue-ui-world/world-svg.vue'; 28 + import WorldLegend from '../slots/vue-ui-world/world-legend.vue'; 29 + import WorldTooltip from '../slots/vue-ui-world/world-tooltip.vue'; 30 + 31 + const dataset = computed<VueUiWorldDataset>(() => { 32 + return { 33 + USA: { value: 26465, category: 'A' }, 34 + CHN: { value: 17679, category: 'B' }, 35 + FRA: { value: 12000, category: 'C' }, 36 + }; 37 + }); 38 + 39 + const testPreconfig = computed<VueUiWorldConfig>(() => { 40 + return { 41 + skeletonDataset: null, 42 + skeletonConfig: null, 43 + debug: false, 44 + loading: false, 45 + events: { 46 + datapointEnter: null, 47 + datapointLeave: null, 48 + datapointClick: null, 49 + }, 50 + userOptions: { 51 + show: true, 52 + showOnChartHover: false, 53 + keepStateOnChartLeave: true, 54 + position: 'right', 55 + buttons: { 56 + tooltip: true, 57 + pdf: true, 58 + csv: true, 59 + img: true, 60 + table: true, 61 + labels: false, 62 + fullscreen: true, 63 + sort: false, 64 + stack: false, 65 + animation: false, 66 + annotator: true, 67 + svg: true, 68 + zoom: false, 69 + altCopy: false, 70 + }, 71 + callbacks: { 72 + animation: null, 73 + annotator: null, 74 + csv: null, 75 + fullscreen: null, 76 + img: null, 77 + labels: null, 78 + pdf: null, 79 + sort: null, 80 + stack: null, 81 + table: null, 82 + tooltip: null, 83 + svg: null, 84 + zoom: null, 85 + altCopy: null, 86 + }, 87 + buttonTitles: { 88 + open: 'Open options', 89 + close: 'Close options', 90 + tooltip: 'Toggle tooltip', 91 + pdf: 'Download PDF', 92 + csv: 'Download CSV', 93 + img: 'Download PNG', 94 + table: 'Toggle table', 95 + fullscreen: 'Toggle fullscreen', 96 + annotator: 'Toggle annotator', 97 + svg: 'Download SVG', 98 + altCopy: 'Copy alt text', 99 + }, 100 + print: { 101 + scale: 2, 102 + orientation: 'auto', 103 + overflowTolerance: 0.2, 104 + }, 105 + useCursorPointer: false, 106 + }, 107 + customPalette: [], 108 + projection: 'globe', 109 + style: { 110 + fontFamily: 'inherit', 111 + chart: { 112 + backgroundColor: '#FFFFFF', 113 + color: '#2D353C', 114 + padding: { 115 + top: 12, 116 + right: 12, 117 + bottom: 12, 118 + left: 12, 119 + }, 120 + dataLabels: { 121 + prefix: '', 122 + suffix: '', 123 + rounding: 0, 124 + formatter: null, 125 + }, 126 + dimensions: { 127 + height: null, 128 + width: null, 129 + }, 130 + globe: { 131 + center: { 132 + x: 0, 133 + y: 0, 134 + }, 135 + waterColor: '#1f77b4', 136 + }, 137 + territory: { 138 + stroke: '#666666', 139 + emptyColor: '#E0E0E0', 140 + strokeWidth: 0.5, 141 + strokeWidthSelected: 2, 142 + colors: { 143 + min: '#E0E0E0', 144 + max: null, 145 + }, 146 + showTaiwanAsPartOfChina: false, 147 + }, 148 + tooltip: { 149 + show: true, 150 + color: '#2D353C', 151 + backgroundColor: '#FFFFFF', 152 + fontSize: 14, 153 + customFormat: null, 154 + borderRadius: 4, 155 + borderColor: '#e1e5e8', 156 + borderWidth: 1, 157 + backgroundOpacity: 100, 158 + position: 'center', 159 + offsetY: 24, 160 + smooth: true, 161 + backdropFilter: true, 162 + smoothForce: 0.18, 163 + smoothSnapThreshold: 0.25, 164 + teleportTo: 'body', 165 + showMinimap: true, 166 + }, 167 + title: { 168 + text: '', 169 + color: '#2D353C', 170 + fontSize: 20, 171 + bold: true, 172 + textAlign: 'center', 173 + paddingLeft: 0, 174 + paddingRight: 0, 175 + subtitle: { 176 + color: '#A1A1A1', 177 + text: '', 178 + fontSize: 16, 179 + bold: false, 180 + }, 181 + }, 182 + legend: { 183 + show: true, 184 + bold: false, 185 + backgroundColor: '#FFFFFF', 186 + color: '#2D353C', 187 + fontSize: 14, 188 + selectAllToggle: { 189 + show: false, 190 + backgroundColor: '#e1e5e8', 191 + color: '#2D353C', 192 + }, 193 + position: 'bottom', 194 + }, 195 + }, 196 + }, 197 + table: { 198 + show: false, 199 + responsiveBreakpoint: 400, 200 + useDialog: false, 201 + th: { 202 + backgroundColor: '#FFFFFF', 203 + color: '#2D353C', 204 + outline: 'none', 205 + }, 206 + td: { 207 + backgroundColor: '#FFFFFF', 208 + color: '#2D353C', 209 + outline: 'none', 210 + roundingValue: 0, 211 + }, 212 + columnNames: { 213 + series: 'Country', 214 + value: 'Value', 215 + category: 'Category', 216 + }, 217 + }, 218 + }; 219 + }); 220 + 221 + const config = computed<VueUiWorldConfig>(() => { 222 + return mergeConfigs({ 223 + defaultConfig: testPreconfig.value, 224 + userConfig: { 225 + userOptions: { 226 + buttons: { 227 + altCopy: true, 228 + }, 229 + callbacks: { 230 + altCopy: (args) => { 231 + console.log(args); 232 + }, 233 + }, 234 + }, 235 + }, 236 + }); 237 + }); 238 + 239 + function log(n: unknown) { 240 + console.log(n); 241 + } 242 + </script> 243 + 244 + <template> 245 + <div> 246 + <VueUiWorld :dataset :config> 247 + <template #annotator-action-close> 248 + <span style="color: chocolate">X</span> 249 + </template> 250 + 251 + <template #annotator-action-color="{ color }"> 252 +  253 + <CommonAnnotatorActionColor :color /> 254 + </template> 255 + 256 + <template #annotator-action-draw="{ mode }"> 257 + <CommonAnnotatorActionDraw :mode /> 258 + </template> 259 + 260 + <template #annotator-action-undo="{ disabled }"> 261 + <CommonAnnotatorActionUndo :disabled /> 262 + </template> 263 + 264 + <template #annotator-action-redo="{ disabled }"> 265 + <CommonAnnotatorActionRedo :disabled /> 266 + </template> 267 + 268 + <template #annotator-action-delete="{ disabled }"> 269 + <CommonAnnotatorActionDelete :disabled /> 270 + </template> 271 + 272 + <template #menuIcon="{ isOpen, color }"> 273 + <CommonMenuIcon :isOpen :color /> 274 + </template> 275 + 276 + <template #optionTooltip> 277 + <code 278 + style=" 279 + color: chocolate; 280 + font-size: 0.7rem; 281 + pointer-events: none; 282 + " 283 + >#optionTooltip</code 284 + > 285 + </template> 286 + 287 + <template #optionPdf> 288 + <code 289 + style=" 290 + color: chocolate; 291 + font-size: 0.7rem; 292 + pointer-events: none; 293 + " 294 + >#optionPdf</code 295 + > 296 + </template> 297 + 298 + <template #optionCsv> 299 + <code 300 + style=" 301 + color: chocolate; 302 + font-size: 0.7rem; 303 + pointer-events: none; 304 + " 305 + >#optionCsv</code 306 + > 307 + </template> 308 + 309 + <template #optionImg> 310 + <code 311 + style=" 312 + color: chocolate; 313 + font-size: 0.7rem; 314 + pointer-events: none; 315 + " 316 + >#optionImg</code 317 + > 318 + </template> 319 + 320 + <template #optionSvg> 321 + <code 322 + style=" 323 + color: chocolate; 324 + font-size: 0.7rem; 325 + pointer-events: none; 326 + " 327 + >#optionSvg</code 328 + > 329 + </template> 330 + 331 + <template #optionTable> 332 + <code 333 + style=" 334 + color: chocolate; 335 + font-size: 0.7rem; 336 + pointer-events: none; 337 + " 338 + >#optionTable</code 339 + > 340 + </template> 341 + 342 + <template #optionFullscreen="{ toggleFullscreen, isFullscreen }"> 343 + <CommonOptionFullscreen :toggle-fullscreen :is-fullscreen /> 344 + </template> 345 + 346 + <template #optionAnnotator="{ toggleAnnotator, isAnnotator }"> 347 + <CommonOptionAnnotator :toggle-annotator :is-annotator /> 348 + </template> 349 + 350 + <template #optionAltCopy> 351 + <code style="color: chocolate; font-size: 10px" 352 + >#optionAltCopy</code 353 + > 354 + </template> 355 + 356 + <template #chart-background> 357 + <div 358 + style=" 359 + width: 100%; 360 + height: 100%; 361 + background: linear-gradient( 362 + to bottom, 363 + #cccccc00, 364 + #cccccc90 365 + ); 366 + " 367 + > 368 + <code style="color: chocolate"> #chart-background </code> 369 + </div> 370 + </template> 371 + 372 + <template #pattern="{ patternId }"> 373 + <PatternSlot :pattern-id color="#6376DD" /> 374 + </template> 375 + 376 + <template #svg="{ svg }"> 377 + <WorldSvg :svg /> 378 + </template> 379 + 380 + <template #watermark="{ isPrinting }"> 381 + <Watermark :is-printing /> 382 + </template> 383 + 384 + <template #source> 385 + <code style="color: chocolate"> #source </code> 386 + </template> 387 + 388 + <template #skeleton> 389 + <Skeleton /> 390 + </template> 391 + 392 + <template #legend="{ legend }"> 393 + <WorldLegend :items="legend" /> 394 + </template> 395 + 396 + <template #tooltip-before> 397 + <span style="color: chocolate"> #tooltip-before </span> 398 + <br /> 399 + </template> 400 + 401 + <template #tooltip="{ datapoint }"> 402 + <WorldTooltip :datapoint /> 403 + </template> 404 + 405 + <template #tooltip-after> 406 + <br /> 407 + <span style="color: chocolate"> #tooltip-after </span> 408 + </template> 409 + </VueUiWorld> 410 + </div> 411 + </template>

+1 -1

ts-playground/src/components/slots/common/pattern-slot.vue

··· 3 3 const props = withDefaults( 4 4 defineProps<{ 5 5 patternId: VueUiPatternSlotProps['patternId']; 6 - seriesIndex: VueUiPatternSlotProps['seriesIndex']; 6 + seriesIndex?: VueUiPatternSlotProps['seriesIndex']; 7 7 color?: string; 8 8 }>(), 9 9 {

+28

ts-playground/src/components/slots/vue-ui-world/world-legend.vue

··· 1 + <script setup lang="ts"> 2 + import type { VueUiWorldLegendSlotProps } from 'vue-data-ui/vue-ui-world'; 3 + 4 + const props = defineProps<{ 5 + items: VueUiWorldLegendSlotProps['legend']; 6 + }>(); 7 + </script> 8 + 9 + <template> 10 + <span style="color: chocolate">#legend</span> 11 + <button 12 + v-for="item in items" 13 + :key="item.name" 14 + @click="item.segregate()" 15 + :class="{ 16 + segregated: item.isSegregated, 17 + }" 18 + > 19 + {{ item }} 20 + </button> 21 + </template> 22 + 23 + <style scoped> 24 + .segregated { 25 + background: #2a2a2a; 26 + color: #cccccc; 27 + } 28 + </style>

+29

ts-playground/src/components/slots/vue-ui-world/world-svg.vue

··· 1 + <script setup lang="ts"> 2 + import type { VueUiWorldSvgSlotProps } from 'vue-data-ui/vue-ui-world'; 3 + 4 + const props = defineProps<{ 5 + svg: VueUiWorldSvgSlotProps['svg']; 6 + }>(); 7 + </script> 8 + 9 + <template> 10 + <g style="pointer-events: none"> 11 + <circle 12 + :cx="svg.width / 2" 13 + :cy="svg.height / 2" 14 + :r="30" 15 + fill="chocolate" 16 + opacity="0.7" 17 + /> 18 + <text 19 + :x="svg.width / 2" 20 + :y="svg.height / 2" 21 + fill="white" 22 + font-size="12" 23 + text-anchor="middle" 24 + dominant-baseline="middle" 25 + > 26 + #svg 27 + </text> 28 + </g> 29 + </template>

+22

ts-playground/src/components/slots/vue-ui-world/world-tooltip.vue

··· 1 + <script setup lang="ts"> 2 + import type { VueUiWorldTooltipSlotProps } from 'vue-data-ui/vue-ui-world'; 3 + 4 + const props = defineProps<{ 5 + datapoint: VueUiWorldTooltipSlotProps['datapoint']; 6 + }>(); 7 + </script> 8 + 9 + <template> 10 + <code> 11 + #tooltip 12 + <br /> 13 + datapoint: 14 + <div style="font-size: 3px; line-height: 0.3rem">{{ datapoint }}</div> 15 + </code> 16 + </template> 17 + 18 + <style scoped> 19 + code { 20 + font-size: 0.7rem; 21 + } 22 + </style>

+75 -8

types/vue-data-ui.d.ts

··· 13296 13296 datapointLeave?: VueUiWorldEvent; // v3 13297 13297 datapointClick?: VueUiWorldEvent; // v3 13298 13298 }; 13299 - userOptions?: ChartUserOptions; 13299 + userOptions?: ChartUserOptions<VueUiWorldDatapoint[], VueUiWorldConfig>; 13300 13300 customPalette?: string[]; 13301 13301 projection?: 13302 13302 | 'aitoff' ··· 13398 13398 toggleFullscreen(): void; 13399 13399 }; 13400 13400 13401 - export const VueUiWorld: DefineComponent< 13402 - { 13403 - config?: VueUiWorldConfig; 13404 - dataset?: VueUiWorldDataset; 13405 - }, 13406 - VueUiWorldExpose 13407 - >; 13401 + export type VueUiWorldPatternSlotProps = VueUiWorldDatapoint & { 13402 + patternId: string; 13403 + }; 13404 + 13405 + export type VueUiWorldSvgSlotProps = { 13406 + svg: { 13407 + height: number; 13408 + isPrintingImg: boolean; 13409 + isPrintingSvg: boolean; 13410 + width: number; 13411 + }; 13412 + }; 13413 + 13414 + export type VueUiWorldLegendItem = { 13415 + color: string; 13416 + isSegregated: boolean; 13417 + name: string; 13418 + opacity: number; 13419 + patternIndex: number; 13420 + segregate: () => void; 13421 + shape: Shape; 13422 + }; 13423 + 13424 + export type VueUiWorldLegendSlotProps = { 13425 + legend: VueUiWorldLegendItem[]; 13426 + }; 13427 + 13428 + export type VueUiWorldTooltipSlotProps = { 13429 + config: VueUiWorldConfig; 13430 + datapoint: VueUiWorldDatapoint; 13431 + series: VueUiWordCloudDatapoint[]; 13432 + }; 13433 + 13434 + export type VueUiWorldProps = { 13435 + config?: VueUiWorldConfig; 13436 + dataset?: VueUiWorldDataset; 13437 + }; 13438 + 13439 + const VueUiWorldBase: DefineComponent<VueUiWorldProps>; 13440 + 13441 + export const VueUiWorld: typeof VueUiWorldBase & { 13442 + new (): VueUiWorldExpose & { 13443 + $slots: CommonAnnotatorSlots & { 13444 + menuIcon?: (props: VueUiMenuIconSlotProps) => VNodeChild; 13445 + optionTooltip?: () => VNodeChild; 13446 + optionPdf?: () => VNodeChild; 13447 + optionCsv?: () => VNodeChild; 13448 + optionImg?: () => VNodeChild; 13449 + optionSvg?: () => VNodeChild; 13450 + optionTable?: () => VNodeChild; 13451 + optionFullscreen?: ( 13452 + props: VueUiOptionFullscreenSlotProps, 13453 + ) => VNodeChild; 13454 + optionAltCopy?: () => VNodeChild; 13455 + optionAnnotator?: ( 13456 + props: VueUiOptionAnnotatorSlotProps, 13457 + ) => VNodeChild; 13458 + ['chart-background']?: () => VNodeChild; 13459 + pattern?: (props: VueUiWorldPatternSlotProps) => VNodeChild; 13460 + svg?: (props: VueUiWorldSvgSlotProps) => VNodeChild; 13461 + watermark?: (props: VueUiWatermarkSlotProps) => VNodeChild; 13462 + source?: () => VNodeChild; 13463 + skeleton?: () => VNodeChild; 13464 + legend?: (props: VueUiWorldLegendSlotProps) => VNodeChild; 13465 + ['tooltip-before']?: ( 13466 + props: VueUiWorldTooltipSlotProps, 13467 + ) => VNodeChild; 13468 + tooltip?: (props: VueUiWorldTooltipSlotProps) => VNodeChild; 13469 + ['tooltip-after']?: ( 13470 + props: VueUiWorldTooltipSlotProps, 13471 + ) => VNodeChild; 13472 + }; 13473 + }; 13474 + }; 13408 13475 13409 13476 export type VueUiRidgelineDatapoint = { 13410 13477 name: string;

+68 -9

types/vue-ui-world.d.ts

··· 1 - import type { DefineComponent } from 'vue'; 1 + import type { DefineComponent, VNodeChild } from 'vue'; 2 + 3 + import type { 4 + VueUiWorldDatapoint, 5 + VueUiWorldConfig, 6 + VueUiWorldDataset, 7 + VueUiWorldExpose, 8 + VueUiWorldEvent, 9 + VueUiWorldProps, 10 + CommonAnnotatorSlots, 11 + VueUiMenuIconSlotProps, 12 + VueUiOptionFullscreenSlotProps, 13 + VueUiOptionAnnotatorSlotProps, 14 + VueUiWorldPatternSlotProps, 15 + VueUiWorldSvgSlotProps, 16 + VueUiWatermarkSlotProps, 17 + VueUiWorldLegendItem, 18 + VueUiWorldLegendSlotProps, 19 + VueUiWorldTooltipSlotProps, 20 + } from 'vue-data-ui'; 2 21 3 22 export type { 4 23 VueUiWorldDatapoint, ··· 6 25 VueUiWorldDataset, 7 26 VueUiWorldExpose, 8 27 VueUiWorldEvent, 9 - } from 'vue-data-ui'; 28 + VueUiWorldProps, 29 + CommonAnnotatorSlots, 30 + VueUiMenuIconSlotProps, 31 + VueUiOptionFullscreenSlotProps, 32 + VueUiOptionAnnotatorSlotProps, 33 + VueUiWorldPatternSlotProps, 34 + VueUiWorldSvgSlotProps, 35 + VueUiWatermarkSlotProps, 36 + VueUiWorldLegendItem, 37 + VueUiWorldLegendSlotProps, 38 + VueUiWorldTooltipSlotProps, 39 + }; 40 + 41 + declare const VueUiWorldBase: DefineComponent<VueUiWorldProps>; 10 42 11 - declare const VueUiWorld: DefineComponent< 12 - { 13 - config?: VueUiWorldConfig; 14 - dataset?: VueUiWorldDataset; 15 - }, 16 - VueUiWorldExpose 17 - >; 43 + export const VueUiWorld: typeof VueUiWorldBase & { 44 + new (): VueUiWorldExpose & { 45 + $slots: CommonAnnotatorSlots & { 46 + menuIcon?: (props: VueUiMenuIconSlotProps) => VNodeChild; 47 + optionTooltip?: () => VNodeChild; 48 + optionPdf?: () => VNodeChild; 49 + optionCsv?: () => VNodeChild; 50 + optionImg?: () => VNodeChild; 51 + optionSvg?: () => VNodeChild; 52 + optionTable?: () => VNodeChild; 53 + optionFullscreen?: ( 54 + props: VueUiOptionFullscreenSlotProps, 55 + ) => VNodeChild; 56 + optionAltCopy?: () => VNodeChild; 57 + optionAnnotator?: ( 58 + props: VueUiOptionAnnotatorSlotProps, 59 + ) => VNodeChild; 60 + ['chart-background']?: () => VNodeChild; 61 + pattern?: (props: VueUiWorldPatternSlotProps) => VNodeChild; 62 + svg?: (props: VueUiWorldSvgSlotProps) => VNodeChild; 63 + watermark?: (props: VueUiWatermarkSlotProps) => VNodeChild; 64 + source?: () => VNodeChild; 65 + skeleton?: () => VNodeChild; 66 + legend?: (props: VueUiWorldLegendSlotProps) => VNodeChild; 67 + ['tooltip-before']?: ( 68 + props: VueUiWorldTooltipSlotProps, 69 + ) => VNodeChild; 70 + tooltip?: (props: VueUiWorldTooltipSlotProps) => VNodeChild; 71 + ['tooltip-after']?: ( 72 + props: VueUiWorldTooltipSlotProps, 73 + ) => VNodeChild; 74 + }; 75 + }; 76 + }; 18 77 19 78 export default VueUiWorld; 20 79 export { VueUiWorld };

Configure Feed

Configure Feed