feat(useCycleList): allow receiving reactive list

packages/core/useCycleList/demo.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { useCycleList } from '@vueuse/core'
+import { ref } from 'vue'
 
-const list = [
+const list = ref([
   'Dog',
   'Cat',
   'Lizard',
@@ -10,7 +11,7 @@ const list = [
   'Dolphin',
   'Octopus',
   'Seal',
-]
+])
 
 const { state, next, prev } = useCycleList(list)
 </script>

packages/core/useCycleList/index.test.ts

@@ -0,0 +1,74 @@
+import { ref } from 'vue-demi'
+import { useCycleList } from '.'
+
+describe('useCycleList', () => {
+  it('should work with array', () => {
+    const { state, next, prev, index } = useCycleList(['foo', 'bar', 'fooBar'])
+
+    expect(state.value).toBe('foo')
+    expect(index.value).toBe(0)
+
+    next()
+
+    expect(state.value).toBe('bar')
+    expect(index.value).toBe(1)
+
+    prev()
+
+    expect(state.value).toBe('foo')
+    expect(index.value).toBe(0)
+
+    index.value = 2
+
+    expect(state.value).toBe('fooBar')
+    expect(index.value).toBe(2)
+
+    state.value = 'foo'
+
+    expect(state.value).toBe('foo')
+    expect(index.value).toBe(0)
+  })
+
+  it('should work with ref', () => {
+    const list = ref(['foo', 'bar', 'fooBar'])
+
+    const { state, next, prev, index } = useCycleList(list)
+
+    expect(state.value).toBe('foo')
+    expect(index.value).toBe(0)
+
+    next()
+
+    expect(state.value).toBe('bar')
+    expect(index.value).toBe(1)
+
+    prev()
+
+    expect(state.value).toBe('foo')
+    expect(index.value).toBe(0)
+
+    index.value = 2
+
+    expect(state.value).toBe('fooBar')
+    expect(index.value).toBe(2)
+
+    state.value = 'foo'
+
+    expect(state.value).toBe('foo')
+    expect(index.value).toBe(0)
+  })
+
+  describe('when list empty', () => {
+    it('returns the correctly data', () => {
+      const list = ref(['foo', 'bar', 'fooBar'])
+
+      const { state, index } = useCycleList(list)
+
+      list.value = []
+      index.value = 2
+
+      expect(state.value).toBeUndefined()
+      expect(index.value).toBe(0)
+    })
+  })
+})

packages/core/useCycleList/index.ts

@@ -1,5 +1,7 @@
-import { type Ref, computed, shallowRef } from 'vue-demi'
-import { type MaybeRef } from '@vueuse/shared'
+import type { Ref } from 'vue-demi'
+import { computed, shallowRef, watch } from 'vue-demi'
+import { resolveRef, resolveUnref } from '@vueuse/shared'
+import type { MaybeComputedRef, MaybeRef } from '@vueuse/shared'
 
 export interface UseCycleListOptions<T> {
   /**
@@ -24,14 +26,17 @@ export interface UseCycleListOptions<T> {
  *
  * @see https://vueuse.org/useCycleList
  */
-export function useCycleList<T>(list: T[], options?: UseCycleListOptions<T>): UseCycleListReturn<T> {
-  const state = shallowRef(options?.initialValue ?? list[0]) as Ref<T>
+export function useCycleList<T>(list: MaybeComputedRef<T[]>, options?: UseCycleListOptions<T>): UseCycleListReturn<T> {
+  const state = shallowRef(getInitialValue()) as Ref<T>
+  const listRef = resolveRef(list)
 
   const index = computed<number>({
     get() {
+      const targetList = resolveUnref<T[]>(list)
+
       let index = options?.getIndexOf
-        ? options.getIndexOf(state.value, list)
-        : list.indexOf(state.value)
+        ? options.getIndexOf(state.value, targetList)
+        : targetList.indexOf(state.value)
 
       if (index < 0)
         index = options?.fallbackIndex ?? 0
@@ -44,9 +49,10 @@ export function useCycleList<T>(list: T[], options?: UseCycleListOptions<T>): Us
   })
 
   function set(i: number) {
-    const length = list.length
+    const targetList = listRef.value
+    const length = targetList.length
     const index = (i % length + length) % length
-    const value = list[index]
+    const value = targetList[index]
     state.value = value
     return value
   }
@@ -63,6 +69,12 @@ export function useCycleList<T>(list: T[], options?: UseCycleListOptions<T>): Us
     return shift(-n)
   }
 
+  function getInitialValue() {
+    return resolveUnref(options?.initialValue ?? resolveUnref<T[]>(list)[0]) ?? undefined
+  }
+
+  watch(listRef, () => set(index.value))
+
   return {
     state,
     index,