docs: update example

Author: codeacme17

example/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
-import { useDark, useToggle } from '@vueuse/core'
+import { useDark, useToggle, useStorage } from '@vueuse/core'
 import { nanoid } from 'nanoid'
 import Demo from './components/Demo.vue'
 import type { IllestWaveformProps } from '../../src/types/waveform'
@@ -52,6 +52,22 @@ const items = reactive<Props[]>([
     url: `${import.meta.env.BASE_URL}audios/loop-9.mp3`,
   },
 ])
+
+const skeleton = useStorage('skeleton', true)
+const interact = useStorage('interact', true)
+const lazy = useStorage('lazy', true)
+
+const toggleInteract = () => {
+  interact.value = !interact.value
+}
+
+const toggleSkeleton = () => {
+  skeleton.value = !skeleton.value
+}
+
+const toggleLazy = () => {
+  lazy.value = !lazy.value
+}
 </script>
 
 <template>
@@ -64,24 +80,50 @@ const items = reactive<Props[]>([
       </span>
     </h1>
 
-    <div class="mb-6">
+    <div class="mb-8 flex">
       <button class="btn" @click="toggleDark()">
-        <SunIcon v-show="!isDark" />
-        <MoonIcon v-show="isDark" />
+        <SunIcon v-show="!isDark" class="w-5" />
+        <MoonIcon v-show="isDark" class="w-5" />
         <div>{{ isDark ? 'dark' : 'light' }}</div>
       </button>
+
+      <button class="btn" @click="toggleInteract()">
+        <span :class="{ 'bg-green-500': interact }" />
+        <div>interact</div>
+      </button>
+
+      <button class="btn" @click="toggleSkeleton()">
+        <span :class="{ 'bg-green-500': skeleton }" />
+        <div>skeleton</div>
+      </button>
+
+      <button class="btn" @click="toggleLazy()">
+        <span :class="{ 'bg-green-500': lazy }" />
+        <div>lazy</div>
+      </button>
     </div>
 
-    <Demo v-for="item in items" :key="item.id" :props="item" />
+    <Demo
+      v-for="item in items"
+      :key="item.id"
+      :url="item.url"
+      :interact="interact"
+      :skeleton="skeleton"
+      :lazy="lazy"
+    />
   </section>
 </template>
 
 <style scoped lang="scss">
 .btn {
-  @apply flex items-center hover:opacity-80;
+  @apply flex items-center hover:opacity-80 mx-3;
 
   div {
     @apply ml-1 mt-1;
   }
+
+  span {
+    @apply w-4 h-4 rounded-full duration-200 transition-[background-color] border-gray-500 dark:border-gray-200 border-[2px];
+  }
 }
 </style>

example/src/components/Demo.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, watchEffect, defineProps } from 'vue'
+import {
+  onMounted,
+  reactive,
+  ref,
+  watchEffect,
+  defineProps,
+  computed,
+} from 'vue'
 import type { Ref } from 'vue'
 import { useDark } from '@vueuse/core'
 import IllestWaveform from '../../../src/components/IllestWaveform.vue'
@@ -9,12 +16,15 @@ import PlayIcon from './icons/Play.vue'
 import PauseIcon from './icons/Pause.vue'
 import ReplayIcon from './icons/Replay.vue'
 
-const { props } = defineProps(['props'])
-
 const darkMode = useDark()
 
+const props = defineProps(['url', 'interact', 'skeleton', 'lazy'])
+
 const waveOptions = reactive<IllestWaveformProps>({
   url: props.url,
+  interact: computed(() => props.interact),
+  skeleton: computed(() => props.skeleton),
+  lazy: computed(() => props.lazy),
 })
 
 watchEffect(() => {

src/components/IllestWaveform.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watchEffect, onUnmounted } from 'vue'
+import { ref, onMounted, watchEffect, onUnmounted, toRefs } from 'vue'
 import WebAudioController from '../modules/WebAudio/Controller'
 import Wave from '../modules/Wave/index'
 import WaveMask from '../modules/Wave/WaveMask'

src/types/waveform.ts

@@ -1,3 +1,5 @@
+import type { Ref } from 'vue'
+
 export type IllestWaveformProps = {
   url: string
   lineWidth?: number
@@ -7,8 +9,8 @@ export type IllestWaveformProps = {
   cursorWidth?: number
   cursorColor?: string
   maskColor?: string
-  lazy?: boolean
-  skeleton?: boolean
+  lazy?: boolean | Ref<boolean>
+  skeleton?: boolean | Ref<boolean>
   skeletonColor?: string
-  interact?: boolean
+  interact?: boolean | Ref<boolean>
 }