⬅️ Back to Table of Contents

📄 useCycleList

📊 Analysis Summary

Metric	Count
🔧 Functions	6
📦 Imports	9
🟢 Vue Composition API	2
📐 Interfaces	2

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useCycleList/index.ts

📦 Imports

Name	Source
MaybeRef	vue
MaybeRefOrGetter	vue
ShallowRef	vue
WritableComputedRef	vue
toRef	@vueuse/shared
computed	vue
shallowRef	vue
toValue	vue
watch	vue

---

Vue Composition API

Name	Type	Reactive Variables	Composables
computed	computed	none	none
watch	watch	none	none

---

Functions

useCycleList(list: MaybeRefOrGetter<T[]>, options: UseCycleListOptions<T>): UseCycleListReturn<T>

Cycle through a list of items

See: https://vueuse.org/useCycleList

Raw JSDoc

/**
 * Cycle through a list of items
 *
 * @see https://vueuse.org/useCycleList
 */

Calls:

• shallowRef (from vue)
• getInitialValue
• toRef (from @vueuse/shared)
• computed (from vue)
• options.getIndexOf
• targetList.indexOf
• set
• shift
• toValue (from vue)
• watch (from vue)

Code

export function useCycleList<T>(list: MaybeRefOrGetter<T[]>, options?: UseCycleListOptions<T>): UseCycleListReturn<T> {
  const state = shallowRef(getInitialValue()) as ShallowRef<T>
  const listRef = toRef(list)

  const index = computed<number>({
    get() {
      const targetList = listRef.value

      let index = options?.getIndexOf
        ? options.getIndexOf(state.value, targetList)
        : targetList.indexOf(state.value)

      if (index < 0)
        index = options?.fallbackIndex ?? 0

      return index
    },
    set(v) {
      set(v)
    },
  })

  function set(i: number) {
    const targetList = listRef.value
    const length = targetList.length
    const index = (i % length + length) % length
    const value = targetList[index]
    state.value = value
    return value
  }

  function shift(delta = 1) {
    return set(index.value + delta)
  }

  function next(n = 1) {
    return shift(n)
  }

  function prev(n = 1) {
    return shift(-n)
  }

  function getInitialValue() {
    return toValue(options?.initialValue ?? toValue<T[]>(list)[0]) ?? undefined
  }

  watch(listRef, () => set(index.value))

  return {
    state,
    index,
    next,
    prev,
    go: set,
  }
}

Internal helpers

Declared inside another function in this file.

set(i: number): any

Parameters:

• i number

Returns: any

Code

function set(i: number) {
    const targetList = listRef.value
    const length = targetList.length
    const index = (i % length + length) % length
    const value = targetList[index]
    state.value = value
    return value
  }

shift(delta: number): any

Parameters:

• delta number

Returns: any

Calls:

• set

Code

function shift(delta = 1) {
    return set(index.value + delta)
  }

next(n: number): any

Parameters:

• n number

Returns: any

Calls:

• shift

Code

function next(n = 1) {
    return shift(n)
  }

prev(n: number): any

Parameters:

• n number

Returns: any

Calls:

• shift

Code

function prev(n = 1) {
    return shift(-n)
  }

getInitialValue(): any

Returns: any

Calls:

• toValue (from vue)

Code

function getInitialValue() {
    return toValue(options?.initialValue ?? toValue<T[]>(list)[0]) ?? undefined
  }

---

Interfaces

UseCycleListOptions<T>

Interface Code

export interface UseCycleListOptions<T> {
  /**
   * The initial value of the state.
   * A ref can be provided to reuse.
   */
  initialValue?: MaybeRef<T>

  /**
   * The default index when
   */
  fallbackIndex?: number

  /**
   * Custom function to get the index of the current value.
   */
  getIndexOf?: (value: T, list: T[]) => number
}

Properties

Name	Type	Optional	Description
initialValue	MaybeRef<T>	✓	not shown
fallbackIndex	number	✓	not shown
getIndexOf	(value: T, list: T[]) => number	✓	not shown

UseCycleListReturn<T>

Interface Code

export interface UseCycleListReturn<T> {
  state: ShallowRef<T>
  index: WritableComputedRef<number>
  next: (n?: number) => T
  prev: (n?: number) => T
  /**
   * Go to a specific index
   */
  go: (i: number) => T
}

Properties

Name	Type	Optional	Description
state	ShallowRef<T>	✗	not shown
index	WritableComputedRef<number>	✗	not shown
next	(n?: number) => T	✗	not shown
prev	(n?: number) => T	✗	not shown
go	(i: number) => T	✗	not shown

---

Generated by Syntax Scribe