Use uid instead of Math.random

Author: graphieros

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.42",
+  "version": "1.9.43",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

package.json

@@ -3730,7 +3730,7 @@ const moodRadarConfig = ref({
       </template>
       </Box>
 
-      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_mood_radar)">
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_mood_radar)">
         <template #title>
           <BaseIcon name="chartMoodRadar"/>
           VueUiMoodRadar

src/App.vue

@@ -1,14 +1,13 @@
 <script setup>
 import { ref, computed, nextTick } from "vue";
-import { opacity, makeXls, shiftHue } from '../lib';
+import { opacity, makeXls, shiftHue, createUid } from '../lib';
 import pdf from "../pdf";
 import img from "../img";
 import mainConfig from "../default_configs.json";
 import { useNestedProp } from "../useNestedProp";
 import Title from "../atoms/Title.vue";
 import UserOptions from "../atoms/UserOptions.vue";
 import Tooltip from "../atoms/Tooltip.vue";
-import BaseCheckbox from "../atoms/BaseCheckbox.vue";
 
 const props = defineProps({
     config: {
@@ -25,7 +24,7 @@ const props = defineProps({
     },
 });
 
-const uid = ref(`vue-ui-age-pyramid-${Math.random()}`);
+const uid = ref(createUid());
 
 const defaultConfig = ref(mainConfig.vue_ui_age_pyramid);
 

src/components/vue-ui-age-pyramid.vue

@@ -1,14 +1,13 @@
 <script setup>
 import { ref, computed, onMounted, nextTick } from "vue";
-import { canShowValue, closestDecimal, shiftHue, opacity, makeXls } from "../lib";
+import { canShowValue, closestDecimal, shiftHue, opacity, makeXls, createUid } from "../lib";
 import mainConfig from "../default_configs.json";
 import pdf from "../pdf";
 import img from "../img";
 import { useNestedProp } from "../useNestedProp";
 import Title from "../atoms/Title.vue";
 import UserOptions from "../atoms/UserOptions.vue";
 import Tooltip from "../atoms/Tooltip.vue";
-import BaseCheckbox from "../atoms/BaseCheckbox.vue";
 
 const props = defineProps({
     config: {
@@ -25,7 +24,7 @@ const props = defineProps({
     }
 });
 
-const uid = ref(`vue-ui-candlestick-${Math.random()}`);
+const uid = ref(createUid());
 const defaultConfig = ref(mainConfig.vue_ui_candlestick);
 
 const isImaging = ref(false);

src/components/vue-ui-candlestick.vue

@@ -1,12 +1,11 @@
 <script setup>
 import { ref, computed, onMounted, nextTick } from "vue";
-import { calcMarkerOffsetX, calcMarkerOffsetY, calcNutArrowPath, palette, opacity, shiftHue, adaptColorToBackground, makeDonut, convertColorToHex, makeXls } from "../lib";
+import { calcMarkerOffsetX, calcMarkerOffsetY, calcNutArrowPath, palette, opacity, shiftHue, adaptColorToBackground, makeDonut, convertColorToHex, makeXls, createUid } from "../lib";
 import pdf from "../pdf";
 import img from "../img";
 import mainConfig from "../default_configs.json";
 import { useNestedProp } from "../useNestedProp";
 import UserOptions from "../atoms/UserOptions.vue";
-import BaseCheckbox from "../atoms/BaseCheckbox.vue";
 
 const props = defineProps({
     config: {
@@ -23,7 +22,7 @@ const props = defineProps({
     }
 });
 
-const uid = ref(`vue-ui-chestnut-${Math.random()}`);
+const uid = ref(createUid());
 
 const defaultConfig = ref(mainConfig.vue_ui_chestnut);
 

src/components/vue-ui-chestnut.vue

@@ -25,7 +25,7 @@ const props = defineProps({
     },
 });
 
-const uid = ref(`vue-ui-donut-evolution-${Math.random()}`);
+const uid = ref(createUid());
 
 const defaultConfig = ref(mainConfig.vue_ui_donut_evolution);
 

src/components/vue-ui-donut-evolution.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed, nextTick } from "vue";
-import { calcMarkerOffsetX, calcMarkerOffsetY, calcNutArrowPath, makeDonut, palette, convertColorToHex, opacity, makeXls } from '../lib';
+import { calcMarkerOffsetX, calcMarkerOffsetY, calcNutArrowPath, makeDonut, palette, convertColorToHex, opacity, makeXls, createUid } from '../lib';
 import pdf from "../pdf";
 import img from "../img";
 import mainConfig from "../default_configs.json";
@@ -26,7 +26,7 @@ const props = defineProps({
     },
 });
 
-const uid = ref(`vue-ui-donut-${Math.random()}`);
+const uid = ref(createUid());
 
 const defaultConfig = ref(mainConfig.vue_ui_donut);
 

src/components/vue-ui-donut.vue

@@ -1,12 +1,11 @@
 <script setup>
 import { ref, computed, onMounted } from "vue";
-import { palette, rotateMatrix, addVector, matrixTimes, opacity, convertColorToHex } from "../lib.js";
+import { palette, rotateMatrix, addVector, matrixTimes, opacity, convertColorToHex, createUid } from "../lib.js";
 import pdf from "../pdf";
 import img from "../img";
 import mainConfig from "../default_configs.json";
 import { useNestedProp } from "../useNestedProp";
 import UserOptions from "../atoms/UserOptions.vue";
-import BaseCheckbox from "../atoms/BaseCheckbox.vue";
 
 const props = defineProps({
     config:{
@@ -22,7 +21,7 @@ const props = defineProps({
         }
     }
 });
-const uid = ref(`vue-ui-gauge-${Math.random()}`);
+const uid = ref(createUid());
 
 const defaultConfig = ref(mainConfig.vue_ui_gauge);
 

src/components/vue-ui-gauge.vue

@@ -1,14 +1,13 @@
 <script setup>
 import { ref, computed, nextTick } from "vue";
-import { opacity, makeXls } from "../lib";
+import { opacity, makeXls, createUid } from "../lib";
 import mainConfig from "../default_configs.json";
 import pdf from "../pdf";
 import img from "../img";
 import { useNestedProp } from "../useNestedProp";
 import Title from "../atoms/Title.vue";
 import UserOptions from "../atoms/UserOptions.vue";
 import Tooltip from "../atoms/Tooltip.vue";
-import BaseCheckbox from "../atoms/BaseCheckbox.vue";
 
 const props = defineProps({
     config: {
@@ -25,7 +24,7 @@ const props = defineProps({
     }
 });
 
-const uid = ref(`vue-ui-heatmap-${Math.random()}`);
+const uid = ref(createUid());
 
 const defaultConfig = ref(mainConfig.vue_ui_heatmap);