Show slideNum option (#2)

* implement show slidenum feature

* update readme

* fix readme

* fix readme

README.md

@@ -21,6 +21,20 @@ https://kaakaa.github.io/slidev-rabbit-turtle/1?time=1
 3. Attach url query `?time=10` to presentation url, and access it
    - e.g.: `http://localhost:3030/?time=10`
 
+## Configs
+
+
+```yaml
+---
+...
+addons:
+  - slidev-addon-rabbit
+rabbit:
+  slideNum: true   # Show current/total slide numbers next to a rabbit icon
+...
+---
+```
+
 # License
 
 This repository distributes under [MIT License](./LICENSE)

components/Rabbit.vue

@@ -1,26 +1,43 @@
 <template>
   <div class="rabtle-container" :style="{left: pos + 'px'}">
     <emojione-monotone-rabbit class="icon" />
+    <div
+      class="py-1 px-1 text-xs bg-white bg-opacity-20 rounded-md text-center"
+      :class="[isLatter ? 'float-left' : 'float-right']"
+      :style="{
+        width: tooltipWidth + 'px',
+        display: showSlideNum ? 'block' : 'none'
+      }"
+    >
+      {{props.current}} / {{total}}
+    </div>
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    current: Number
-  },
-  data() {
-    return {
-      left: this.current,
-    }
-  },
-  computed: {
-    pos: function() {
-      const total = this.$slidev.nav.total;
-      const maxWidth = this.$slidev.configs.canvasWidth - 20;
-      return (this.current - 2 )    // "current - 2" because icon is placed at the start position when opening the second page
-        * (maxWidth / (total - 2)); // "total - 2" because first and last page isn't counted
-    }
+<script setup>
+import { computed } from 'vue';
+
+const total = $slidev.nav.total;
+const canvasWidth = $slidev.configs.canvasWidth;
+const tooltipWidth = 60;
+const marginRight = 20; // To display rabbit icon on last page
+
+const showSlideNum = $slidev.configs?.rabbit?.slideNum ?? false;
+
+const props = defineProps({
+  current: Number,
+});
+
+const isLatter = computed(() => props.current > (total / 2));
+
+const pos = computed(() => {
+  if (props.current === 1 || total === 1) {
+    return 0;
   }
-};
+  // Calculate the width of slide
+  const width = canvasWidth - marginRight - (isLatter.value ? tooltipWidth : 0);
+  return (props.current - 1 ) * (width / (total - 1));
+});
+
 </script>
+