⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

Metric	Count
🔧 Functions	6
📦 Imports	9
📊 Variables & Constants	7
🟢 Vue Composition API	2
📐 Interfaces	2

📚 Table of Contents

• Imports
• Variables & Constants
• 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

---

Variables & Constants

Name	Type	Kind	Value	Exported
state	ShallowRef<T>	const	shallowRef(getInitialValue()) as ShallowRef<T>	✗
targetList	any	const	listRef.value	✗
index	any	let/var	`options?.getIndexOf
? options.getIndexOf(state.value, targetList)
: targetList.indexOf(state.value)`	✗
targetList	any	const	listRef.value	✗
length	any	const	targetList.length	✗
index	number	const	(i % length + length) % length	✗
value	any	const	targetList[index]	✗

---

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>

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,
  }
}

• JSDoc:

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

• Parameters:

• list: MaybeRefOrGetter<T[]>
• options: UseCycleListOptions<T>
• Return Type: UseCycleListReturn<T>
• Calls:
• shallowRef (from vue)
• getInitialValue
• toRef (from @vueuse/shared)
• computed (from vue)
• options.getIndexOf
• targetList.indexOf
• set
• shift
• toValue (from vue)
• watch (from vue)

set(i: number): 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
  }

• Parameters:
• i: number
• Return Type: any

shift(delta: number): any

Code

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

• Parameters:
• delta: number
• Return Type: any
• Calls:
• set

next(n: number): any

Code

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

• Parameters:
• n: number
• Return Type: any
• Calls:
• shift

prev(n: number): any

Code

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

• Parameters:
• n: number
• Return Type: any
• Calls:
• shift

getInitialValue(): any

Code

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

• Return Type: any
• Calls:
• toValue (from vue)

---

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>	✓
fallbackIndex	number	✓
getIndexOf	(value: T, list: T[]) => number	✓

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>	✗
index	WritableComputedRef<number>	✗
next	(n?: number) => T	✗
prev	(n?: number) => T	✗
go	(i: number) => T	✗

---