aico-cli 2.1.1 → 2.1.23

package/templates/skills/vueuse-functions/references/useScroll.md

@@ -0,0 +1,238 @@
+---
+category: Sensors
+---
+
+# useScroll
+
+Reactive scroll position and state.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useScroll } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const { x, y, isScrolling, arrivedState, directions } = useScroll(el)
+</script>
+
+<template>
+  <div ref="el" />
+</template>
+```
+
+### With offsets
+
+```ts
+import { useScroll } from '@vueuse/core'
+// ---cut---
+const { x, y, isScrolling, arrivedState, directions } = useScroll(el, {
+  offset: { top: 30, bottom: 30, right: 30, left: 30 },
+})
+```
+
+### Setting scroll position
+
+Set the `x` and `y` values to make the element scroll to that position.
+
+```vue
+<script setup lang="ts">
+import { useScroll } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const { x, y } = useScroll(el)
+</script>
+
+<template>
+  <div ref="el" />
+  <button @click="x += 10">
+    Scroll right 10px
+  </button>
+  <button @click="y += 10">
+    Scroll down 10px
+  </button>
+</template>
+```
+
+### Smooth scrolling
+
+Set `behavior: smooth` to enable smooth scrolling. The `behavior` option defaults to `auto`, which means no smooth scrolling. See the `behavior` option on [`window.scrollTo()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo) for more information.
+
+```ts
+import { useScroll } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const { x, y } = useScroll(el, { behavior: 'smooth' })
+
+// Or as a `ref`:
+const smooth = ref(false)
+const behavior = computed(() => smooth.value ? 'smooth' : 'auto')
+const { x, y } = useScroll(el, { behavior })
+```
+
+### Recalculate scroll state
+
+You can call the `measure()` method to manually update the scroll position and `arrivedState` at any time.
+
+This is useful, for example, after dynamic content changes or when you want to recalculate the scroll state outside of scroll events.
+
+```ts
+import { useScroll } from '@vueuse/core'
+import { nextTick, onMounted, useTemplateRef, watch } from 'vue'
+
+const el = useTemplateRef('el')
+const reactiveValue = shallowRef(false)
+
+const { measure } = useScroll(el)
+
+// In a watcher
+watch(reactiveValue, () => {
+  measure()
+})
+
+// Or inside any function
+function updateScrollState() {
+  // ...some logic
+  nextTick(() => {
+    measure()
+  })
+}
+```
+
+> [!NOTE]
+> it's recommended to call `measure()` inside `nextTick()`, to ensure the DOM is updated first.
+> The scroll state is initialized automatically `onMount`.
+> You only need to call `measure()` manually if you want to recalculate the state after some dynamic changes.
+
+## Directive Usage
+
+```vue
+<script setup lang="ts">
+import type { UseScrollReturn } from '@vueuse/core'
+import { vScroll } from '@vueuse/components'
+
+const data = ref([1, 2, 3, 4, 5, 6])
+
+function onScroll(state: UseScrollReturn) {
+  console.log(state) // {x, y, isScrolling, arrivedState, directions}
+}
+</script>
+
+<template>
+  <div v-scroll="onScroll">
+    <div v-for="item in data" :key="item">
+      {{ item }}
+    </div>
+  </div>
+
+  <!-- with options -->
+  <div v-scroll="[onScroll, { throttle: 10 }]">
+    <div v-for="item in data" :key="item">
+      {{ item }}
+    </div>
+  </div>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseScrollOptions extends ConfigurableWindow {
+  /**
+   * Throttle time for scroll event, it’s disabled by default.
+   *
+   * @default 0
+   */
+  throttle?: number
+  /**
+   * The check time when scrolling ends.
+   * This configuration will be setting to (throttle + idle) when the `throttle` is configured.
+   *
+   * @default 200
+   */
+  idle?: number
+  /**
+   * Offset arrived states by x pixels
+   *
+   */
+  offset?: {
+    left?: number
+    right?: number
+    top?: number
+    bottom?: number
+  }
+  /**
+   * Use MutationObserver to monitor specific DOM changes,
+   * such as attribute modifications, child node additions or removals, or subtree changes.
+   * @default { mutation: boolean }
+   */
+  observe?:
+    | boolean
+    | {
+        mutation?: boolean
+      }
+  /**
+   * Trigger it when scrolling.
+   *
+   */
+  onScroll?: (e: Event) => void
+  /**
+   * Trigger it when scrolling ends.
+   *
+   */
+  onStop?: (e: Event) => void
+  /**
+   * Listener options for scroll event.
+   *
+   * @default {capture: false, passive: true}
+   */
+  eventListenerOptions?: boolean | AddEventListenerOptions
+  /**
+   * Optionally specify a scroll behavior of `auto` (default, not smooth scrolling) or
+   * `smooth` (for smooth scrolling) which takes effect when changing the `x` or `y` refs.
+   *
+   * @default 'auto'
+   */
+  behavior?: MaybeRefOrGetter<ScrollBehavior>
+  /**
+   * On error callback
+   *
+   * Default log error to `console.error`
+   */
+  onError?: (error: unknown) => void
+}
+/**
+ * Reactive scroll.
+ *
+ * @see https://vueuse.org/useScroll
+ * @param element
+ * @param options
+ */
+export declare function useScroll(
+  element: MaybeRefOrGetter<
+    HTMLElement | SVGElement | Window | Document | null | undefined
+  >,
+  options?: UseScrollOptions,
+): {
+  x: WritableComputedRef<number, number>
+  y: WritableComputedRef<number, number>
+  isScrolling: ShallowRef<boolean, boolean>
+  arrivedState: {
+    left: boolean
+    right: boolean
+    top: boolean
+    bottom: boolean
+  }
+  directions: {
+    left: boolean
+    right: boolean
+    top: boolean
+    bottom: boolean
+  }
+  measure(): void
+}
+export type UseScrollReturn = ReturnType<typeof useScroll>
+```

