[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
fix(VueUiXyCanvas): add missing annotator slots
graphieros
(Apr 26, 2026, 9:29 AM +0200)
acb163d0
957d3a01
+55
-11
+35
-10
src/atoms/NonSvgPenAndPaper.vue
+35
-10
src/atoms/NonSvgPenAndPaper.vue
···
739
739
}"
740
740
@click="emit('close')"
741
741
>
742
-
<BaseIcon name="close" :stroke="color" />
742
+
<slot name="annotator-action-close">
743
+
<BaseIcon name="close" :stroke="color" />
744
+
</slot>
743
745
</button>
744
746
<button
745
747
data-cy="pen-and-paper-color-picker"
···
755
757
v-model:value="currentColor"
756
758
:backgroundColor="backgroundColor"
757
759
:buttonBorderColor="buttonBorderColor"
758
-
/>
760
+
>
761
+
<template #annotator-action-color="{ color }">
762
+
<slot name="annotator-action-color" v-bind="{ color }" />
763
+
</template>
764
+
</ColorPicker>
759
765
</button>
760
766
<button
761
767
data-cy="pen-and-paper-toggle-text"
···
768
774
cursor: isCursorPointer ? 'pointer' : 'default',
769
775
}"
770
776
>
771
-
<BaseIcon :name="iconMap[mode]" :stroke="color" />
777
+
<slot name="annotator-action-draw" v-bind="{ mode }">
778
+
<BaseIcon :name="iconMap[mode]" :stroke="color" />
779
+
</slot>
772
780
<div
773
781
:style="{
774
782
position: 'absolute',
···
804
812
}"
805
813
@click="deleteLastDraw"
806
814
>
807
-
<BaseIcon name="refresh" :stroke="color" />
815
+
<slot
816
+
name="annotator-action-undo"
817
+
v-bind="{ disabled: !stack.length }"
818
+
>
819
+
<BaseIcon name="refresh" :stroke="color" />
820
+
</slot>
808
821
</button>
822
+
809
823
<button
810
824
data-cy="pen-and-paper-redo"
811
825
:class="{
···
819
833
}"
820
834
@click="redoLastDraw"
821
835
>
822
-
<BaseIcon
823
-
name="refresh"
824
-
:stroke="color"
825
-
style="transform: scaleX(-1)"
826
-
/>
836
+
<slot
837
+
name="annotator-action-redo"
838
+
v-bind="{ disabled: !redoStack.length }"
839
+
>
840
+
<BaseIcon
841
+
name="refresh"
842
+
:stroke="color"
843
+
style="transform: scaleX(-1)"
844
+
/>
845
+
</slot>
827
846
</button>
847
+
828
848
<button
829
849
data-cy="pen-and-paper-reset"
830
850
:class="{
···
839
859
}"
840
860
@click="reset"
841
861
>
842
-
<BaseIcon name="trash" :stroke="color" />
862
+
<slot
863
+
name="annotator-action-delete"
864
+
v-bind="{ disabled: !stack.length }"
865
+
>
866
+
<BaseIcon name="trash" :stroke="color" />
867
+
</slot>
843
868
</button>
844
869
845
870
<input
+20
-1
src/components/vue-ui-xy-canvas.vue
+20
-1
src/components/vue-ui-xy-canvas.vue
···
3735
3735
:active="isAnnotator"
3736
3736
:isCursorPointer="isCursorPointer"
3737
3737
@close="toggleAnnotator"
3738
-
/>
3738
+
>
3739
+
<template #annotator-action-close>
3740
+
<slot name="annotator-action-close" />
3741
+
</template>
3742
+
<template #annotator-action-color="{ color }">
3743
+
<slot name="annotator-action-color" v-bind="{ color }" />
3744
+
</template>
3745
+
<template #annotator-action-draw="{ mode }">
3746
+
<slot name="annotator-action-draw" v-bind="{ mode }" />
3747
+
</template>
3748
+
<template #annotator-action-undo="{ disabled }">
3749
+
<slot name="annotator-action-undo" v-bind="{ disabled }" />
3750
+
</template>
3751
+
<template #annotator-action-redo="{ disabled }">
3752
+
<slot name="annotator-action-redo" v-bind="{ disabled }" />
3753
+
</template>
3754
+
<template #annotator-action-delete="{ disabled }">
3755
+
<slot name="annotator-action-delete" v-bind="{ disabled }" />
3756
+
</template>
3757
+
</NonSvgPenAndPaper>
3739
3758
</div>
3740
3759
</template>
3741
3760