VueUiCursor added new component

Author: graphieros

README.md

@@ -13,7 +13,7 @@
 ![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)
 ![NPM](https://img.shields.io/npm/l/vue-data-ui)
 ![npm](https://img.shields.io/npm/dt/vue-data-ui)
-![Static Badge](https://img.shields.io/badge/components-45-green)
+![Static Badge](https://img.shields.io/badge/components-46-green)
 
 [Interactive documentation](https://vue-data-ui.graphieros.com/)
 
@@ -76,7 +76,8 @@ Available components:
 
 - [VueUiAccordion](https://vue-data-ui.graphieros.com/docs#vue-ui-accordion)
 - [VueUiAnnotator](https://vue-data-ui.graphieros.com/docs#vue-ui-annotator)
-- [VueUiDashboard](https://vue-data-ui.graphieros.com/docs#vue-ui-dashboard)
+- [VueUiAnnotator](https://vue-data-ui.graphieros.com/docs#vue-ui-annotator)
+- [VueUiCursor](https://vue-data-ui.graphieros.com/docs#vue-ui-cursor)
 - [VueUiDigits](https://vue-data-ui.graphieros.com/docs#vue-ui-digits)
 - [VueUiIcon](https://vue-data-ui.graphieros.com/docs#vue-ui-icon)
 - [VueUiKpi](https://vue-data-ui.graphieros.com/docs#vue-ui-kpi)

package-lock.json

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

package.json

@@ -60,6 +60,7 @@ import TreemapTest from "./components/vue-ui-treemap.vue";
 import TableHeatmapTest from "./components/vue-ui-table-heatmap.vue";
 import AccordionTest from "./components/vue-ui-accordion.vue";
 import QuickTest from "./components/vue-ui-quick-chart.vue";
+import TestCursor from "./components/vue-ui-cursor.vue";
 
 const dataset = ref([
   {
@@ -3333,12 +3334,18 @@ const quickConfig = ref({
   xyPeriodLabelsRotation: -20
 })
 
+const cursorConfig = ref({
+  
+})
+
 </script>
 
 <template>
 
+  <VueDataUi component="VueUiCursor" :config="cursorConfig"/>
+
   <div style="padding-left: 48px; padding-right: 48px; width: 100%; max-width: 80%;margin: 0 auto">
-      <div style="padding-top: 48px; padding-bottom: 48px;font-weight: bold; line-height: 20px; display: flex; flex-direction:row; gap:24px; align-items:center">
+      <div id="haha" style="padding-top: 48px; padding-bottom: 48px;font-weight: bold; line-height: 20px; display: flex; flex-direction:row; gap:24px; align-items:center">
           <img src="../../vue-data-ui-logo.png" height="100px"/>
           <!-- <BaseIcon name="chartRelationCircle" :size="118" :strokeWidth="0.8" stroke="#5A5A5A"/> -->
         <div>
@@ -3469,6 +3476,7 @@ const quickConfig = ref({
           <BaseIcon name="lambda" stroke="#42d392" />
           <BaseIcon name="people" stroke="#42d392" />
           <BaseIcon name="copy" stroke="#42d392" />
+          <BaseIcon name="cursor" stroke="#42d392" />
         </div>
       </template>
       </Box>

src/App.vue

@@ -139,7 +139,8 @@ const icons = computed(() => {
         lambda: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" fill="none" d="M 2 5 C 2 2 4 2 4 2 C 10 2 10 18 18 18 M 10 10 L 2 18" stroke-linecap="round" stroke-linejoin="round"/>`,
         people: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth / 2}" fill="none" d="M 5 1 A 1 1 0 0 0 5 9 A 1 1 0 0 0 5 1 M 15 1 A 1 1 0 0 0 15 9 A 1 1 0 0 0 15 1 M 5 11 A 1 1 0 0 0 5 19 A 1 1 0 0 0 5 11 M 15 11 A 1 1 0 0 0 15 19 A 1 1 0 0 0 15 11 M 3 4 L 3 4 M 7 4 L 7 4 M 3 6 C 4 7 6 7 7 6 M 13 4 L 13 4 M 17 4 L 17 4 M 13 6 C 14 7 16 7 17 6 M 3 14 L 3 14 M 7 14 L 7 14 M 3 16 C 4 17 6 17 7 16 M 13 14 L 13 14 M 17 14 L 17 14 M 13 16 C 14 17 16 17 17 16" stroke-linecap="round" stroke-linejoin="round"/>`,
         copy: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" fill="none" d="M 18 16 C 18 17 17 18 16 18 L 8 18 C 7 18 6 17 6 16 L 6 8 C 6 7 7 6 8 6 L 16 6 C 17 6 18 7 18 8 L 18 16 M 6 14 L 4 14 C 3 14 2 13 2 12 L 2 4 C 2 3 3 2 4 2 L 12 2 C 13 2 14 3 14 4 L 14 6" stroke-linecap="round" stroke-linejoin="round"/>`,
-        accordion: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 2 L 18 2 L 16 4 L 18 6 L 16 8 L 18 10 L 16 12 L 18 14 L 16 16 L 18 18 L 2 18 L 4 16 L 2 14 L 4 12 L 2 10 L 4 8 L 2 6 L 4 4 L 2 2"/><path stroke="none" fill="${props.stroke}" style="opacity:0.3" stroke-linecap="round" stroke-linejoin="round" d="M 2 2 L 18 2 L 16 4 L 4 4 Z" /><path stroke="none" fill="${props.stroke}" style="opacity:0.3" stroke-linecap="round" stroke-linejoin="round" d="M 2 6 L 18 6 L 16 8 L 4 8 Z" /><path stroke="none" fill="${props.stroke}" style="opacity:0.3" stroke-linecap="round" stroke-linejoin="round" d="M 2 10 L 18 10 L 16 12 L 4 12 Z" /><path stroke="none" fill="${props.stroke}" style="opacity:0.3" stroke-linecap="round" stroke-linejoin="round" d="M 2 14 L 18 14 L 16 16 L 4 16 Z" />`
+        accordion: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 2 L 18 2 L 16 4 L 18 6 L 16 8 L 18 10 L 16 12 L 18 14 L 16 16 L 18 18 L 2 18 L 4 16 L 2 14 L 4 12 L 2 10 L 4 8 L 2 6 L 4 4 L 2 2"/><path stroke="none" fill="${props.stroke}" style="opacity:0.3" stroke-linecap="round" stroke-linejoin="round" d="M 2 2 L 18 2 L 16 4 L 4 4 Z" /><path stroke="none" fill="${props.stroke}" style="opacity:0.3" stroke-linecap="round" stroke-linejoin="round" d="M 2 6 L 18 6 L 16 8 L 4 8 Z" /><path stroke="none" fill="${props.stroke}" style="opacity:0.3" stroke-linecap="round" stroke-linejoin="round" d="M 2 10 L 18 10 L 16 12 L 4 12 Z" /><path stroke="none" fill="${props.stroke}" style="opacity:0.3" stroke-linecap="round" stroke-linejoin="round" d="M 2 14 L 18 14 L 16 16 L 4 16 Z" />`,
+        cursor: `<path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" fill="none" stroke-linecap="round" stroke-linejoin="round" d="M 6 10 A 1 1 0 0 0 14 10 A 1 1 0 0 0 6 10 M 1 10 L 6 10 M 14 10 L 19 10 M 10 1 L 10 6 M 10 14 L 10 19 M 10 8 L 10 12 M 8 10 L 12 10" />`
     }
 })
 

src/atoms/BaseIcon.vue

@@ -46,6 +46,7 @@ import VueUiXy from "./vue-ui-xy.vue";
 import VueUiTableHeatmap from "./vue-ui-table-heatmap.vue";
 import VueUiAccordion from "./vue-ui-accordion.vue";
 import VueUiQuickChart from "./vue-ui-quick-chart.vue";
+import VueUiCursor from "./vue-ui-cursor.vue";
 
 const props = defineProps({
     component: { type: String },
@@ -54,7 +55,7 @@ const props = defineProps({
 })
 
 const isError = computed(() => {
-    return !["VueUi3dBar", "VueUiAgePyramid", "VueUiAnnotator", "VueUiCandlestick", "VueUiChestnut", "VueUiDashboard", "VueUiDigits", "VueUiDonutEvolution", "VueUiDonut", "VueUiGauge", "VueUiGalaxy", "VueUiHeatmap", "VueUiKpi", "VueUiMiniLoader", "VueUiMolecule", "VueUiMoodRadar", "VueUiNestedDonuts", "VueUiOnion", "VueUiQuadrant", "VueUiRadar", "VueUiRating", "VueUiRelationCircle", "VueUiRings", "VueUiScatter", "VueUiScreenshot", "VueUiSkeleton", "VueUiSmiley", "VueUiSparkbar", "VueUiSparkgauge", "VueUiSparkHistogram", "VueUiSparkline", "VueUiSparkStackbar", "VueUiTableSparkline", "VueUiTable", "VueUiThermometer", "VueUiTiremarks", "VueUiVerticalBar", "VueUiWaffle", "VueUiWheel", "VueUiXy", "VueUiTreemap", "VueUiTableHeatmap", "VueUiAccordion", "VueUiQuickChart"].includes(props.component)
+    return !["VueUi3dBar", "VueUiAgePyramid", "VueUiAnnotator", "VueUiCandlestick", "VueUiChestnut", "VueUiDashboard", "VueUiDigits", "VueUiDonutEvolution", "VueUiDonut", "VueUiGauge", "VueUiGalaxy", "VueUiHeatmap", "VueUiKpi", "VueUiMiniLoader", "VueUiMolecule", "VueUiMoodRadar", "VueUiNestedDonuts", "VueUiOnion", "VueUiQuadrant", "VueUiRadar", "VueUiRating", "VueUiRelationCircle", "VueUiRings", "VueUiScatter", "VueUiScreenshot", "VueUiSkeleton", "VueUiSmiley", "VueUiSparkbar", "VueUiSparkgauge", "VueUiSparkHistogram", "VueUiSparkline", "VueUiSparkStackbar", "VueUiTableSparkline", "VueUiTable", "VueUiThermometer", "VueUiTiremarks", "VueUiVerticalBar", "VueUiWaffle", "VueUiWheel", "VueUiXy", "VueUiTreemap", "VueUiTableHeatmap", "VueUiAccordion", "VueUiQuickChart", "VueUiCursor"].includes(props.component)
 });
 
 const vue_ui_3d_bar = ref(null);
@@ -100,6 +101,7 @@ const vue_ui_wheel = ref(null);
 const vue_ui_xy = ref(null);
 const vue_ui_table_heatmap = ref(null);
 const vue_ui_quick_chart = ref(null);
+const vue_ui_cursor = ref(null);
 
 const emit = defineEmits([
     'selectLegend',
@@ -131,7 +133,7 @@ const recalculateHeight = ref(() => null);
 
 onMounted(() => {
     if (isError.value) {
-        throw new Error(`\n\nVue Data UI exception:\nThe provided component "${props.component}" does not exist. Check the spelling.\n\nAvailable components:\n\n. VueUi3dBar\n. VueUiAccordion\n. VueUiAgePyramid\n. VueUiAnnotator\n. VueUiCandlestick\n. VueUiChestnut\n. VueUiDashboard\n. VueUiDigits\n. VueUiDonutEvolution\n. VueUiDonut\n. VueUiGauge\n. VueUiHeatmap\n. VueUiMiniLoadar\n. VueUiKpi\n. VueUiMolecule\n. VueUiMoodRadar\n. VueUiNestedDonuts\n. VueUiOnion\n. VueUiQuadrant\n. VueUiQuickChart\n. VueUiRadar\n. VueUiRating\n. VueUiRelationCircle\n. VueUiRings\n. VueUiScatter\n. VueUiScreenshot\n. VueUiSkeleton\n. VueUiSmiley\n. VueUiSparkbar\n. VueUiSparkgauge\n. VueUiSparkHistogram\n. VueUiSparkline\n. VueUiSparkStackbar\n. VueUiTableHeatmap\n. VueUiTableSparkline\n. VueUiTable\n. VueUiThermometer\n. VueUiTiremarks\n. VueUiVerticalBar\n. VueUiWaffle\n. VueUiWheel\n. VueUiXy\n\n`)
+        throw new Error(`\n\nVue Data UI exception:\nThe provided component "${props.component}" does not exist. Check the spelling.\n\nAvailable components:\n\n. VueUi3dBar\n. VueUiAccordion\n. VueUiAgePyramid\n. VueUiAnnotator\n. VueUiCandlestick\n. VueUiChestnut\n. VueUiCursor\n. VueUiDashboard\n. VueUiDigits\n. VueUiDonutEvolution\n. VueUiDonut\n. VueUiGauge\n. VueUiHeatmap\n. VueUiMiniLoadar\n. VueUiKpi\n. VueUiMolecule\n. VueUiMoodRadar\n. VueUiNestedDonuts\n. VueUiOnion\n. VueUiQuadrant\n. VueUiQuickChart\n. VueUiRadar\n. VueUiRating\n. VueUiRelationCircle\n. VueUiRings\n. VueUiScatter\n. VueUiScreenshot\n. VueUiSkeleton\n. VueUiSmiley\n. VueUiSparkbar\n. VueUiSparkgauge\n. VueUiSparkHistogram\n. VueUiSparkline\n. VueUiSparkStackbar\n. VueUiTableHeatmap\n. VueUiTableSparkline\n. VueUiTable\n. VueUiThermometer\n. VueUiTiremarks\n. VueUiVerticalBar\n. VueUiWaffle\n. VueUiWheel\n. VueUiXy\n\n`)
     }
 
     if(vue_ui_quick_chart.value) {
@@ -357,6 +359,12 @@ defineExpose({
         The provided component "{{ component }}" does not exist
     </div>
 
+    <VueUiCursor
+        v-if="component === 'VueUiCursor'"
+        :config="config"
+        ref="vue_ui_cursor"
+    />
+
     <VueUiQuickChart 
         v-if="component === 'VueUiQuickChart'" 
         :config="config"