package/templates/skills/vueuse-functions/references/useScrollLock.md

@@ -0,0 +1,66 @@
+---
+category: Sensors
+---
+
+# useScrollLock
+
+Lock scrolling of the element.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useScrollLock } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const isLocked = useScrollLock(el)
+
+isLocked.value = true // lock
+isLocked.value = false // unlock
+</script>
+
+<template>
+  <div ref="el" />
+</template>
+```
+
+## Directive Usage
+
+```vue
+<script setup lang="ts">
+import { vScrollLock } from '@vueuse/components'
+
+const data = ref([1, 2, 3, 4, 5, 6])
+const isLocked = ref(false)
+const toggleLock = useToggle(isLocked)
+</script>
+
+<template>
+  <div v-scroll-lock="isLocked">
+    <div v-for="item in data" :key="item">
+      {{ item }}
+    </div>
+  </div>
+  <button @click="toggleLock()">
+    Toggle lock state
+  </button>
+</template>
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Lock scrolling of the element.
+ *
+ * @see https://vueuse.org/useScrollLock
+ * @param element
+ */
+export declare function useScrollLock(
+  element: MaybeRefOrGetter<
+    HTMLElement | SVGElement | Window | Document | null | undefined
+  >,
+  initialState?: boolean,
+): WritableComputedRef<boolean, boolean>
+```

package/templates/skills/vueuse-functions/references/useSessionStorage.md

@@ -0,0 +1,41 @@
+---
+category: State
+---
+
+# useSessionStorage
+
+Reactive [SessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage).
+
+## Usage
+
+Please refer to `useStorage`.
+
+## Type Declarations
+
+```ts
+export declare function useSessionStorage(
+  key: MaybeRefOrGetter<string>,
+  initialValue: MaybeRefOrGetter<string>,
+  options?: UseStorageOptions<string>,
+): RemovableRef<string>
+export declare function useSessionStorage(
+  key: MaybeRefOrGetter<string>,
+  initialValue: MaybeRefOrGetter<boolean>,
+  options?: UseStorageOptions<boolean>,
+): RemovableRef<boolean>
+export declare function useSessionStorage(
+  key: MaybeRefOrGetter<string>,
+  initialValue: MaybeRefOrGetter<number>,
+  options?: UseStorageOptions<number>,
+): RemovableRef<number>
+export declare function useSessionStorage<T>(
+  key: MaybeRefOrGetter<string>,
+  initialValue: MaybeRefOrGetter<T>,
+  options?: UseStorageOptions<T>,
+): RemovableRef<T>
+export declare function useSessionStorage<T = unknown>(
+  key: MaybeRefOrGetter<string>,
+  initialValue: MaybeRefOrGetter<null>,
+  options?: UseStorageOptions<T>,
+): RemovableRef<T>
+```

package/templates/skills/vueuse-functions/references/useShare.md

@@ -0,0 +1,68 @@
+---
+category: Browser
+---
+
+# useShare
+
+Reactive [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share). The Browser provides features that can share content in text or file.
+
+> The `share` method has to be called following a user gesture like a button click. It can’t simply be called on page load for example. That’s in place to help prevent abuse.
+
+## Usage
+
+```ts
+import { useShare } from '@vueuse/core'
+
+const { share, isSupported } = useShare()
+
+function startShare() {
+  share({
+    title: 'Hello',
+    text: 'Hello my friend!',
+    url: location.href,
+  })
+}
+```
+
+### Passing a source ref
+
+You can pass a `ref` to it, changes from the source ref will be reflected to your sharing options.
+
+```ts {6}
+import { ref } from 'vue'
+
+const shareOptions = ref<ShareOptions>({ text: 'foo' })
+const { share, isSupported } = useShare(shareOptions)
+
+shareOptions.value.text = 'bar'
+
+share()
+```
+
+## Type Declarations
+
+```ts
+export interface UseShareOptions {
+  title?: string
+  files?: File[]
+  text?: string
+  url?: string
+}
+/**
+ * Reactive Web Share API.
+ *
+ * @see https://vueuse.org/useShare
+ * @param shareOptions
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useShare(
+  shareOptions?: MaybeRefOrGetter<UseShareOptions>,
+  options?: ConfigurableNavigator,
+): {
+  isSupported: ComputedRef<boolean>
+  share: (overrideOptions?: MaybeRefOrGetter<UseShareOptions>) => Promise<void>
+}
+export type UseShareReturn = ReturnType<typeof useShare>
+```

package/templates/skills/vueuse-functions/references/useSortable.md

@@ -0,0 +1,177 @@
+---
+category: '@Integrations'
+---
+
+# useSortable
+
+Wrapper for [`sortable`](https://github.com/SortableJS/Sortable).
+
+For more information on what options can be passed, see [`Sortable.options`](https://github.com/SortableJS/Sortable#options) in the `Sortable` documentation.
+
+::: warning
+Currently, `useSortable` only implements drag-and-drop sorting for a single list.
+:::
+
+## Install
+
+```bash
+npm i sortablejs@^1
+```
+
+## Usage
+
+### Use template ref
+
+```vue
+<script setup lang="ts">
+import { useSortable } from '@vueuse/integrations/useSortable'
+import { shallowRef, useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const list = shallowRef([{ id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'c' }])
+
+useSortable(el, list)
+</script>
+
+<template>
+  <div ref="el">
+    <div v-for="item in list" :key="item.id">
+      {{ item.name }}
+    </div>
+  </div>
+</template>
+```
+
+### Use specifies the selector to operate on
+
+```vue
+<script setup lang="ts">
+import { useSortable } from '@vueuse/integrations/useSortable'
+import { shallowRef, useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const list = shallowRef([{ id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'c' }])
+
+const animation = 200
+
+const { option } = useSortable(el, list, {
+  handle: '.handle',
+  // or option set
+  // animation
+})
+
+// You can use the option method to set and get the option of Sortable
+option('animation', animation)
+// option('animation') // 200
+</script>
+
+<template>
+  <div ref="el">
+    <div v-for="item in list" :key="item.id">
+      <span>{{ item.name }}</span>
+      <span class="handle">*</span>
+    </div>
+  </div>
+</template>
+```
+
+### Use a selector to get the root element
+
+```vue
+<script setup lang="ts">
+import { useSortable } from '@vueuse/integrations/useSortable'
+import { shallowRef } from 'vue'
+
+const list = shallowRef([{ id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'c' }])
+
+useSortable('#dv', list)
+</script>
+
+<template>
+  <div id="dv">
+    <div v-for="item in list" :key="item.id">
+      <span>{{ item.name }}</span>
+    </div>
+  </div>
+</template>
+```
+
+### Tips
+
+If you want to handle the `onUpdate` yourself, you can pass in `onUpdate` parameters, and we also exposed a function to move the item position.
+
+```ts
+import { moveArrayElement, useSortable } from '@vueuse/integrations/useSortable'
+
+useSortable(el, list, {
+  onUpdate: (e) => {
+    // do something
+    moveArrayElement(list, e.oldIndex, e.newIndex, e)
+    // nextTick required here as moveArrayElement is executed in a microtask
+    // so we need to wait until the next tick until that is finished.
+    nextTick(() => {
+      /* do something */
+    })
+  }
+})
+```
+
+## Type Declarations
+
+```ts
+export interface UseSortableReturn {
+  /**
+   * start sortable instance
+   */
+  start: () => void
+  /**
+   * destroy sortable instance
+   */
+  stop: () => void
+  /**
+   * Options getter/setter
+   * @param name a Sortable.Options property.
+   * @param value a value.
+   */
+  option: (<K extends keyof Sortable.Options>(
+    name: K,
+    value: Sortable.Options[K],
+  ) => void) &
+    (<K extends keyof Sortable.Options>(name: K) => Sortable.Options[K])
+}
+export type UseSortableOptions = Options & ConfigurableDocument
+export declare function useSortable<T>(
+  selector: string,
+  list: MaybeRef<T[]>,
+  options?: UseSortableOptions,
+): UseSortableReturn
+export declare function useSortable<T>(
+  el: MaybeRefOrGetter<MaybeElement>,
+  list: MaybeRef<T[]>,
+  options?: UseSortableOptions,
+): UseSortableReturn
+/**
+ * Inserts a element into the DOM at a given index.
+ * @param parentElement
+ * @param element
+ * @param {number} index
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L81C1-L94C2
+ */
+export declare function insertNodeAt(
+  parentElement: Element,
+  element: Element,
+  index: number,
+): void
+/**
+ * Removes a node from the DOM.
+ * @param {Node} node
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L96C1-L102C2
+ */
+export declare function removeNode(node: Node): void
+export declare function moveArrayElement<T>(
+  list: MaybeRef<T[]>,
+  from: number,
+  to: number,
+  e?: Sortable.SortableEvent | null,
+): void
+```

package/templates/skills/vueuse-functions/references/useSorted.md

@@ -0,0 +1,90 @@
+---
+category: Array
+---
+
+# useSorted
+
+reactive sort array
+
+## Usage
+
+```ts
+import { useSorted } from '@vueuse/core'
+
+// general sort
+const source = [10, 3, 5, 7, 2, 1, 8, 6, 9, 4]
+const sorted = useSorted(source)
+console.log(sorted.value) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+console.log(source) // [10, 3, 5, 7, 2, 1, 8, 6, 9, 4]
+
+// object sort
+const objArr = [{
+  name: 'John',
+  age: 40,
+}, {
+  name: 'Jane',
+  age: 20,
+}, {
+  name: 'Joe',
+  age: 30,
+}, {
+  name: 'Jenny',
+  age: 22,
+}]
+const objSorted = useSorted(objArr, (a, b) => a.age - b.age)
+```
+
+### dirty mode
+
+dirty mode will change the source array.
+
+```ts
+const source = ref([10, 3, 5, 7, 2, 1, 8, 6, 9, 4])
+const sorted = useSorted(source, (a, b) => a - b, {
+  dirty: true,
+})
+console.log(source)// output: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
+```
+
+## Type Declarations
+
+```ts
+export type UseSortedCompareFn<T = any> = (a: T, b: T) => number
+export type UseSortedFn<T = any> = (
+  arr: T[],
+  compareFn: UseSortedCompareFn<T>,
+) => T[]
+export interface UseSortedOptions<T = any> {
+  /**
+   * sort algorithm
+   */
+  sortFn?: UseSortedFn<T>
+  /**
+   * compare function
+   */
+  compareFn?: UseSortedCompareFn<T>
+  /**
+   * change the value of the source array
+   * @default false
+   */
+  dirty?: boolean
+}
+/**
+ * reactive sort array
+ *
+ * @see https://vueuse.org/useSorted
+ */
+export declare function useSorted<T = any>(
+  source: MaybeRefOrGetter<T[]>,
+  compareFn?: UseSortedCompareFn<T>,
+): Ref<T[]>
+export declare function useSorted<T = any>(
+  source: MaybeRefOrGetter<T[]>,
+  options?: UseSortedOptions<T>,
+): Ref<T[]>
+export declare function useSorted<T = any>(
+  source: MaybeRefOrGetter<T[]>,
+  compareFn?: UseSortedCompareFn<T>,
+  options?: Omit<UseSortedOptions<T>, "compareFn">,
+): Ref<T[]>
+```