index.d.ts 142 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309
  1. import * as _vueuse_shared from '@vueuse/shared';
  2. import { Fn, MaybeRef, MaybeComputedRef, Awaitable, ConfigurableEventFilter, ConfigurableFlush, RemovableRef, EventHookOn, MaybeReadonlyRef, UseIntervalFnOptions, Pausable, UseTimeoutFnOptions, EventHook } from '@vueuse/shared';
  3. export * from '@vueuse/shared';
  4. import * as vue_demi from 'vue-demi';
  5. import { Ref, InjectionKey, ComputedRef, ComponentPublicInstance, Component, UnwrapRef, WatchOptions, UnwrapNestedRefs, WatchSource, ToRefs } from 'vue-demi';
  6. import * as vue from 'vue-demi';
  7. /**
  8. * Handle overlapping async evaluations.
  9. *
  10. * @param cancelCallback The provided callback is invoked when a re-evaluation of the computed value is triggered before the previous one finished
  11. */
  12. declare type AsyncComputedOnCancel = (cancelCallback: Fn) => void;
  13. interface AsyncComputedOptions {
  14. /**
  15. * Should value be evaluated lazily
  16. *
  17. * @default false
  18. */
  19. lazy?: boolean;
  20. /**
  21. * Ref passed to receive the updated of async evaluation
  22. */
  23. evaluating?: Ref<boolean>;
  24. /**
  25. * Callback when error is caught.
  26. */
  27. onError?: (e: unknown) => void;
  28. }
  29. /**
  30. * Create an asynchronous computed dependency.
  31. *
  32. * @see https://vueuse.org/computedAsync
  33. * @param evaluationCallback The promise-returning callback which generates the computed value
  34. * @param initialState The initial state, used until the first evaluation finishes
  35. * @param optionsOrRef Additional options or a ref passed to receive the updates of the async evaluation
  36. */
  37. declare function computedAsync<T>(evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>, initialState?: T, optionsOrRef?: Ref<boolean> | AsyncComputedOptions): Ref<T>;
  38. declare type ComputedInjectGetter<T, K> = (source: T | undefined, ctx?: any) => K;
  39. declare type ComputedInjectGetterWithDefault<T, K> = (source: T, ctx?: any) => K;
  40. declare type ComputedInjectSetter<T> = (v: T) => void;
  41. interface WritableComputedInjectOptions<T, K> {
  42. get: ComputedInjectGetter<T, K>;
  43. set: ComputedInjectSetter<K>;
  44. }
  45. interface WritableComputedInjectOptionsWithDefault<T, K> {
  46. get: ComputedInjectGetterWithDefault<T, K>;
  47. set: ComputedInjectSetter<K>;
  48. }
  49. declare function computedInject<T, K = any>(key: InjectionKey<T> | string, getter: ComputedInjectGetter<T, K>): ComputedRef<K | undefined>;
  50. declare function computedInject<T, K = any>(key: InjectionKey<T> | string, options: WritableComputedInjectOptions<T, K>): ComputedRef<K | undefined>;
  51. declare function computedInject<T, K = any>(key: InjectionKey<T> | string, getter: ComputedInjectGetterWithDefault<T, K>, defaultSource: T, treatDefaultAsFactory?: false): ComputedRef<K>;
  52. declare function computedInject<T, K = any>(key: InjectionKey<T> | string, options: WritableComputedInjectOptionsWithDefault<T, K>, defaultSource: T | (() => T), treatDefaultAsFactory: true): ComputedRef<K>;
  53. declare type UnrefFn<T> = T extends (...args: infer A) => infer R ? (...args: {
  54. [K in keyof A]: MaybeRef<A[K]>;
  55. }) => R : never;
  56. /**
  57. * Make a plain function accepting ref and raw values as arguments.
  58. * Returns the same value the unconverted function returns, with proper typing.
  59. */
  60. declare const createUnrefFn: <T extends Function>(fn: T) => UnrefFn<T>;
  61. declare type VueInstance = ComponentPublicInstance;
  62. declare type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>;
  63. declare type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeComputedRef<T>;
  64. declare type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null;
  65. declare type UnRefElementReturn<T extends MaybeElement = MaybeElement> = T extends VueInstance ? Exclude<MaybeElement, VueInstance> : T | undefined;
  66. /**
  67. * Get the dom element of a ref of element or Vue component instance
  68. *
  69. * @param elRef
  70. */
  71. declare function unrefElement<T extends MaybeElement>(elRef: MaybeComputedElementRef<T>): UnRefElementReturn<T>;
  72. interface ConfigurableWindow {
  73. window?: Window;
  74. }
  75. interface ConfigurableDocument {
  76. document?: Document;
  77. }
  78. interface ConfigurableNavigator {
  79. navigator?: Navigator;
  80. }
  81. interface ConfigurableLocation {
  82. location?: Location;
  83. }
  84. declare const defaultWindow: (Window & typeof globalThis) | undefined;
  85. declare const defaultDocument: Document | undefined;
  86. declare const defaultNavigator: Navigator | undefined;
  87. declare const defaultLocation: Location | undefined;
  88. interface OnClickOutsideOptions extends ConfigurableWindow {
  89. /**
  90. * List of elements that should not trigger the event.
  91. */
  92. ignore?: MaybeElementRef[];
  93. /**
  94. * Use capturing phase for internal event listener.
  95. * @default true
  96. */
  97. capture?: boolean;
  98. /**
  99. * Run handler function if focus moves to an iframe.
  100. * @default false
  101. */
  102. detectIframe?: boolean;
  103. }
  104. declare type OnClickOutsideHandler<T extends {
  105. detectIframe: OnClickOutsideOptions['detectIframe'];
  106. } = {
  107. detectIframe: false;
  108. }> = (evt: T['detectIframe'] extends true ? PointerEvent | FocusEvent : PointerEvent) => void;
  109. /**
  110. * Listen for clicks outside of an element.
  111. *
  112. * @see https://vueuse.org/onClickOutside
  113. * @param target
  114. * @param handler
  115. * @param options
  116. */
  117. declare function onClickOutside<T extends OnClickOutsideOptions>(target: MaybeElementRef, handler: OnClickOutsideHandler<{
  118. detectIframe: T['detectIframe'];
  119. }>, options?: T): (() => void) | undefined;
  120. declare type KeyPredicate = (event: KeyboardEvent) => boolean;
  121. declare type KeyFilter = true | string | string[] | KeyPredicate;
  122. declare type KeyStrokeEventName = 'keydown' | 'keypress' | 'keyup';
  123. interface OnKeyStrokeOptions {
  124. eventName?: KeyStrokeEventName;
  125. target?: MaybeComputedRef<EventTarget>;
  126. passive?: boolean;
  127. }
  128. declare function onKeyStroke(key: KeyFilter, handler: (event: KeyboardEvent) => void, options?: OnKeyStrokeOptions): () => void;
  129. declare function onKeyStroke(handler: (event: KeyboardEvent) => void, options?: OnKeyStrokeOptions): () => void;
  130. /**
  131. * Listen for keyboard keys being stroked.
  132. *
  133. * @see https://vueuse.org/onKeyStroke
  134. */
  135. declare function onKeyStroke(key: KeyFilter, handler: (event: KeyboardEvent) => void, options?: OnKeyStrokeOptions): () => void;
  136. declare function onKeyStroke(handler: (event: KeyboardEvent) => void, options?: OnKeyStrokeOptions): () => void;
  137. /**
  138. * Listen to the keydown event of the given key.
  139. *
  140. * @see https://vueuse.org/onKeyStroke
  141. * @param key
  142. * @param handler
  143. * @param options
  144. */
  145. declare function onKeyDown(key: KeyFilter, handler: (event: KeyboardEvent) => void, options?: Omit<OnKeyStrokeOptions, 'eventName'>): () => void;
  146. /**
  147. * Listen to the keypress event of the given key.
  148. *
  149. * @see https://vueuse.org/onKeyStroke
  150. * @param key
  151. * @param handler
  152. * @param options
  153. */
  154. declare function onKeyPressed(key: KeyFilter, handler: (event: KeyboardEvent) => void, options?: Omit<OnKeyStrokeOptions, 'eventName'>): () => void;
  155. /**
  156. * Listen to the keyup event of the given key.
  157. *
  158. * @see https://vueuse.org/onKeyStroke
  159. * @param key
  160. * @param handler
  161. * @param options
  162. */
  163. declare function onKeyUp(key: KeyFilter, handler: (event: KeyboardEvent) => void, options?: Omit<OnKeyStrokeOptions, 'eventName'>): () => void;
  164. interface OnLongPressOptions {
  165. /**
  166. * Time in ms till `longpress` gets called
  167. *
  168. * @default 500
  169. */
  170. delay?: number;
  171. modifiers?: OnLongPressModifiers;
  172. }
  173. interface OnLongPressModifiers {
  174. stop?: boolean;
  175. once?: boolean;
  176. prevent?: boolean;
  177. capture?: boolean;
  178. self?: boolean;
  179. }
  180. declare function onLongPress(target: MaybeElementRef, handler: (evt: PointerEvent) => void, options?: OnLongPressOptions): void;
  181. /**
  182. * Fires when users start typing on non-editable elements.
  183. *
  184. * @see https://vueuse.org/onStartTyping
  185. * @param callback
  186. * @param options
  187. */
  188. declare function onStartTyping(callback: (event: KeyboardEvent) => void, options?: ConfigurableDocument): void;
  189. /**
  190. * Shorthand for binding ref to template element.
  191. *
  192. * @see https://vueuse.org/templateRef
  193. * @param key
  194. * @param initialValue
  195. */
  196. declare function templateRef<T extends HTMLElement | SVGElement | Component | null>(key: string, initialValue?: T | null): Readonly<Ref<T>>;
  197. /**
  198. * Reactive `document.activeElement`
  199. *
  200. * @see https://vueuse.org/useActiveElement
  201. * @param options
  202. */
  203. declare function useActiveElement<T extends HTMLElement>(options?: ConfigurableWindow): _vueuse_shared.ComputedRefWithControl<T | null | undefined>;
  204. declare type UseAsyncQueueTask<T> = (...args: any[]) => T | Promise<T>;
  205. interface UseAsyncQueueResult<T> {
  206. state: 'pending' | 'fulfilled' | 'rejected';
  207. data: T | null;
  208. }
  209. interface UseAsyncQueueReturn<T> {
  210. activeIndex: Ref<number>;
  211. result: T;
  212. }
  213. interface UseAsyncQueueOptions {
  214. /**
  215. * Interrupt tasks when current task fails.
  216. *
  217. * @default true
  218. */
  219. interrupt?: boolean;
  220. /**
  221. * Trigger it when the tasks fails.
  222. *
  223. */
  224. onError?: () => void;
  225. /**
  226. * Trigger it when the tasks ends.
  227. *
  228. */
  229. onFinished?: () => void;
  230. }
  231. /**
  232. * Asynchronous queue task controller.
  233. *
  234. * @see https://vueuse.org/useAsyncQueue
  235. * @param tasks
  236. * @param options
  237. */
  238. declare function useAsyncQueue<T1>(tasks: [UseAsyncQueueTask<T1>], options?: UseAsyncQueueOptions): UseAsyncQueueReturn<[UseAsyncQueueResult<T1>]>;
  239. declare function useAsyncQueue<T1, T2>(tasks: [UseAsyncQueueTask<T1>, UseAsyncQueueTask<T2>], options?: UseAsyncQueueOptions): UseAsyncQueueReturn<[UseAsyncQueueResult<T1>, UseAsyncQueueResult<T2>]>;
  240. declare function useAsyncQueue<T1, T2, T3>(tasks: [UseAsyncQueueTask<T1>, UseAsyncQueueTask<T2>, UseAsyncQueueTask<T3>], options?: UseAsyncQueueOptions): UseAsyncQueueReturn<[UseAsyncQueueResult<T1>, UseAsyncQueueResult<T2>, UseAsyncQueueResult<T3>]>;
  241. declare function useAsyncQueue<T1, T2, T3, T4>(tasks: [UseAsyncQueueTask<T1>, UseAsyncQueueTask<T2>, UseAsyncQueueTask<T3>, UseAsyncQueueTask<T4>], options?: UseAsyncQueueOptions): UseAsyncQueueReturn<[UseAsyncQueueResult<T1>, UseAsyncQueueResult<T2>, UseAsyncQueueResult<T3>, UseAsyncQueueResult<T4>]>;
  242. declare function useAsyncQueue<T1, T2, T3, T4, T5>(tasks: [UseAsyncQueueTask<T1>, UseAsyncQueueTask<T2>, UseAsyncQueueTask<T3>, UseAsyncQueueTask<T4>, UseAsyncQueueTask<T5>], options?: UseAsyncQueueOptions): UseAsyncQueueReturn<[UseAsyncQueueResult<T1>, UseAsyncQueueResult<T2>, UseAsyncQueueResult<T3>, UseAsyncQueueResult<T4>, UseAsyncQueueResult<T5>]>;
  243. declare function useAsyncQueue<T>(tasks: UseAsyncQueueTask<T>[], options?: UseAsyncQueueOptions): UseAsyncQueueReturn<UseAsyncQueueResult<T>[]>;
  244. interface UseAsyncStateReturn<Data, Shallow extends boolean> {
  245. state: Shallow extends true ? Ref<Data> : Ref<UnwrapRef<Data>>;
  246. isReady: Ref<boolean>;
  247. isLoading: Ref<boolean>;
  248. error: Ref<unknown>;
  249. execute: (delay?: number, ...args: any[]) => Promise<Data>;
  250. }
  251. interface UseAsyncStateOptions<Shallow extends boolean> {
  252. /**
  253. * Delay for executing the promise. In milliseconds.
  254. *
  255. * @default 0
  256. */
  257. delay?: number;
  258. /**
  259. * Execute the promise right after the function is invoked.
  260. * Will apply the delay if any.
  261. *
  262. * When set to false, you will need to execute it manually.
  263. *
  264. * @default true
  265. */
  266. immediate?: boolean;
  267. /**
  268. * Callback when error is caught.
  269. */
  270. onError?: (e: unknown) => void;
  271. /**
  272. * Sets the state to initialState before executing the promise.
  273. *
  274. * This can be useful when calling the execute function more than once (for
  275. * example, to refresh data). When set to false, the current state remains
  276. * unchanged until the promise resolves.
  277. *
  278. * @default true
  279. */
  280. resetOnExecute?: boolean;
  281. /**
  282. * Use shallowRef.
  283. *
  284. * @default true
  285. */
  286. shallow?: Shallow;
  287. /**
  288. *
  289. * An error is thrown when executing the execute function
  290. *
  291. * @default false
  292. */
  293. throwError?: boolean;
  294. }
  295. /**
  296. * Reactive async state. Will not block your setup function and will trigger changes once
  297. * the promise is ready.
  298. *
  299. * @see https://vueuse.org/useAsyncState
  300. * @param promise The promise / async function to be resolved
  301. * @param initialState The initial state, used until the first evaluation finishes
  302. * @param options
  303. */
  304. declare function useAsyncState<Data, Shallow extends boolean = true>(promise: Promise<Data> | ((...args: any[]) => Promise<Data>), initialState: Data, options?: UseAsyncStateOptions<Shallow>): UseAsyncStateReturn<Data, Shallow>;
  305. interface ToDataURLOptions {
  306. /**
  307. * MIME type
  308. */
  309. type?: string | undefined;
  310. /**
  311. * Image quality of jpeg or webp
  312. */
  313. quality?: any;
  314. }
  315. interface UseBase64ObjectOptions<T> {
  316. serializer: (v: T) => string;
  317. }
  318. interface UseBase64Return {
  319. base64: Ref<string>;
  320. promise: Ref<Promise<string>>;
  321. execute: () => Promise<string>;
  322. }
  323. declare function useBase64(target: MaybeComputedRef<string>): UseBase64Return;
  324. declare function useBase64(target: MaybeComputedRef<Blob>): UseBase64Return;
  325. declare function useBase64(target: MaybeComputedRef<ArrayBuffer>): UseBase64Return;
  326. declare function useBase64(target: MaybeComputedRef<HTMLCanvasElement>, options?: ToDataURLOptions): UseBase64Return;
  327. declare function useBase64(target: MaybeComputedRef<HTMLImageElement>, options?: ToDataURLOptions): UseBase64Return;
  328. declare function useBase64<T extends Record<string, unknown>>(target: MaybeComputedRef<T>, options?: UseBase64ObjectOptions<T>): UseBase64Return;
  329. declare function useBase64<T extends Map<string, unknown>>(target: MaybeComputedRef<T>, options?: UseBase64ObjectOptions<T>): UseBase64Return;
  330. declare function useBase64<T extends Set<unknown>>(target: MaybeComputedRef<T>, options?: UseBase64ObjectOptions<T>): UseBase64Return;
  331. declare function useBase64<T>(target: MaybeComputedRef<T[]>, options?: UseBase64ObjectOptions<T[]>): UseBase64Return;
  332. interface BatteryManager extends EventTarget {
  333. charging: boolean;
  334. chargingTime: number;
  335. dischargingTime: number;
  336. level: number;
  337. }
  338. /**
  339. * Reactive Battery Status API.
  340. *
  341. * @see https://vueuse.org/useBattery
  342. * @param options
  343. */
  344. declare function useBattery({ navigator }?: ConfigurableNavigator): {
  345. isSupported: vue_demi.Ref<boolean>;
  346. charging: vue_demi.Ref<boolean>;
  347. chargingTime: vue_demi.Ref<number>;
  348. dischargingTime: vue_demi.Ref<number>;
  349. level: vue_demi.Ref<number>;
  350. };
  351. declare type UseBatteryReturn = ReturnType<typeof useBattery>;
  352. interface UseBluetoothRequestDeviceOptions {
  353. /**
  354. *
  355. * An array of BluetoothScanFilters. This filter consists of an array
  356. * of BluetoothServiceUUIDs, a name parameter, and a namePrefix parameter.
  357. *
  358. */
  359. filters?: BluetoothLEScanFilter[] | undefined;
  360. /**
  361. *
  362. * An array of BluetoothServiceUUIDs.
  363. *
  364. * @see https://developer.mozilla.org/en-US/docs/Web/API/BluetoothRemoteGATTService/uuid
  365. *
  366. */
  367. optionalServices?: BluetoothServiceUUID[] | undefined;
  368. }
  369. interface UseBluetoothOptions extends UseBluetoothRequestDeviceOptions, ConfigurableNavigator {
  370. /**
  371. *
  372. * A boolean value indicating that the requesting script can accept all Bluetooth
  373. * devices. The default is false.
  374. *
  375. * !! This may result in a bunch of unrelated devices being shown
  376. * in the chooser and energy being wasted as there are no filters.
  377. *
  378. *
  379. * Use it with caution.
  380. *
  381. * @default false
  382. *
  383. */
  384. acceptAllDevices?: boolean;
  385. }
  386. declare function useBluetooth(options?: UseBluetoothOptions): UseBluetoothReturn;
  387. interface UseBluetoothReturn {
  388. isSupported: Ref<boolean>;
  389. isConnected: ComputedRef<boolean>;
  390. device: Ref<BluetoothDevice | undefined>;
  391. requestDevice: () => Promise<void>;
  392. server: Ref<BluetoothRemoteGATTServer | undefined>;
  393. error: Ref<unknown | null>;
  394. }
  395. /**
  396. * Breakpoints from Tailwind V2
  397. *
  398. * @see https://tailwindcss.com/docs/breakpoints
  399. */
  400. declare const breakpointsTailwind: {
  401. sm: number;
  402. md: number;
  403. lg: number;
  404. xl: number;
  405. '2xl': number;
  406. };
  407. /**
  408. * Breakpoints from Bootstrap V5
  409. *
  410. * @see https://getbootstrap.com/docs/5.0/layout/breakpoints
  411. */
  412. declare const breakpointsBootstrapV5: {
  413. sm: number;
  414. md: number;
  415. lg: number;
  416. xl: number;
  417. xxl: number;
  418. };
  419. /**
  420. * Breakpoints from Vuetify V2
  421. *
  422. * @see https://vuetifyjs.com/en/features/breakpoints
  423. */
  424. declare const breakpointsVuetify: {
  425. xs: number;
  426. sm: number;
  427. md: number;
  428. lg: number;
  429. };
  430. /**
  431. * Breakpoints from Ant Design
  432. *
  433. * @see https://ant.design/components/layout/#breakpoint-width
  434. */
  435. declare const breakpointsAntDesign: {
  436. xs: number;
  437. sm: number;
  438. md: number;
  439. lg: number;
  440. xl: number;
  441. xxl: number;
  442. };
  443. /**
  444. * Breakpoints from Quasar V2
  445. *
  446. * @see https://quasar.dev/style/breakpoints
  447. */
  448. declare const breakpointsQuasar: {
  449. xs: number;
  450. sm: number;
  451. md: number;
  452. lg: number;
  453. };
  454. /**
  455. * Sematic Breakpoints
  456. */
  457. declare const breakpointsSematic: {
  458. mobileS: number;
  459. mobileM: number;
  460. mobileL: number;
  461. tablet: number;
  462. laptop: number;
  463. laptopL: number;
  464. desktop4K: number;
  465. };
  466. declare type Breakpoints<K extends string = string> = Record<K, number | string>;
  467. /**
  468. * Reactively viewport breakpoints
  469. *
  470. * @see https://vueuse.org/useBreakpoints
  471. * @param options
  472. */
  473. declare function useBreakpoints<K extends string>(breakpoints: Breakpoints<K>, options?: ConfigurableWindow): {
  474. greater(k: K): Ref<boolean>;
  475. greaterOrEqual: (k: K) => Ref<boolean>;
  476. smaller(k: K): Ref<boolean>;
  477. smallerOrEqual(k: K): Ref<boolean>;
  478. between(a: K, b: K): Ref<boolean>;
  479. isGreater(k: K): boolean;
  480. isGreaterOrEqual(k: K): boolean;
  481. isSmaller(k: K): boolean;
  482. isSmallerOrEqual(k: K): boolean;
  483. isInBetween(a: K, b: K): boolean;
  484. } & Record<K, Ref<boolean>>;
  485. declare type UseBreakpointsReturn<K extends string = string> = {
  486. greater: (k: K) => Ref<boolean>;
  487. greaterOrEqual: (k: K) => Ref<boolean>;
  488. smaller(k: K): Ref<boolean>;
  489. smallerOrEqual: (k: K) => Ref<boolean>;
  490. between(a: K, b: K): Ref<boolean>;
  491. isGreater(k: K): boolean;
  492. isGreaterOrEqual(k: K): boolean;
  493. isSmaller(k: K): boolean;
  494. isSmallerOrEqual(k: K): boolean;
  495. isInBetween(a: K, b: K): boolean;
  496. } & Record<K, Ref<boolean>>;
  497. interface UseBroadcastChannelOptions extends ConfigurableWindow {
  498. /**
  499. * The name of the channel.
  500. */
  501. name: string;
  502. }
  503. /**
  504. * Reactive BroadcastChannel
  505. *
  506. * @see https://vueuse.org/useBroadcastChannel
  507. * @see https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel
  508. * @param options
  509. *
  510. */
  511. declare const useBroadcastChannel: <D, P>(options: UseBroadcastChannelOptions) => UseBroadcastChannelReturn<D, P>;
  512. interface UseBroadcastChannelReturn<D, P> {
  513. isSupported: Ref<boolean>;
  514. channel: Ref<BroadcastChannel | undefined>;
  515. data: Ref<D>;
  516. post: (data: P) => void;
  517. close: () => void;
  518. error: Ref<Event | null>;
  519. isClosed: Ref<boolean>;
  520. }
  521. interface BrowserLocationState {
  522. trigger: string;
  523. state?: any;
  524. length?: number;
  525. hash?: string;
  526. host?: string;
  527. hostname?: string;
  528. href?: string;
  529. origin?: string;
  530. pathname?: string;
  531. port?: string;
  532. protocol?: string;
  533. search?: string;
  534. }
  535. /**
  536. * Reactive browser location.
  537. *
  538. * @see https://vueuse.org/useBrowserLocation
  539. * @param options
  540. */
  541. declare function useBrowserLocation({ window }?: ConfigurableWindow): vue_demi.Ref<{
  542. trigger: string;
  543. state?: any;
  544. length?: number | undefined;
  545. hash?: string | undefined;
  546. host?: string | undefined;
  547. hostname?: string | undefined;
  548. href?: string | undefined;
  549. origin?: string | undefined;
  550. pathname?: string | undefined;
  551. port?: string | undefined;
  552. protocol?: string | undefined;
  553. search?: string | undefined;
  554. }>;
  555. declare type UseBrowserLocationReturn = ReturnType<typeof useBrowserLocation>;
  556. declare function useCached<T>(refValue: Ref<T>, comparator?: (a: T, b: T) => boolean, watchOptions?: WatchOptions): Ref<T>;
  557. interface UseClipboardOptions<Source> extends ConfigurableNavigator {
  558. /**
  559. * Enabled reading for clipboard
  560. *
  561. * @default false
  562. */
  563. read?: boolean;
  564. /**
  565. * Copy source
  566. */
  567. source?: Source;
  568. /**
  569. * Milliseconds to reset state of `copied` ref
  570. *
  571. * @default 1500
  572. */
  573. copiedDuring?: number;
  574. }
  575. interface UseClipboardReturn<Optional> {
  576. isSupported: Ref<boolean>;
  577. text: ComputedRef<string>;
  578. copied: ComputedRef<boolean>;
  579. copy: Optional extends true ? (text?: string) => Promise<void> : (text: string) => Promise<void>;
  580. }
  581. /**
  582. * Reactive Clipboard API.
  583. *
  584. * @see https://vueuse.org/useClipboard
  585. * @param options
  586. */
  587. declare function useClipboard(options?: UseClipboardOptions<undefined>): UseClipboardReturn<false>;
  588. declare function useClipboard(options: UseClipboardOptions<MaybeComputedRef<string>>): UseClipboardReturn<true>;
  589. interface UseClonedOptions<T = any> extends WatchOptions {
  590. /**
  591. * Custom clone function.
  592. *
  593. * By default, it use `JSON.parse(JSON.stringify(value))` to clone.
  594. */
  595. clone?: (source: T) => T;
  596. /**
  597. * Manually sync the ref
  598. *
  599. * @default false
  600. */
  601. manual?: boolean;
  602. }
  603. interface UseClonedReturn<T> {
  604. /**
  605. * Cloned ref
  606. */
  607. cloned: ComputedRef<T>;
  608. /**
  609. * Sync cloned data with source manually
  610. */
  611. sync: () => void;
  612. }
  613. declare type CloneFn<F, T = F> = (x: F) => T;
  614. declare function cloneFnJSON<T>(source: T): T;
  615. declare function useCloned<T>(source: MaybeComputedRef<T>, options?: UseClonedOptions): {
  616. cloned: vue_demi.Ref<vue_demi.UnwrapRef<T>>;
  617. sync: () => void;
  618. };
  619. interface StorageLikeAsync {
  620. getItem(key: string): Awaitable<string | null>;
  621. setItem(key: string, value: string): Awaitable<void>;
  622. removeItem(key: string): Awaitable<void>;
  623. }
  624. interface StorageLike {
  625. getItem(key: string): string | null;
  626. setItem(key: string, value: string): void;
  627. removeItem(key: string): void;
  628. }
  629. /**
  630. * @experimental The API is not finalized yet. It might not follow semver.
  631. */
  632. interface SSRHandlersMap {
  633. getDefaultStorage: () => StorageLike | undefined;
  634. getDefaultStorageAsync: () => StorageLikeAsync | undefined;
  635. updateHTMLAttrs: (selector: string, attribute: string, value: string) => void;
  636. }
  637. declare function getSSRHandler<T extends keyof SSRHandlersMap>(key: T, fallback: SSRHandlersMap[T]): SSRHandlersMap[T];
  638. declare function getSSRHandler<T extends keyof SSRHandlersMap>(key: T, fallback: SSRHandlersMap[T] | undefined): SSRHandlersMap[T] | undefined;
  639. declare function setSSRHandler<T extends keyof SSRHandlersMap>(key: T, fn: SSRHandlersMap[T]): void;
  640. interface Serializer<T> {
  641. read(raw: string): T;
  642. write(value: T): string;
  643. }
  644. interface SerializerAsync<T> {
  645. read(raw: string): Awaitable<T>;
  646. write(value: T): Awaitable<string>;
  647. }
  648. declare const StorageSerializers: Record<'boolean' | 'object' | 'number' | 'any' | 'string' | 'map' | 'set' | 'date', Serializer<any>>;
  649. interface UseStorageOptions<T> extends ConfigurableEventFilter, ConfigurableWindow, ConfigurableFlush {
  650. /**
  651. * Watch for deep changes
  652. *
  653. * @default true
  654. */
  655. deep?: boolean;
  656. /**
  657. * Listen to storage changes, useful for multiple tabs application
  658. *
  659. * @default true
  660. */
  661. listenToStorageChanges?: boolean;
  662. /**
  663. * Write the default value to the storage when it does not exist
  664. *
  665. * @default true
  666. */
  667. writeDefaults?: boolean;
  668. /**
  669. * Merge the default value with the value read from the storage.
  670. *
  671. * When setting it to true, it will perform a **shallow merge** for objects.
  672. * You can pass a function to perform custom merge (e.g. deep merge), for example:
  673. *
  674. * @default false
  675. */
  676. mergeDefaults?: boolean | ((storageValue: T, defaults: T) => T);
  677. /**
  678. * Custom data serialization
  679. */
  680. serializer?: Serializer<T>;
  681. /**
  682. * On error callback
  683. *
  684. * Default log error to `console.error`
  685. */
  686. onError?: (error: unknown) => void;
  687. /**
  688. * Use shallow ref as reference
  689. *
  690. * @default false
  691. */
  692. shallow?: boolean;
  693. }
  694. declare function useStorage(key: string, defaults: MaybeComputedRef<string>, storage?: StorageLike, options?: UseStorageOptions<string>): RemovableRef<string>;
  695. declare function useStorage(key: string, defaults: MaybeComputedRef<boolean>, storage?: StorageLike, options?: UseStorageOptions<boolean>): RemovableRef<boolean>;
  696. declare function useStorage(key: string, defaults: MaybeComputedRef<number>, storage?: StorageLike, options?: UseStorageOptions<number>): RemovableRef<number>;
  697. declare function useStorage<T>(key: string, defaults: MaybeComputedRef<T>, storage?: StorageLike, options?: UseStorageOptions<T>): RemovableRef<T>;
  698. declare function useStorage<T = unknown>(key: string, defaults: MaybeComputedRef<null>, storage?: StorageLike, options?: UseStorageOptions<T>): RemovableRef<T>;
  699. declare type BasicColorSchema = 'light' | 'dark' | 'auto';
  700. interface UseColorModeOptions<T extends string = BasicColorSchema> extends UseStorageOptions<T | BasicColorSchema> {
  701. /**
  702. * CSS Selector for the target element applying to
  703. *
  704. * @default 'html'
  705. */
  706. selector?: string;
  707. /**
  708. * HTML attribute applying the target element
  709. *
  710. * @default 'class'
  711. */
  712. attribute?: string;
  713. /**
  714. * The initial color mode
  715. *
  716. * @default 'auto'
  717. */
  718. initialValue?: T | BasicColorSchema;
  719. /**
  720. * Prefix when adding value to the attribute
  721. */
  722. modes?: Partial<Record<T | BasicColorSchema, string>>;
  723. /**
  724. * A custom handler for handle the updates.
  725. * When specified, the default behavior will be overridden.
  726. *
  727. * @default undefined
  728. */
  729. onChanged?: (mode: T | BasicColorSchema, defaultHandler: ((mode: T | BasicColorSchema) => void)) => void;
  730. /**
  731. * Custom storage ref
  732. *
  733. * When provided, `useStorage` will be skipped
  734. */
  735. storageRef?: Ref<T | BasicColorSchema>;
  736. /**
  737. * Key to persist the data into localStorage/sessionStorage.
  738. *
  739. * Pass `null` to disable persistence
  740. *
  741. * @default 'vueuse-color-scheme'
  742. */
  743. storageKey?: string | null;
  744. /**
  745. * Storage object, can be localStorage or sessionStorage
  746. *
  747. * @default localStorage
  748. */
  749. storage?: StorageLike;
  750. /**
  751. * Emit `auto` mode from state
  752. *
  753. * When set to `true`, preferred mode won't be translated into `light` or `dark`.
  754. * This is useful when the fact that `auto` mode was selected needs to be known.
  755. *
  756. * @default undefined
  757. */
  758. emitAuto?: boolean;
  759. }
  760. /**
  761. * Reactive color mode with auto data persistence.
  762. *
  763. * @see https://vueuse.org/useColorMode
  764. * @param options
  765. */
  766. declare function useColorMode<T extends string = BasicColorSchema>(options?: UseColorModeOptions<T>): vue_demi.WritableComputedRef<BasicColorSchema | T>;
  767. declare type UseConfirmDialogRevealResult<C, D> = {
  768. data?: C;
  769. isCanceled: false;
  770. } | {
  771. data?: D;
  772. isCanceled: true;
  773. };
  774. interface UseConfirmDialogReturn<RevealData, ConfirmData, CancelData> {
  775. /**
  776. * Revealing state
  777. */
  778. isRevealed: ComputedRef<boolean>;
  779. /**
  780. * Opens the dialog.
  781. * Create promise and return it. Triggers `onReveal` hook.
  782. */
  783. reveal: (data?: RevealData) => Promise<UseConfirmDialogRevealResult<ConfirmData, CancelData>>;
  784. /**
  785. * Confirms and closes the dialog. Triggers a callback inside `onConfirm` hook.
  786. * Resolves promise from `reveal()` with `data` and `isCanceled` ref with `false` value.
  787. * Can accept any data and to pass it to `onConfirm` hook.
  788. */
  789. confirm: (data?: ConfirmData) => void;
  790. /**
  791. * Cancels and closes the dialog. Triggers a callback inside `onCancel` hook.
  792. * Resolves promise from `reveal()` with `data` and `isCanceled` ref with `true` value.
  793. * Can accept any data and to pass it to `onCancel` hook.
  794. */
  795. cancel: (data?: CancelData) => void;
  796. /**
  797. * Event Hook to be triggered right before dialog creating.
  798. */
  799. onReveal: EventHookOn<RevealData>;
  800. /**
  801. * Event Hook to be called on `confirm()`.
  802. * Gets data object from `confirm` function.
  803. */
  804. onConfirm: EventHookOn<ConfirmData>;
  805. /**
  806. * Event Hook to be called on `cancel()`.
  807. * Gets data object from `cancel` function.
  808. */
  809. onCancel: EventHookOn<CancelData>;
  810. }
  811. /**
  812. * Hooks for creating confirm dialogs. Useful for modal windows, popups and logins.
  813. *
  814. * @see https://vueuse.org/useConfirmDialog/
  815. * @param revealed `boolean` `ref` that handles a modal window
  816. */
  817. declare function useConfirmDialog<RevealData = any, ConfirmData = any, CancelData = any>(revealed?: Ref<boolean>): UseConfirmDialogReturn<RevealData, ConfirmData, CancelData>;
  818. interface UseCssVarOptions extends ConfigurableWindow {
  819. initialValue?: string;
  820. }
  821. /**
  822. * Manipulate CSS variables.
  823. *
  824. * @see https://vueuse.org/useCssVar
  825. * @param prop
  826. * @param target
  827. * @param initialValue
  828. * @param options
  829. */
  830. declare function useCssVar(prop: MaybeComputedRef<string>, target?: MaybeElementRef, { window, initialValue }?: UseCssVarOptions): vue_demi.Ref<string>;
  831. declare function useCurrentElement<T extends Element = Element>(): _vueuse_shared.ComputedRefWithControl<T>;
  832. interface UseCycleListOptions<T> {
  833. /**
  834. * The initial value of the state.
  835. * A ref can be provided to reuse.
  836. */
  837. initialValue?: MaybeRef<T>;
  838. /**
  839. * The default index when
  840. */
  841. fallbackIndex?: number;
  842. /**
  843. * Custom function to get the index of the current value.
  844. */
  845. getIndexOf?: (value: T, list: T[]) => number;
  846. }
  847. /**
  848. * Cycle through a list of items
  849. *
  850. * @see https://vueuse.org/useCycleList
  851. */
  852. declare function useCycleList<T>(list: T[], options?: UseCycleListOptions<T>): UseCycleListReturn<T>;
  853. interface UseCycleListReturn<T> {
  854. state: Ref<T>;
  855. index: Ref<number>;
  856. next: (n?: number) => T;
  857. prev: (n?: number) => T;
  858. }
  859. interface UseDarkOptions extends Omit<UseColorModeOptions<BasicColorSchema>, 'modes' | 'onChanged'> {
  860. /**
  861. * Value applying to the target element when isDark=true
  862. *
  863. * @default 'dark'
  864. */
  865. valueDark?: string;
  866. /**
  867. * Value applying to the target element when isDark=false
  868. *
  869. * @default ''
  870. */
  871. valueLight?: string;
  872. /**
  873. * A custom handler for handle the updates.
  874. * When specified, the default behavior will be overridden.
  875. *
  876. * @default undefined
  877. */
  878. onChanged?: (isDark: boolean) => void;
  879. }
  880. /**
  881. * Reactive dark mode with auto data persistence.
  882. *
  883. * @see https://vueuse.org/useDark
  884. * @param options
  885. */
  886. declare function useDark(options?: UseDarkOptions): vue_demi.WritableComputedRef<boolean>;
  887. interface UseRefHistoryRecord<T> {
  888. snapshot: T;
  889. timestamp: number;
  890. }
  891. interface UseManualRefHistoryOptions<Raw, Serialized = Raw> {
  892. /**
  893. * Maximum number of history to be kept. Default to unlimited.
  894. */
  895. capacity?: number;
  896. /**
  897. * Clone when taking a snapshot, shortcut for dump: JSON.parse(JSON.stringify(value)).
  898. * Default to false
  899. *
  900. * @default false
  901. */
  902. clone?: boolean | CloneFn<Raw>;
  903. /**
  904. * Serialize data into the history
  905. */
  906. dump?: (v: Raw) => Serialized;
  907. /**
  908. * Deserialize data from the history
  909. */
  910. parse?: (v: Serialized) => Raw;
  911. /**
  912. * Deserialize data from the history
  913. */
  914. setSource?: (source: Ref<Raw>, v: Raw) => void;
  915. }
  916. interface UseManualRefHistoryReturn<Raw, Serialized> {
  917. /**
  918. * Bypassed tracking ref from the argument
  919. */
  920. source: Ref<Raw>;
  921. /**
  922. * An array of history records for undo, newest comes to first
  923. */
  924. history: Ref<UseRefHistoryRecord<Serialized>[]>;
  925. /**
  926. * Last history point, source can be different if paused
  927. */
  928. last: Ref<UseRefHistoryRecord<Serialized>>;
  929. /**
  930. * Same as {@link UseManualRefHistoryReturn.history | history}
  931. */
  932. undoStack: Ref<UseRefHistoryRecord<Serialized>[]>;
  933. /**
  934. * Records array for redo
  935. */
  936. redoStack: Ref<UseRefHistoryRecord<Serialized>[]>;
  937. /**
  938. * A ref representing if undo is possible (non empty undoStack)
  939. */
  940. canUndo: Ref<boolean>;
  941. /**
  942. * A ref representing if redo is possible (non empty redoStack)
  943. */
  944. canRedo: Ref<boolean>;
  945. /**
  946. * Undo changes
  947. */
  948. undo: () => void;
  949. /**
  950. * Redo changes
  951. */
  952. redo: () => void;
  953. /**
  954. * Clear all the history
  955. */
  956. clear: () => void;
  957. /**
  958. * Create new a new history record
  959. */
  960. commit: () => void;
  961. /**
  962. * Reset ref's value with latest history
  963. */
  964. reset: () => void;
  965. }
  966. /**
  967. * Track the change history of a ref, also provides undo and redo functionality.
  968. *
  969. * @see https://vueuse.org/useManualRefHistory
  970. * @param source
  971. * @param options
  972. */
  973. declare function useManualRefHistory<Raw, Serialized = Raw>(source: Ref<Raw>, options?: UseManualRefHistoryOptions<Raw, Serialized>): UseManualRefHistoryReturn<Raw, Serialized>;
  974. interface UseRefHistoryOptions<Raw, Serialized = Raw> extends ConfigurableEventFilter {
  975. /**
  976. * Watch for deep changes, default to false
  977. *
  978. * When set to true, it will also create clones for values store in the history
  979. *
  980. * @default false
  981. */
  982. deep?: boolean;
  983. /**
  984. * The flush option allows for greater control over the timing of a history point, default to 'pre'
  985. *
  986. * Possible values: 'pre', 'post', 'sync'
  987. * It works in the same way as the flush option in watch and watch effect in vue reactivity
  988. *
  989. * @default 'pre'
  990. */
  991. flush?: 'pre' | 'post' | 'sync';
  992. /**
  993. * Maximum number of history to be kept. Default to unlimited.
  994. */
  995. capacity?: number;
  996. /**
  997. * Clone when taking a snapshot, shortcut for dump: JSON.parse(JSON.stringify(value)).
  998. * Default to false
  999. *
  1000. * @default false
  1001. */
  1002. clone?: boolean | CloneFn<Raw>;
  1003. /**
  1004. * Serialize data into the history
  1005. */
  1006. dump?: (v: Raw) => Serialized;
  1007. /**
  1008. * Deserialize data from the history
  1009. */
  1010. parse?: (v: Serialized) => Raw;
  1011. }
  1012. interface UseRefHistoryReturn<Raw, Serialized> extends UseManualRefHistoryReturn<Raw, Serialized> {
  1013. /**
  1014. * A ref representing if the tracking is enabled
  1015. */
  1016. isTracking: Ref<boolean>;
  1017. /**
  1018. * Pause change tracking
  1019. */
  1020. pause(): void;
  1021. /**
  1022. * Resume change tracking
  1023. *
  1024. * @param [commit] if true, a history record will be create after resuming
  1025. */
  1026. resume(commit?: boolean): void;
  1027. /**
  1028. * A sugar for auto pause and auto resuming within a function scope
  1029. *
  1030. * @param fn
  1031. */
  1032. batch(fn: (cancel: Fn) => void): void;
  1033. /**
  1034. * Clear the data and stop the watch
  1035. */
  1036. dispose(): void;
  1037. }
  1038. /**
  1039. * Track the change history of a ref, also provides undo and redo functionality.
  1040. *
  1041. * @see https://vueuse.org/useRefHistory
  1042. * @param source
  1043. * @param options
  1044. */
  1045. declare function useRefHistory<Raw, Serialized = Raw>(source: Ref<Raw>, options?: UseRefHistoryOptions<Raw, Serialized>): UseRefHistoryReturn<Raw, Serialized>;
  1046. /**
  1047. * Shorthand for [useRefHistory](https://vueuse.org/useRefHistory) with debounce filter.
  1048. *
  1049. * @see https://vueuse.org/useDebouncedRefHistory
  1050. * @param source
  1051. * @param options
  1052. */
  1053. declare function useDebouncedRefHistory<Raw, Serialized = Raw>(source: Ref<Raw>, options?: Omit<UseRefHistoryOptions<Raw, Serialized>, 'eventFilter'> & {
  1054. debounce?: MaybeComputedRef<number>;
  1055. }): UseRefHistoryReturn<Raw, Serialized>;
  1056. interface DeviceMotionOptions extends ConfigurableWindow, ConfigurableEventFilter {
  1057. }
  1058. /**
  1059. * Reactive DeviceMotionEvent.
  1060. *
  1061. * @see https://vueuse.org/useDeviceMotion
  1062. * @param options
  1063. */
  1064. declare function useDeviceMotion(options?: DeviceMotionOptions): {
  1065. acceleration: Ref<DeviceMotionEventAcceleration | null>;
  1066. accelerationIncludingGravity: Ref<DeviceMotionEventAcceleration | null>;
  1067. rotationRate: Ref<DeviceMotionEventRotationRate | null>;
  1068. interval: Ref<number>;
  1069. };
  1070. declare type UseDeviceMotionReturn = ReturnType<typeof useDeviceMotion>;
  1071. /**
  1072. * Reactive DeviceOrientationEvent.
  1073. *
  1074. * @see https://vueuse.org/useDeviceOrientation
  1075. * @param options
  1076. */
  1077. declare function useDeviceOrientation(options?: ConfigurableWindow): {
  1078. isSupported: Ref<boolean>;
  1079. isAbsolute: Ref<boolean>;
  1080. alpha: Ref<number | null>;
  1081. beta: Ref<number | null>;
  1082. gamma: Ref<number | null>;
  1083. };
  1084. declare type UseDeviceOrientationReturn = ReturnType<typeof useDeviceOrientation>;
  1085. /**
  1086. * Reactively track `window.devicePixelRatio`.
  1087. *
  1088. * @see https://vueuse.org/useDevicePixelRatio
  1089. * @param options
  1090. */
  1091. declare function useDevicePixelRatio({ window, }?: ConfigurableWindow): {
  1092. pixelRatio: vue_demi.Ref<number>;
  1093. };
  1094. declare type UseDevicePixelRatioReturn = ReturnType<typeof useDevicePixelRatio>;
  1095. interface UseDevicesListOptions extends ConfigurableNavigator {
  1096. onUpdated?: (devices: MediaDeviceInfo[]) => void;
  1097. /**
  1098. * Request for permissions immediately if it's not granted,
  1099. * otherwise label and deviceIds could be empty
  1100. *
  1101. * @default false
  1102. */
  1103. requestPermissions?: boolean;
  1104. /**
  1105. * Request for types of media permissions
  1106. *
  1107. * @default { audio: true, video: true }
  1108. */
  1109. constraints?: MediaStreamConstraints;
  1110. }
  1111. interface UseDevicesListReturn {
  1112. /**
  1113. * All devices
  1114. */
  1115. devices: Ref<MediaDeviceInfo[]>;
  1116. videoInputs: ComputedRef<MediaDeviceInfo[]>;
  1117. audioInputs: ComputedRef<MediaDeviceInfo[]>;
  1118. audioOutputs: ComputedRef<MediaDeviceInfo[]>;
  1119. permissionGranted: Ref<boolean>;
  1120. ensurePermissions: () => Promise<boolean>;
  1121. isSupported: Ref<boolean>;
  1122. }
  1123. /**
  1124. * Reactive `enumerateDevices` listing available input/output devices
  1125. *
  1126. * @see https://vueuse.org/useDevicesList
  1127. * @param options
  1128. */
  1129. declare function useDevicesList(options?: UseDevicesListOptions): UseDevicesListReturn;
  1130. interface UseDisplayMediaOptions extends ConfigurableNavigator {
  1131. /**
  1132. * If the stream is enabled
  1133. * @default false
  1134. */
  1135. enabled?: MaybeRef<boolean>;
  1136. /**
  1137. * If the stream video media constraints
  1138. */
  1139. video?: boolean | MediaTrackConstraints | undefined;
  1140. /**
  1141. * If the stream audio media constraints
  1142. */
  1143. audio?: boolean | MediaTrackConstraints | undefined;
  1144. }
  1145. /**
  1146. * Reactive `mediaDevices.getDisplayMedia` streaming
  1147. *
  1148. * @see https://vueuse.org/useDisplayMedia
  1149. * @param options
  1150. */
  1151. declare function useDisplayMedia(options?: UseDisplayMediaOptions): {
  1152. isSupported: Ref<boolean>;
  1153. stream: Ref<MediaStream | undefined>;
  1154. start: () => Promise<MediaStream | undefined>;
  1155. stop: () => void;
  1156. enabled: Ref<boolean>;
  1157. };
  1158. declare type UseDisplayMediaReturn = ReturnType<typeof useDisplayMedia>;
  1159. /**
  1160. * Reactively track `document.visibilityState`.
  1161. *
  1162. * @see https://vueuse.org/useDocumentVisibility
  1163. * @param options
  1164. */
  1165. declare function useDocumentVisibility({ document }?: ConfigurableDocument): Ref<DocumentVisibilityState>;
  1166. interface Position {
  1167. x: number;
  1168. y: number;
  1169. }
  1170. interface RenderableComponent {
  1171. /**
  1172. * The element that the component should be rendered as
  1173. *
  1174. * @default 'div'
  1175. */
  1176. as?: Object | string;
  1177. }
  1178. declare type PointerType = 'mouse' | 'touch' | 'pen';
  1179. interface UseDraggableOptions {
  1180. /**
  1181. * Only start the dragging when click on the element directly
  1182. *
  1183. * @default false
  1184. */
  1185. exact?: MaybeComputedRef<boolean>;
  1186. /**
  1187. * Prevent events defaults
  1188. *
  1189. * @default false
  1190. */
  1191. preventDefault?: MaybeComputedRef<boolean>;
  1192. /**
  1193. * Prevent events propagation
  1194. *
  1195. * @default false
  1196. */
  1197. stopPropagation?: MaybeComputedRef<boolean>;
  1198. /**
  1199. * Element to attach `pointermove` and `pointerup` events to.
  1200. *
  1201. * @default window
  1202. */
  1203. draggingElement?: MaybeComputedRef<HTMLElement | SVGElement | Window | Document | null | undefined>;
  1204. /**
  1205. * Handle that triggers the drag event
  1206. *
  1207. * @default target
  1208. */
  1209. handle?: MaybeComputedRef<HTMLElement | SVGElement | null | undefined>;
  1210. /**
  1211. * Pointer types that listen to.
  1212. *
  1213. * @default ['mouse', 'touch', 'pen']
  1214. */
  1215. pointerTypes?: PointerType[];
  1216. /**
  1217. * Initial position of the element.
  1218. *
  1219. * @default { x: 0, y: 0 }
  1220. */
  1221. initialValue?: MaybeComputedRef<Position>;
  1222. /**
  1223. * Callback when the dragging starts. Return `false` to prevent dragging.
  1224. */
  1225. onStart?: (position: Position, event: PointerEvent) => void | false;
  1226. /**
  1227. * Callback during dragging.
  1228. */
  1229. onMove?: (position: Position, event: PointerEvent) => void;
  1230. /**
  1231. * Callback when dragging end.
  1232. */
  1233. onEnd?: (position: Position, event: PointerEvent) => void;
  1234. }
  1235. /**
  1236. * Make elements draggable.
  1237. *
  1238. * @see https://vueuse.org/useDraggable
  1239. * @param target
  1240. * @param options
  1241. */
  1242. declare function useDraggable(target: MaybeComputedRef<HTMLElement | SVGElement | null | undefined>, options?: UseDraggableOptions): {
  1243. position: vue_demi.Ref<{
  1244. x: number;
  1245. y: number;
  1246. }>;
  1247. isDragging: vue_demi.ComputedRef<boolean>;
  1248. style: vue_demi.ComputedRef<string>;
  1249. x: vue_demi.Ref<number>;
  1250. y: vue_demi.Ref<number>;
  1251. };
  1252. declare type UseDraggableReturn = ReturnType<typeof useDraggable>;
  1253. interface UseDropZoneReturn {
  1254. isOverDropZone: Ref<boolean>;
  1255. }
  1256. declare function useDropZone(target: MaybeComputedRef<HTMLElement | null | undefined>, onDrop?: (files: File[] | null) => void): UseDropZoneReturn;
  1257. interface UseElementBoundingOptions {
  1258. /**
  1259. * Reset values to 0 on component unmounted
  1260. *
  1261. * @default true
  1262. */
  1263. reset?: boolean;
  1264. /**
  1265. * Listen to window resize event
  1266. *
  1267. * @default true
  1268. */
  1269. windowResize?: boolean;
  1270. /**
  1271. * Listen to window scroll event
  1272. *
  1273. * @default true
  1274. */
  1275. windowScroll?: boolean;
  1276. /**
  1277. * Immediately call update on component mounted
  1278. *
  1279. * @default true
  1280. */
  1281. immediate?: boolean;
  1282. }
  1283. /**
  1284. * Reactive bounding box of an HTML element.
  1285. *
  1286. * @see https://vueuse.org/useElementBounding
  1287. * @param target
  1288. */
  1289. declare function useElementBounding(target: MaybeComputedElementRef, options?: UseElementBoundingOptions): {
  1290. height: vue_demi.Ref<number>;
  1291. bottom: vue_demi.Ref<number>;
  1292. left: vue_demi.Ref<number>;
  1293. right: vue_demi.Ref<number>;
  1294. top: vue_demi.Ref<number>;
  1295. width: vue_demi.Ref<number>;
  1296. x: vue_demi.Ref<number>;
  1297. y: vue_demi.Ref<number>;
  1298. update: () => void;
  1299. };
  1300. declare type UseElementBoundingReturn = ReturnType<typeof useElementBounding>;
  1301. interface UseElementByPointOptions {
  1302. x: MaybeComputedRef<number>;
  1303. y: MaybeComputedRef<number>;
  1304. }
  1305. /**
  1306. * Reactive element by point.
  1307. *
  1308. * @see https://vueuse.org/useElementByPoint
  1309. * @param options - UseElementByPointOptions
  1310. */
  1311. declare function useElementByPoint(options: UseElementByPointOptions): {
  1312. isActive: vue_demi.Ref<boolean>;
  1313. pause: _vueuse_shared.Fn;
  1314. resume: _vueuse_shared.Fn;
  1315. element: vue_demi.Ref<HTMLElement | null>;
  1316. };
  1317. declare type UseElementByPointReturn = ReturnType<typeof useElementByPoint>;
  1318. declare function useElementHover(el: MaybeComputedRef<EventTarget | null | undefined>): Ref<boolean>;
  1319. interface ResizeObserverSize {
  1320. readonly inlineSize: number;
  1321. readonly blockSize: number;
  1322. }
  1323. interface ResizeObserverEntry {
  1324. readonly target: Element;
  1325. readonly contentRect: DOMRectReadOnly;
  1326. readonly borderBoxSize?: ReadonlyArray<ResizeObserverSize>;
  1327. readonly contentBoxSize?: ReadonlyArray<ResizeObserverSize>;
  1328. readonly devicePixelContentBoxSize?: ReadonlyArray<ResizeObserverSize>;
  1329. }
  1330. declare type ResizeObserverCallback = (entries: ReadonlyArray<ResizeObserverEntry>, observer: ResizeObserver) => void;
  1331. interface UseResizeObserverOptions extends ConfigurableWindow {
  1332. /**
  1333. * Sets which box model the observer will observe changes to. Possible values
  1334. * are `content-box` (the default), `border-box` and `device-pixel-content-box`.
  1335. *
  1336. * @default 'content-box'
  1337. */
  1338. box?: ResizeObserverBoxOptions;
  1339. }
  1340. declare class ResizeObserver {
  1341. constructor(callback: ResizeObserverCallback);
  1342. disconnect(): void;
  1343. observe(target: Element, options?: UseResizeObserverOptions): void;
  1344. unobserve(target: Element): void;
  1345. }
  1346. /**
  1347. * Reports changes to the dimensions of an Element's content or the border-box
  1348. *
  1349. * @see https://vueuse.org/useResizeObserver
  1350. * @param target
  1351. * @param callback
  1352. * @param options
  1353. */
  1354. declare function useResizeObserver(target: MaybeComputedElementRef, callback: ResizeObserverCallback, options?: UseResizeObserverOptions): {
  1355. isSupported: vue_demi.Ref<boolean>;
  1356. stop: () => void;
  1357. };
  1358. declare type UseResizeObserverReturn = ReturnType<typeof useResizeObserver>;
  1359. interface ElementSize {
  1360. width: number;
  1361. height: number;
  1362. }
  1363. /**
  1364. * Reactive size of an HTML element.
  1365. *
  1366. * @see https://vueuse.org/useElementSize
  1367. * @param target
  1368. * @param callback
  1369. * @param options
  1370. */
  1371. declare function useElementSize(target: MaybeComputedElementRef, initialSize?: ElementSize, options?: UseResizeObserverOptions): {
  1372. width: vue_demi.Ref<number>;
  1373. height: vue_demi.Ref<number>;
  1374. };
  1375. declare type UseElementSizeReturn = ReturnType<typeof useElementSize>;
  1376. interface UseElementVisibilityOptions extends ConfigurableWindow {
  1377. scrollTarget?: MaybeComputedRef<HTMLElement | undefined | null>;
  1378. }
  1379. /**
  1380. * Tracks the visibility of an element within the viewport.
  1381. *
  1382. * @see https://vueuse.org/useElementVisibility
  1383. * @param element
  1384. * @param options
  1385. */
  1386. declare function useElementVisibility(element: MaybeComputedElementRef, { window, scrollTarget }?: UseElementVisibilityOptions): vue_demi.Ref<boolean>;
  1387. declare type EventBusListener<T = unknown, P = any> = (event: T, payload?: P) => void;
  1388. declare type EventBusEvents<T, P = any> = EventBusListener<T, P>[];
  1389. interface EventBusKey<T> extends Symbol {
  1390. }
  1391. declare type EventBusIdentifier<T = unknown> = EventBusKey<T> | string | number;
  1392. interface UseEventBusReturn<T, P> {
  1393. /**
  1394. * Subscribe to an event. When calling emit, the listeners will execute.
  1395. * @param listener watch listener.
  1396. * @returns a stop function to remove the current callback.
  1397. */
  1398. on: (listener: EventBusListener<T, P>) => Fn;
  1399. /**
  1400. * Similar to `on`, but only fires once
  1401. * @param listener watch listener.
  1402. * @returns a stop function to remove the current callback.
  1403. */
  1404. once: (listener: EventBusListener<T, P>) => Fn;
  1405. /**
  1406. * Emit an event, the corresponding event listeners will execute.
  1407. * @param event data sent.
  1408. */
  1409. emit: (event?: T, payload?: P) => void;
  1410. /**
  1411. * Remove the corresponding listener.
  1412. * @param listener watch listener.
  1413. */
  1414. off: (listener: EventBusListener<T>) => void;
  1415. /**
  1416. * Clear all events
  1417. */
  1418. reset: () => void;
  1419. }
  1420. declare function useEventBus<T = unknown, P = any>(key: EventBusIdentifier<T>): UseEventBusReturn<T, P>;
  1421. interface InferEventTarget<Events> {
  1422. addEventListener(event: Events, fn?: any, options?: any): any;
  1423. removeEventListener(event: Events, fn?: any, options?: any): any;
  1424. }
  1425. declare type WindowEventName = keyof WindowEventMap;
  1426. declare type DocumentEventName = keyof DocumentEventMap;
  1427. interface GeneralEventListener<E = Event> {
  1428. (evt: E): void;
  1429. }
  1430. /**
  1431. * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.
  1432. *
  1433. * Overload 1: Omitted Window target
  1434. *
  1435. * @see https://vueuse.org/useEventListener
  1436. * @param event
  1437. * @param listener
  1438. * @param options
  1439. */
  1440. declare function useEventListener<E extends keyof WindowEventMap>(event: E, listener: (this: Window, ev: WindowEventMap[E]) => any, options?: boolean | AddEventListenerOptions): Fn;
  1441. /**
  1442. * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.
  1443. *
  1444. * Overload 2: Explicitly Window target
  1445. *
  1446. * @see https://vueuse.org/useEventListener
  1447. * @param target
  1448. * @param event
  1449. * @param listener
  1450. * @param options
  1451. */
  1452. declare function useEventListener<E extends keyof WindowEventMap>(target: Window, event: E, listener: (this: Window, ev: WindowEventMap[E]) => any, options?: boolean | AddEventListenerOptions): Fn;
  1453. /**
  1454. * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.
  1455. *
  1456. * Overload 3: Explicitly Document target
  1457. *
  1458. * @see https://vueuse.org/useEventListener
  1459. * @param target
  1460. * @param event
  1461. * @param listener
  1462. * @param options
  1463. */
  1464. declare function useEventListener<E extends keyof DocumentEventMap>(target: Document, event: E, listener: (this: Document, ev: DocumentEventMap[E]) => any, options?: boolean | AddEventListenerOptions): Fn;
  1465. /**
  1466. * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.
  1467. *
  1468. * Overload 4: Custom event target with event type infer
  1469. *
  1470. * @see https://vueuse.org/useEventListener
  1471. * @param target
  1472. * @param event
  1473. * @param listener
  1474. * @param options
  1475. */
  1476. declare function useEventListener<Names extends string, EventType = Event>(target: InferEventTarget<Names>, event: Names, listener: GeneralEventListener<EventType>, options?: boolean | AddEventListenerOptions): Fn;
  1477. /**
  1478. * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.
  1479. *
  1480. * Overload 5: Custom event target fallback
  1481. *
  1482. * @see https://vueuse.org/useEventListener
  1483. * @param target
  1484. * @param event
  1485. * @param listener
  1486. * @param options
  1487. */
  1488. declare function useEventListener<EventType = Event>(target: MaybeComputedRef<EventTarget | null | undefined>, event: string, listener: GeneralEventListener<EventType>, options?: boolean | AddEventListenerOptions): Fn;
  1489. declare type UseEventSourceOptions = EventSourceInit;
  1490. /**
  1491. * Reactive wrapper for EventSource.
  1492. *
  1493. * @see https://vueuse.org/useEventSource
  1494. * @see https://developer.mozilla.org/en-US/docs/Web/API/EventSource/EventSource EventSource
  1495. * @param url
  1496. * @param events
  1497. * @param options
  1498. */
  1499. declare function useEventSource(url: string, events?: Array<string>, options?: UseEventSourceOptions): {
  1500. eventSource: Ref<EventSource | null>;
  1501. event: Ref<string | null>;
  1502. data: Ref<string | null>;
  1503. status: Ref<"OPEN" | "CONNECTING" | "CLOSED">;
  1504. error: Ref<Event | null>;
  1505. close: () => void;
  1506. };
  1507. declare type UseEventSourceReturn = ReturnType<typeof useEventSource>;
  1508. interface EyeDropperOpenOptions {
  1509. /**
  1510. * @see https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal
  1511. */
  1512. signal?: AbortSignal;
  1513. }
  1514. interface EyeDropper {
  1515. new (): EyeDropper;
  1516. open: (options?: EyeDropperOpenOptions) => Promise<{
  1517. sRGBHex: string;
  1518. }>;
  1519. [Symbol.toStringTag]: 'EyeDropper';
  1520. }
  1521. interface UseEyeDropperOptions {
  1522. /**
  1523. * Initial sRGBHex.
  1524. *
  1525. * @default ''
  1526. */
  1527. initialValue?: string;
  1528. }
  1529. /**
  1530. * Reactive [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API)
  1531. *
  1532. * @see https://vueuse.org/useEyeDropper
  1533. * @param initialValue string
  1534. */
  1535. declare function useEyeDropper(options?: UseEyeDropperOptions): {
  1536. isSupported: vue_demi.Ref<boolean>;
  1537. sRGBHex: vue_demi.Ref<string>;
  1538. open: (openOptions?: EyeDropperOpenOptions) => Promise<{
  1539. sRGBHex: string;
  1540. } | undefined>;
  1541. };
  1542. declare type UseEyeDropperReturn = ReturnType<typeof useEyeDropper>;
  1543. interface UseFaviconOptions extends ConfigurableDocument {
  1544. baseUrl?: string;
  1545. rel?: string;
  1546. }
  1547. /**
  1548. * Reactive favicon.
  1549. *
  1550. * @see https://vueuse.org/useFavicon
  1551. * @param newIcon
  1552. * @param options
  1553. */
  1554. declare function useFavicon(newIcon: MaybeReadonlyRef<string | null | undefined>, options?: UseFaviconOptions): ComputedRef<string | null | undefined>;
  1555. declare function useFavicon(newIcon?: MaybeRef<string | null | undefined>, options?: UseFaviconOptions): Ref<string | null | undefined>;
  1556. declare type UseFaviconReturn = ReturnType<typeof useFavicon>;
  1557. interface UseFetchReturn<T> {
  1558. /**
  1559. * Indicates if the fetch request has finished
  1560. */
  1561. isFinished: Ref<boolean>;
  1562. /**
  1563. * The statusCode of the HTTP fetch response
  1564. */
  1565. statusCode: Ref<number | null>;
  1566. /**
  1567. * The raw response of the fetch response
  1568. */
  1569. response: Ref<Response | null>;
  1570. /**
  1571. * Any fetch errors that may have occurred
  1572. */
  1573. error: Ref<any>;
  1574. /**
  1575. * The fetch response body, may either be JSON or text
  1576. */
  1577. data: Ref<T | null>;
  1578. /**
  1579. * Indicates if the request is currently being fetched.
  1580. */
  1581. isFetching: Ref<boolean>;
  1582. /**
  1583. * Indicates if the fetch request is able to be aborted
  1584. */
  1585. canAbort: ComputedRef<boolean>;
  1586. /**
  1587. * Indicates if the fetch request was aborted
  1588. */
  1589. aborted: Ref<boolean>;
  1590. /**
  1591. * Abort the fetch request
  1592. */
  1593. abort: Fn;
  1594. /**
  1595. * Manually call the fetch
  1596. * (default not throwing error)
  1597. */
  1598. execute: (throwOnFailed?: boolean) => Promise<any>;
  1599. /**
  1600. * Fires after the fetch request has finished
  1601. */
  1602. onFetchResponse: EventHookOn<Response>;
  1603. /**
  1604. * Fires after a fetch request error
  1605. */
  1606. onFetchError: EventHookOn;
  1607. /**
  1608. * Fires after a fetch has completed
  1609. */
  1610. onFetchFinally: EventHookOn;
  1611. get(): UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>;
  1612. post(payload?: MaybeComputedRef<unknown>, type?: string): UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>;
  1613. put(payload?: MaybeComputedRef<unknown>, type?: string): UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>;
  1614. delete(payload?: MaybeComputedRef<unknown>, type?: string): UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>;
  1615. patch(payload?: MaybeComputedRef<unknown>, type?: string): UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>;
  1616. head(payload?: MaybeComputedRef<unknown>, type?: string): UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>;
  1617. options(payload?: MaybeComputedRef<unknown>, type?: string): UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>;
  1618. json<JSON = any>(): UseFetchReturn<JSON> & PromiseLike<UseFetchReturn<JSON>>;
  1619. text(): UseFetchReturn<string> & PromiseLike<UseFetchReturn<string>>;
  1620. blob(): UseFetchReturn<Blob> & PromiseLike<UseFetchReturn<Blob>>;
  1621. arrayBuffer(): UseFetchReturn<ArrayBuffer> & PromiseLike<UseFetchReturn<ArrayBuffer>>;
  1622. formData(): UseFetchReturn<FormData> & PromiseLike<UseFetchReturn<FormData>>;
  1623. }
  1624. interface BeforeFetchContext {
  1625. /**
  1626. * The computed url of the current request
  1627. */
  1628. url: string;
  1629. /**
  1630. * The request options of the current request
  1631. */
  1632. options: RequestInit;
  1633. /**
  1634. * Cancels the current request
  1635. */
  1636. cancel: Fn;
  1637. }
  1638. interface AfterFetchContext<T = any> {
  1639. response: Response;
  1640. data: T | null;
  1641. }
  1642. interface OnFetchErrorContext<T = any, E = any> {
  1643. error: E;
  1644. data: T | null;
  1645. }
  1646. interface UseFetchOptions {
  1647. /**
  1648. * Fetch function
  1649. */
  1650. fetch?: typeof window.fetch;
  1651. /**
  1652. * Will automatically run fetch when `useFetch` is used
  1653. *
  1654. * @default true
  1655. */
  1656. immediate?: boolean;
  1657. /**
  1658. * Will automatically refetch when:
  1659. * - the URL is changed if the URL is a ref
  1660. * - the payload is changed if the payload is a ref
  1661. *
  1662. * @default false
  1663. */
  1664. refetch?: MaybeComputedRef<boolean>;
  1665. /**
  1666. * Initial data before the request finished
  1667. *
  1668. * @default null
  1669. */
  1670. initialData?: any;
  1671. /**
  1672. * Timeout for abort request after number of millisecond
  1673. * `0` means use browser default
  1674. *
  1675. * @default 0
  1676. */
  1677. timeout?: number;
  1678. /**
  1679. * Will run immediately before the fetch request is dispatched
  1680. */
  1681. beforeFetch?: (ctx: BeforeFetchContext) => Promise<Partial<BeforeFetchContext> | void> | Partial<BeforeFetchContext> | void;
  1682. /**
  1683. * Will run immediately after the fetch request is returned.
  1684. * Runs after any 2xx response
  1685. */
  1686. afterFetch?: (ctx: AfterFetchContext) => Promise<Partial<AfterFetchContext>> | Partial<AfterFetchContext>;
  1687. /**
  1688. * Will run immediately after the fetch request is returned.
  1689. * Runs after any 4xx and 5xx response
  1690. */
  1691. onFetchError?: (ctx: {
  1692. data: any;
  1693. response: Response | null;
  1694. error: any;
  1695. }) => Promise<Partial<OnFetchErrorContext>> | Partial<OnFetchErrorContext>;
  1696. }
  1697. interface CreateFetchOptions {
  1698. /**
  1699. * The base URL that will be prefixed to all urls
  1700. */
  1701. baseUrl?: MaybeComputedRef<string>;
  1702. /**
  1703. * Default Options for the useFetch function
  1704. */
  1705. options?: UseFetchOptions;
  1706. /**
  1707. * Options for the fetch request
  1708. */
  1709. fetchOptions?: RequestInit;
  1710. }
  1711. declare function createFetch(config?: CreateFetchOptions): typeof useFetch;
  1712. declare function useFetch<T>(url: MaybeComputedRef<string>): UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>;
  1713. declare function useFetch<T>(url: MaybeComputedRef<string>, useFetchOptions: UseFetchOptions): UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>;
  1714. declare function useFetch<T>(url: MaybeComputedRef<string>, options: RequestInit, useFetchOptions?: UseFetchOptions): UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>;
  1715. interface UseFileDialogOptions extends ConfigurableDocument {
  1716. /**
  1717. * @default true
  1718. */
  1719. multiple?: boolean;
  1720. /**
  1721. * @default '*'
  1722. */
  1723. accept?: string;
  1724. /**
  1725. * Select the input source for the capture file.
  1726. * @see [HTMLInputElement Capture](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
  1727. */
  1728. capture?: string;
  1729. }
  1730. interface UseFileDialogReturn {
  1731. files: Ref<FileList | null>;
  1732. open: (localOptions?: Partial<UseFileDialogOptions>) => void;
  1733. reset: () => void;
  1734. }
  1735. /**
  1736. * Open file dialog with ease.
  1737. *
  1738. * @see https://vueuse.org/useFileDialog
  1739. * @param options
  1740. */
  1741. declare function useFileDialog(options?: UseFileDialogOptions): UseFileDialogReturn;
  1742. /**
  1743. * window.showOpenFilePicker parameters
  1744. * @see https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker#parameters
  1745. */
  1746. interface FileSystemAccessShowOpenFileOptions {
  1747. multiple?: boolean;
  1748. types?: Array<{
  1749. description?: string;
  1750. accept: Record<string, string[]>;
  1751. }>;
  1752. excludeAcceptAllOption?: boolean;
  1753. }
  1754. /**
  1755. * window.showSaveFilePicker parameters
  1756. * @see https://developer.mozilla.org/en-US/docs/Web/API/window/showSaveFilePicker#parameters
  1757. */
  1758. interface FileSystemAccessShowSaveFileOptions {
  1759. suggestedName?: string;
  1760. types?: Array<{
  1761. description?: string;
  1762. accept: Record<string, string[]>;
  1763. }>;
  1764. excludeAcceptAllOption?: boolean;
  1765. }
  1766. /**
  1767. * FileHandle
  1768. * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileHandle
  1769. */
  1770. interface FileSystemFileHandle {
  1771. getFile: () => Promise<File>;
  1772. createWritable: () => FileSystemWritableFileStream;
  1773. }
  1774. /**
  1775. * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream
  1776. */
  1777. interface FileSystemWritableFileStream extends WritableStream {
  1778. /**
  1779. * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/write
  1780. */
  1781. write: FileSystemWritableFileStreamWrite;
  1782. /**
  1783. * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/seek
  1784. */
  1785. seek: (position: number) => Promise<void>;
  1786. /**
  1787. * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/truncate
  1788. */
  1789. truncate: (size: number) => Promise<void>;
  1790. }
  1791. /**
  1792. * FileStream.write
  1793. * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/write
  1794. */
  1795. interface FileSystemWritableFileStreamWrite {
  1796. (data: string | BufferSource | Blob): Promise<void>;
  1797. (options: {
  1798. type: 'write';
  1799. position: number;
  1800. data: string | BufferSource | Blob;
  1801. }): Promise<void>;
  1802. (options: {
  1803. type: 'seek';
  1804. position: number;
  1805. }): Promise<void>;
  1806. (options: {
  1807. type: 'truncate';
  1808. size: number;
  1809. }): Promise<void>;
  1810. }
  1811. /**
  1812. * FileStream.write
  1813. * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/write
  1814. */
  1815. declare type FileSystemAccessWindow = Window & {
  1816. showSaveFilePicker: (options: FileSystemAccessShowSaveFileOptions) => Promise<FileSystemFileHandle>;
  1817. showOpenFilePicker: (options: FileSystemAccessShowOpenFileOptions) => Promise<FileSystemFileHandle[]>;
  1818. };
  1819. declare type UseFileSystemAccessCommonOptions = Pick<FileSystemAccessShowOpenFileOptions, 'types' | 'excludeAcceptAllOption'>;
  1820. declare type UseFileSystemAccessShowSaveFileOptions = Pick<FileSystemAccessShowSaveFileOptions, 'suggestedName'>;
  1821. declare type UseFileSystemAccessOptions = ConfigurableWindow & UseFileSystemAccessCommonOptions & {
  1822. /**
  1823. * file data type
  1824. */
  1825. dataType?: MaybeComputedRef<'Text' | 'ArrayBuffer' | 'Blob'>;
  1826. };
  1827. /**
  1828. * Create and read and write local files.
  1829. * @see https://vueuse.org/useFileSystemAccess
  1830. * @param options
  1831. */
  1832. declare function useFileSystemAccess(options: UseFileSystemAccessOptions & {
  1833. dataType: 'Text';
  1834. }): UseFileSystemAccessReturn<string>;
  1835. declare function useFileSystemAccess(options: UseFileSystemAccessOptions & {
  1836. dataType: 'ArrayBuffer';
  1837. }): UseFileSystemAccessReturn<ArrayBuffer>;
  1838. declare function useFileSystemAccess(options: UseFileSystemAccessOptions & {
  1839. dataType: 'Blob';
  1840. }): UseFileSystemAccessReturn<Blob>;
  1841. declare function useFileSystemAccess(options: UseFileSystemAccessOptions): UseFileSystemAccessReturn<string | ArrayBuffer | Blob>;
  1842. interface UseFileSystemAccessReturn<T = string> {
  1843. isSupported: Ref<boolean>;
  1844. data: Ref<T | undefined>;
  1845. file: Ref<File | undefined>;
  1846. fileName: Ref<string>;
  1847. fileMIME: Ref<string>;
  1848. fileSize: Ref<number>;
  1849. fileLastModified: Ref<number>;
  1850. open: (_options?: UseFileSystemAccessCommonOptions) => Awaitable<void>;
  1851. create: (_options?: UseFileSystemAccessShowSaveFileOptions) => Awaitable<void>;
  1852. save: (_options?: UseFileSystemAccessShowSaveFileOptions) => Awaitable<void>;
  1853. saveAs: (_options?: UseFileSystemAccessShowSaveFileOptions) => Awaitable<void>;
  1854. updateData: () => Awaitable<void>;
  1855. }
  1856. interface UseFocusOptions extends ConfigurableWindow {
  1857. /**
  1858. * Initial value. If set true, then focus will be set on the target
  1859. *
  1860. * @default false
  1861. */
  1862. initialValue?: boolean;
  1863. }
  1864. interface UseFocusReturn {
  1865. /**
  1866. * If read as true, then the element has focus. If read as false, then the element does not have focus
  1867. * If set to true, then the element will be focused. If set to false, the element will be blurred.
  1868. */
  1869. focused: Ref<boolean>;
  1870. }
  1871. /**
  1872. * Track or set the focus state of a DOM element.
  1873. *
  1874. * @see https://vueuse.org/useFocus
  1875. * @param target The target element for the focus and blur events.
  1876. * @param options
  1877. */
  1878. declare function useFocus(target: MaybeElementRef, options?: UseFocusOptions): UseFocusReturn;
  1879. interface UseFocusWithinReturn {
  1880. /**
  1881. * True if the element or any of its descendants are focused
  1882. */
  1883. focused: ComputedRef<boolean>;
  1884. }
  1885. /**
  1886. * Track if focus is contained within the target element
  1887. *
  1888. * @see https://vueuse.org/useFocusWithin
  1889. * @param target The target element to track
  1890. * @param options Focus within options
  1891. */
  1892. declare function useFocusWithin(target: MaybeElementRef, options?: ConfigurableWindow): UseFocusWithinReturn;
  1893. interface UseFpsOptions {
  1894. /**
  1895. * Calculate the FPS on every x frames.
  1896. * @default 10
  1897. */
  1898. every?: number;
  1899. }
  1900. declare function useFps(options?: UseFpsOptions): Ref<number>;
  1901. interface UseFullscreenOptions extends ConfigurableDocument {
  1902. /**
  1903. * Automatically exit fullscreen when component is unmounted
  1904. *
  1905. * @default false
  1906. */
  1907. autoExit?: boolean;
  1908. }
  1909. /**
  1910. * Reactive Fullscreen API.
  1911. *
  1912. * @see https://vueuse.org/useFullscreen
  1913. * @param target
  1914. * @param options
  1915. */
  1916. declare function useFullscreen(target?: MaybeElementRef, options?: UseFullscreenOptions): {
  1917. isSupported: vue_demi.Ref<boolean>;
  1918. isFullscreen: vue_demi.Ref<boolean>;
  1919. enter: () => Promise<void>;
  1920. exit: () => Promise<void>;
  1921. toggle: () => Promise<void>;
  1922. };
  1923. declare type UseFullscreenReturn = ReturnType<typeof useFullscreen>;
  1924. interface UseGamepadOptions extends ConfigurableWindow, ConfigurableNavigator {
  1925. }
  1926. /**
  1927. * Maps a standard standard gamepad to an Xbox 360 Controller.
  1928. */
  1929. declare function mapGamepadToXbox360Controller(gamepad: Ref<Gamepad | undefined>): vue_demi.ComputedRef<{
  1930. buttons: {
  1931. a: GamepadButton;
  1932. b: GamepadButton;
  1933. x: GamepadButton;
  1934. y: GamepadButton;
  1935. };
  1936. bumper: {
  1937. left: GamepadButton;
  1938. right: GamepadButton;
  1939. };
  1940. triggers: {
  1941. left: GamepadButton;
  1942. right: GamepadButton;
  1943. };
  1944. stick: {
  1945. left: {
  1946. horizontal: number;
  1947. vertical: number;
  1948. button: GamepadButton;
  1949. };
  1950. right: {
  1951. horizontal: number;
  1952. vertical: number;
  1953. button: GamepadButton;
  1954. };
  1955. };
  1956. dpad: {
  1957. up: GamepadButton;
  1958. down: GamepadButton;
  1959. left: GamepadButton;
  1960. right: GamepadButton;
  1961. };
  1962. back: GamepadButton;
  1963. start: GamepadButton;
  1964. } | null>;
  1965. declare function useGamepad(options?: UseGamepadOptions): {
  1966. isSupported: Ref<boolean>;
  1967. onConnected: _vueuse_shared.EventHookOn<number>;
  1968. onDisconnected: _vueuse_shared.EventHookOn<number>;
  1969. gamepads: Ref<{
  1970. readonly axes: readonly number[];
  1971. readonly buttons: readonly {
  1972. readonly pressed: boolean;
  1973. readonly touched: boolean;
  1974. readonly value: number;
  1975. }[];
  1976. readonly connected: boolean;
  1977. readonly hapticActuators: readonly {
  1978. readonly type: "vibration";
  1979. }[];
  1980. readonly id: string;
  1981. readonly index: number;
  1982. readonly mapping: GamepadMappingType;
  1983. readonly timestamp: number;
  1984. }[]>;
  1985. pause: _vueuse_shared.Fn;
  1986. resume: _vueuse_shared.Fn;
  1987. isActive: Ref<boolean>;
  1988. };
  1989. declare type UseGamepadReturn = ReturnType<typeof useGamepad>;
  1990. interface UseGeolocationOptions extends Partial<PositionOptions>, ConfigurableNavigator {
  1991. }
  1992. /**
  1993. * Reactive Geolocation API.
  1994. *
  1995. * @see https://vueuse.org/useGeolocation
  1996. * @param options
  1997. */
  1998. declare function useGeolocation(options?: UseGeolocationOptions): {
  1999. isSupported: Ref<boolean>;
  2000. coords: Ref<GeolocationCoordinates>;
  2001. locatedAt: Ref<number | null>;
  2002. error: Ref<{
  2003. readonly code: number;
  2004. readonly message: string;
  2005. readonly PERMISSION_DENIED: number;
  2006. readonly POSITION_UNAVAILABLE: number;
  2007. readonly TIMEOUT: number;
  2008. } | null>;
  2009. };
  2010. declare type UseGeolocationReturn = ReturnType<typeof useGeolocation>;
  2011. interface UseIdleOptions extends ConfigurableWindow, ConfigurableEventFilter {
  2012. /**
  2013. * Event names that listen to for detected user activity
  2014. *
  2015. * @default ['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel']
  2016. */
  2017. events?: WindowEventName[];
  2018. /**
  2019. * Listen for document visibility change
  2020. *
  2021. * @default true
  2022. */
  2023. listenForVisibilityChange?: boolean;
  2024. /**
  2025. * Initial state of the ref idle
  2026. *
  2027. * @default false
  2028. */
  2029. initialState?: boolean;
  2030. }
  2031. interface UseIdleReturn {
  2032. idle: Ref<boolean>;
  2033. lastActive: Ref<number>;
  2034. }
  2035. /**
  2036. * Tracks whether the user is being inactive.
  2037. *
  2038. * @see https://vueuse.org/useIdle
  2039. * @param timeout default to 1 minute
  2040. * @param options IdleOptions
  2041. */
  2042. declare function useIdle(timeout?: number, options?: UseIdleOptions): UseIdleReturn;
  2043. interface UseImageOptions {
  2044. /** Address of the resource */
  2045. src: string;
  2046. /** Images to use in different situations, e.g., high-resolution displays, small monitors, etc. */
  2047. srcset?: string;
  2048. /** Image sizes for different page layouts */
  2049. sizes?: string;
  2050. }
  2051. /**
  2052. * Reactive load an image in the browser, you can wait the result to display it or show a fallback.
  2053. *
  2054. * @see https://vueuse.org/useImage
  2055. * @param options Image attributes, as used in the <img> tag
  2056. * @param asyncStateOptions
  2057. */
  2058. declare const useImage: <Shallow extends true>(options: MaybeComputedRef<UseImageOptions>, asyncStateOptions?: UseAsyncStateOptions<Shallow>) => UseAsyncStateReturn<HTMLImageElement | undefined, true>;
  2059. declare type UseImageReturn = ReturnType<typeof useImage>;
  2060. interface UseScrollOptions {
  2061. /**
  2062. * Throttle time for scroll event, it’s disabled by default.
  2063. *
  2064. * @default 0
  2065. */
  2066. throttle?: number;
  2067. /**
  2068. * The check time when scrolling ends.
  2069. * This configuration will be setting to (throttle + idle) when the `throttle` is configured.
  2070. *
  2071. * @default 200
  2072. */
  2073. idle?: number;
  2074. /**
  2075. * Offset arrived states by x pixels
  2076. *
  2077. */
  2078. offset?: {
  2079. left?: number;
  2080. right?: number;
  2081. top?: number;
  2082. bottom?: number;
  2083. };
  2084. /**
  2085. * Trigger it when scrolling.
  2086. *
  2087. */
  2088. onScroll?: (e: Event) => void;
  2089. /**
  2090. * Trigger it when scrolling ends.
  2091. *
  2092. */
  2093. onStop?: (e: Event) => void;
  2094. /**
  2095. * Listener options for scroll event.
  2096. *
  2097. * @default {capture: false, passive: true}
  2098. */
  2099. eventListenerOptions?: boolean | AddEventListenerOptions;
  2100. /**
  2101. * Optionally specify a scroll behavior of `auto` (default, not smooth scrolling) or
  2102. * `smooth` (for smooth scrolling) which takes effect when changing the `x` or `y` refs.
  2103. *
  2104. * @default 'auto'
  2105. */
  2106. behavior?: MaybeComputedRef<ScrollBehavior>;
  2107. }
  2108. /**
  2109. * Reactive scroll.
  2110. *
  2111. * @see https://vueuse.org/useScroll
  2112. * @param element
  2113. * @param options
  2114. */
  2115. declare function useScroll(element: MaybeComputedRef<HTMLElement | SVGElement | Window | Document | null | undefined>, options?: UseScrollOptions): {
  2116. x: vue_demi.WritableComputedRef<number>;
  2117. y: vue_demi.WritableComputedRef<number>;
  2118. isScrolling: vue_demi.Ref<boolean>;
  2119. arrivedState: {
  2120. left: boolean;
  2121. right: boolean;
  2122. top: boolean;
  2123. bottom: boolean;
  2124. };
  2125. directions: {
  2126. left: boolean;
  2127. right: boolean;
  2128. top: boolean;
  2129. bottom: boolean;
  2130. };
  2131. };
  2132. declare type UseScrollReturn = ReturnType<typeof useScroll>;
  2133. interface UseInfiniteScrollOptions extends UseScrollOptions {
  2134. /**
  2135. * The minimum distance between the bottom of the element and the bottom of the viewport
  2136. *
  2137. * @default 0
  2138. */
  2139. distance?: number;
  2140. /**
  2141. * The direction in which to listen the scroll.
  2142. *
  2143. * @default 'bottom'
  2144. */
  2145. direction?: 'top' | 'bottom' | 'left' | 'right';
  2146. /**
  2147. * Whether to preserve the current scroll position when loading more items.
  2148. *
  2149. * @default false
  2150. */
  2151. preserveScrollPosition?: boolean;
  2152. }
  2153. /**
  2154. * Reactive infinite scroll.
  2155. *
  2156. * @see https://vueuse.org/useInfiniteScroll
  2157. */
  2158. declare function useInfiniteScroll(element: MaybeComputedRef<HTMLElement | SVGElement | Window | Document | null | undefined>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => void | Promise<void>, options?: UseInfiniteScrollOptions): void;
  2159. interface UseIntersectionObserverOptions extends ConfigurableWindow {
  2160. /**
  2161. * The Element or Document whose bounds are used as the bounding box when testing for intersection.
  2162. */
  2163. root?: MaybeElementRef;
  2164. /**
  2165. * A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections.
  2166. */
  2167. rootMargin?: string;
  2168. /**
  2169. * Either a single number or an array of numbers between 0.0 and 1.
  2170. */
  2171. threshold?: number | number[];
  2172. }
  2173. /**
  2174. * Detects that a target element's visibility.
  2175. *
  2176. * @see https://vueuse.org/useIntersectionObserver
  2177. * @param target
  2178. * @param callback
  2179. * @param options
  2180. */
  2181. declare function useIntersectionObserver(target: MaybeElementRef, callback: IntersectionObserverCallback, options?: UseIntersectionObserverOptions): {
  2182. isSupported: vue_demi.Ref<boolean>;
  2183. stop: () => void;
  2184. };
  2185. declare type UseIntersectionObserverReturn = ReturnType<typeof useIntersectionObserver>;
  2186. declare type KeyModifier = 'Alt' | 'AltGraph' | 'CapsLock' | 'Control' | 'Fn' | 'FnLock' | 'Meta' | 'NumLock' | 'ScrollLock' | 'Shift' | 'Symbol' | 'SymbolLock';
  2187. interface UseModifierOptions<Initial> extends ConfigurableDocument {
  2188. /**
  2189. * Event names that will prompt update to modifier states
  2190. *
  2191. * @default ['mousedown', 'mouseup', 'keydown', 'keyup']
  2192. */
  2193. events?: WindowEventName[];
  2194. /**
  2195. * Initial value of the returned ref
  2196. *
  2197. * @default null
  2198. */
  2199. initial?: Initial;
  2200. }
  2201. declare type UseKeyModifierReturn<Initial> = Ref<Initial extends boolean ? boolean : boolean | null>;
  2202. declare function useKeyModifier<Initial extends boolean | null>(modifier: KeyModifier, options?: UseModifierOptions<Initial>): UseKeyModifierReturn<Initial>;
  2203. declare function useLocalStorage(key: string, initialValue: MaybeComputedRef<string>, options?: UseStorageOptions<string>): RemovableRef<string>;
  2204. declare function useLocalStorage(key: string, initialValue: MaybeComputedRef<boolean>, options?: UseStorageOptions<boolean>): RemovableRef<boolean>;
  2205. declare function useLocalStorage(key: string, initialValue: MaybeComputedRef<number>, options?: UseStorageOptions<number>): RemovableRef<number>;
  2206. declare function useLocalStorage<T>(key: string, initialValue: MaybeComputedRef<T>, options?: UseStorageOptions<T>): RemovableRef<T>;
  2207. declare function useLocalStorage<T = unknown>(key: string, initialValue: MaybeComputedRef<null>, options?: UseStorageOptions<T>): RemovableRef<T>;
  2208. declare const DefaultMagicKeysAliasMap: Readonly<Record<string, string>>;
  2209. interface UseMagicKeysOptions<Reactive extends Boolean> {
  2210. /**
  2211. * Returns a reactive object instead of an object of refs
  2212. *
  2213. * @default false
  2214. */
  2215. reactive?: Reactive;
  2216. /**
  2217. * Target for listening events
  2218. *
  2219. * @default window
  2220. */
  2221. target?: MaybeComputedRef<EventTarget>;
  2222. /**
  2223. * Alias map for keys, all the keys should be lowercase
  2224. * { target: keycode }
  2225. *
  2226. * @example { ctrl: "control" }
  2227. * @default <predefined-map>
  2228. */
  2229. aliasMap?: Record<string, string>;
  2230. /**
  2231. * Register passive listener
  2232. *
  2233. * @default true
  2234. */
  2235. passive?: boolean;
  2236. /**
  2237. * Custom event handler for keydown/keyup event.
  2238. * Useful when you want to apply custom logic.
  2239. *
  2240. * When using `e.preventDefault()`, you will need to pass `passive: false` to useMagicKeys().
  2241. */
  2242. onEventFired?: (e: KeyboardEvent) => void | boolean;
  2243. }
  2244. interface MagicKeysInternal {
  2245. /**
  2246. * A Set of currently pressed keys,
  2247. * Stores raw keyCodes.
  2248. *
  2249. * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
  2250. */
  2251. current: Set<string>;
  2252. }
  2253. declare type UseMagicKeysReturn<Reactive extends Boolean> = Readonly<Omit<Reactive extends true ? Record<string, boolean> : Record<string, ComputedRef<boolean>>, keyof MagicKeysInternal> & MagicKeysInternal>;
  2254. /**
  2255. * Reactive keys pressed state, with magical keys combination support.
  2256. *
  2257. * @see https://vueuse.org/useMagicKeys
  2258. */
  2259. declare function useMagicKeys(options?: UseMagicKeysOptions<false>): UseMagicKeysReturn<false>;
  2260. declare function useMagicKeys(options: UseMagicKeysOptions<true>): UseMagicKeysReturn<true>;
  2261. /**
  2262. * Many of the jsdoc definitions here are modified version of the
  2263. * documentation from MDN(https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement)
  2264. */
  2265. interface UseMediaSource {
  2266. /**
  2267. * The source url for the media
  2268. */
  2269. src: string;
  2270. /**
  2271. * The media codec type
  2272. */
  2273. type?: string;
  2274. }
  2275. interface UseMediaTextTrackSource {
  2276. /**
  2277. * Indicates that the track should be enabled unless the user's preferences indicate
  2278. * that another track is more appropriate
  2279. */
  2280. default?: boolean;
  2281. /**
  2282. * How the text track is meant to be used. If omitted the default kind is subtitles.
  2283. */
  2284. kind: TextTrackKind;
  2285. /**
  2286. * A user-readable title of the text track which is used by the browser
  2287. * when listing available text tracks.
  2288. */
  2289. label: string;
  2290. /**
  2291. * Address of the track (.vtt file). Must be a valid URL. This attribute
  2292. * must be specified and its URL value must have the same origin as the document
  2293. */
  2294. src: string;
  2295. /**
  2296. * Language of the track text data. It must be a valid BCP 47 language tag.
  2297. * If the kind attribute is set to subtitles, then srclang must be defined.
  2298. */
  2299. srcLang: string;
  2300. }
  2301. interface UseMediaControlsOptions extends ConfigurableDocument {
  2302. /**
  2303. * The source for the media, may either be a string, a `UseMediaSource` object, or a list
  2304. * of `UseMediaSource` objects.
  2305. */
  2306. src?: MaybeComputedRef<string | UseMediaSource | UseMediaSource[]>;
  2307. /**
  2308. * A list of text tracks for the media
  2309. */
  2310. tracks?: MaybeComputedRef<UseMediaTextTrackSource[]>;
  2311. }
  2312. interface UseMediaTextTrack {
  2313. /**
  2314. * The index of the text track
  2315. */
  2316. id: number;
  2317. /**
  2318. * The text track label
  2319. */
  2320. label: string;
  2321. /**
  2322. * Language of the track text data. It must be a valid BCP 47 language tag.
  2323. * If the kind attribute is set to subtitles, then srclang must be defined.
  2324. */
  2325. language: string;
  2326. /**
  2327. * Specifies the display mode of the text track, either `disabled`,
  2328. * `hidden`, or `showing`
  2329. */
  2330. mode: TextTrackMode;
  2331. /**
  2332. * How the text track is meant to be used. If omitted the default kind is subtitles.
  2333. */
  2334. kind: TextTrackKind;
  2335. /**
  2336. * Indicates the track's in-band metadata track dispatch type.
  2337. */
  2338. inBandMetadataTrackDispatchType: string;
  2339. /**
  2340. * A list of text track cues
  2341. */
  2342. cues: TextTrackCueList | null;
  2343. /**
  2344. * A list of active text track cues
  2345. */
  2346. activeCues: TextTrackCueList | null;
  2347. }
  2348. declare function useMediaControls(target: MaybeRef<HTMLMediaElement | null | undefined>, options?: UseMediaControlsOptions): {
  2349. currentTime: vue_demi.Ref<number>;
  2350. duration: vue_demi.Ref<number>;
  2351. waiting: vue_demi.Ref<boolean>;
  2352. seeking: vue_demi.Ref<boolean>;
  2353. ended: vue_demi.Ref<boolean>;
  2354. stalled: vue_demi.Ref<boolean>;
  2355. buffered: vue_demi.Ref<[number, number][]>;
  2356. playing: vue_demi.Ref<boolean>;
  2357. rate: vue_demi.Ref<number>;
  2358. volume: vue_demi.Ref<number>;
  2359. muted: vue_demi.Ref<boolean>;
  2360. tracks: vue_demi.Ref<{
  2361. id: number;
  2362. label: string;
  2363. language: string;
  2364. mode: TextTrackMode;
  2365. kind: TextTrackKind;
  2366. inBandMetadataTrackDispatchType: string;
  2367. cues: {
  2368. [x: number]: TextTrackCue;
  2369. readonly length: number;
  2370. getCueById: (id: string) => TextTrackCue | null;
  2371. [Symbol.iterator]: () => IterableIterator<TextTrackCue>;
  2372. } | null;
  2373. activeCues: {
  2374. [x: number]: TextTrackCue;
  2375. readonly length: number;
  2376. getCueById: (id: string) => TextTrackCue | null;
  2377. [Symbol.iterator]: () => IterableIterator<TextTrackCue>;
  2378. } | null;
  2379. }[]>;
  2380. selectedTrack: vue_demi.Ref<number>;
  2381. enableTrack: (track: number | UseMediaTextTrack, disableTracks?: boolean) => void;
  2382. disableTrack: (track?: number | UseMediaTextTrack) => void;
  2383. supportsPictureInPicture: boolean | undefined;
  2384. togglePictureInPicture: () => Promise<unknown>;
  2385. isPictureInPicture: vue_demi.Ref<boolean>;
  2386. onSourceError: _vueuse_shared.EventHookOn<Event>;
  2387. };
  2388. declare type UseMediaControlsReturn = ReturnType<typeof useMediaControls>;
  2389. /**
  2390. * Reactive Media Query.
  2391. *
  2392. * @see https://vueuse.org/useMediaQuery
  2393. * @param query
  2394. * @param options
  2395. */
  2396. declare function useMediaQuery(query: MaybeComputedRef<string>, options?: ConfigurableWindow): vue_demi.Ref<boolean>;
  2397. declare type CacheKey = any;
  2398. /**
  2399. * Custom memoize cache handler
  2400. */
  2401. interface UseMemoizeCache<Key, Value> {
  2402. /**
  2403. * Get value for key
  2404. */
  2405. get(key: Key): Value | undefined;
  2406. /**
  2407. * Set value for key
  2408. */
  2409. set(key: Key, value: Value): void;
  2410. /**
  2411. * Return flag if key exists
  2412. */
  2413. has(key: Key): boolean;
  2414. /**
  2415. * Delete value for key
  2416. */
  2417. delete(key: Key): void;
  2418. /**
  2419. * Clear cache
  2420. */
  2421. clear(): void;
  2422. }
  2423. /**
  2424. * Memoized function
  2425. */
  2426. interface UseMemoizeReturn<Result, Args extends unknown[]> {
  2427. /**
  2428. * Get result from cache or call memoized function
  2429. */
  2430. (...args: Args): Result;
  2431. /**
  2432. * Call memoized function and update cache
  2433. */
  2434. load(...args: Args): Result;
  2435. /**
  2436. * Delete cache of given arguments
  2437. */
  2438. delete(...args: Args): void;
  2439. /**
  2440. * Clear cache
  2441. */
  2442. clear(): void;
  2443. /**
  2444. * Generate cache key for given arguments
  2445. */
  2446. generateKey(...args: Args): CacheKey;
  2447. /**
  2448. * Cache container
  2449. */
  2450. cache: UseMemoizeCache<CacheKey, Result>;
  2451. }
  2452. interface UseMemoizeOptions<Result, Args extends unknown[]> {
  2453. getKey?: (...args: Args) => string | number;
  2454. cache?: UseMemoizeCache<CacheKey, Result>;
  2455. }
  2456. /**
  2457. * Reactive function result cache based on arguments
  2458. */
  2459. declare function useMemoize<Result, Args extends unknown[]>(resolver: (...args: Args) => Result, options?: UseMemoizeOptions<Result, Args>): UseMemoizeReturn<Result, Args>;
  2460. /**
  2461. * Performance.memory
  2462. *
  2463. * @see https://developer.mozilla.org/en-US/docs/Web/API/Performance/memory
  2464. */
  2465. interface MemoryInfo {
  2466. /**
  2467. * The maximum size of the heap, in bytes, that is available to the context.
  2468. */
  2469. readonly jsHeapSizeLimit: number;
  2470. /**
  2471. * The total allocated heap size, in bytes.
  2472. */
  2473. readonly totalJSHeapSize: number;
  2474. /**
  2475. * The currently active segment of JS heap, in bytes.
  2476. */
  2477. readonly usedJSHeapSize: number;
  2478. [Symbol.toStringTag]: 'MemoryInfo';
  2479. }
  2480. interface UseMemoryOptions extends UseIntervalFnOptions {
  2481. interval?: number;
  2482. }
  2483. /**
  2484. * Reactive Memory Info.
  2485. *
  2486. * @see https://vueuse.org/useMemory
  2487. * @param options
  2488. */
  2489. declare function useMemory(options?: UseMemoryOptions): {
  2490. isSupported: vue_demi.Ref<boolean>;
  2491. memory: vue_demi.Ref<MemoryInfo | undefined>;
  2492. };
  2493. declare type UseMemoryReturn = ReturnType<typeof useMemory>;
  2494. /**
  2495. * Mounted state in ref.
  2496. *
  2497. * @see https://vueuse.org/useMounted
  2498. * @param options
  2499. */
  2500. declare function useMounted(): vue_demi.Ref<boolean>;
  2501. interface UseMouseOptions extends ConfigurableWindow, ConfigurableEventFilter {
  2502. /**
  2503. * Mouse position based by page or client
  2504. *
  2505. * @default 'page'
  2506. */
  2507. type?: 'page' | 'client';
  2508. /**
  2509. * Listen to `touchmove` events
  2510. *
  2511. * @default true
  2512. */
  2513. touch?: boolean;
  2514. /**
  2515. * Reset to initial value when `touchend` event fired
  2516. *
  2517. * @default false
  2518. */
  2519. resetOnTouchEnds?: boolean;
  2520. /**
  2521. * Initial values
  2522. */
  2523. initialValue?: Position;
  2524. }
  2525. declare type MouseSourceType = 'mouse' | 'touch' | null;
  2526. /**
  2527. * Reactive mouse position.
  2528. *
  2529. * @see https://vueuse.org/useMouse
  2530. * @param options
  2531. */
  2532. declare function useMouse(options?: UseMouseOptions): {
  2533. x: vue_demi.Ref<number>;
  2534. y: vue_demi.Ref<number>;
  2535. sourceType: vue_demi.Ref<MouseSourceType>;
  2536. };
  2537. declare type UseMouseReturn = ReturnType<typeof useMouse>;
  2538. interface MouseInElementOptions extends UseMouseOptions {
  2539. handleOutside?: boolean;
  2540. }
  2541. /**
  2542. * Reactive mouse position related to an element.
  2543. *
  2544. * @see https://vueuse.org/useMouseInElement
  2545. * @param target
  2546. * @param options
  2547. */
  2548. declare function useMouseInElement(target?: MaybeElementRef, options?: MouseInElementOptions): {
  2549. x: vue_demi.Ref<number>;
  2550. y: vue_demi.Ref<number>;
  2551. sourceType: vue_demi.Ref<MouseSourceType>;
  2552. elementX: vue_demi.Ref<number>;
  2553. elementY: vue_demi.Ref<number>;
  2554. elementPositionX: vue_demi.Ref<number>;
  2555. elementPositionY: vue_demi.Ref<number>;
  2556. elementHeight: vue_demi.Ref<number>;
  2557. elementWidth: vue_demi.Ref<number>;
  2558. isOutside: vue_demi.Ref<boolean>;
  2559. stop: () => void;
  2560. };
  2561. declare type UseMouseInElementReturn = ReturnType<typeof useMouseInElement>;
  2562. interface MousePressedOptions extends ConfigurableWindow {
  2563. /**
  2564. * Listen to `touchstart` `touchend` events
  2565. *
  2566. * @default true
  2567. */
  2568. touch?: boolean;
  2569. /**
  2570. * Listen to `dragstart` `drop` and `dragend` events
  2571. *
  2572. * @default true
  2573. */
  2574. drag?: boolean;
  2575. /**
  2576. * Initial values
  2577. *
  2578. * @default false
  2579. */
  2580. initialValue?: boolean;
  2581. /**
  2582. * Element target to be capture the click
  2583. */
  2584. target?: MaybeElementRef;
  2585. }
  2586. /**
  2587. * Reactive mouse position.
  2588. *
  2589. * @see https://vueuse.org/useMousePressed
  2590. * @param options
  2591. */
  2592. declare function useMousePressed(options?: MousePressedOptions): {
  2593. pressed: vue_demi.Ref<boolean>;
  2594. sourceType: vue_demi.Ref<MouseSourceType>;
  2595. };
  2596. declare type UseMousePressedReturn = ReturnType<typeof useMousePressed>;
  2597. interface UseMutationObserverOptions extends MutationObserverInit, ConfigurableWindow {
  2598. }
  2599. /**
  2600. * Watch for changes being made to the DOM tree.
  2601. *
  2602. * @see https://vueuse.org/useMutationObserver
  2603. * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver MutationObserver MDN
  2604. * @param target
  2605. * @param callback
  2606. * @param options
  2607. */
  2608. declare function useMutationObserver(target: MaybeElementRef, callback: MutationCallback, options?: UseMutationObserverOptions): {
  2609. isSupported: vue_demi.Ref<boolean>;
  2610. stop: () => void;
  2611. };
  2612. declare type UseMutationObserverReturn = ReturnType<typeof useMutationObserver>;
  2613. interface NavigatorLanguageState {
  2614. isSupported: Ref<boolean>;
  2615. /**
  2616. *
  2617. * ISO 639-1 standard Language Code
  2618. *
  2619. * @info The detected user agent language preference as a language tag
  2620. * (which is sometimes referred to as a "locale identifier").
  2621. * This consists of a 2-3 letter base language tag that indicates a
  2622. * language, optionally followed by additional subtags separated by
  2623. * '-'. The most common extra information is the country or region
  2624. * variant (like 'en-US' or 'fr-CA').
  2625. *
  2626. *
  2627. * @see https://www.iso.org/iso-639-language-codes.html
  2628. * @see https://www.loc.gov/standards/iso639-2/php/code_list.php
  2629. *
  2630. */
  2631. language: Ref<string | undefined>;
  2632. }
  2633. /**
  2634. *
  2635. * Reactive useNavigatorLanguage
  2636. *
  2637. * Detects the currently selected user language and returns a reactive language
  2638. * @see https://vueuse.org/useNavigatorLanguage
  2639. *
  2640. */
  2641. declare const useNavigatorLanguage: (options?: ConfigurableWindow) => Readonly<NavigatorLanguageState>;
  2642. declare type UseNavigatorLanguageReturn = ReturnType<typeof useNavigatorLanguage>;
  2643. declare type NetworkType = 'bluetooth' | 'cellular' | 'ethernet' | 'none' | 'wifi' | 'wimax' | 'other' | 'unknown';
  2644. declare type NetworkEffectiveType = 'slow-2g' | '2g' | '3g' | '4g' | undefined;
  2645. interface NetworkState {
  2646. isSupported: Ref<boolean>;
  2647. /**
  2648. * If the user is currently connected.
  2649. */
  2650. isOnline: Ref<boolean>;
  2651. /**
  2652. * The time since the user was last connected.
  2653. */
  2654. offlineAt: Ref<number | undefined>;
  2655. /**
  2656. * At this time, if the user is offline and reconnects
  2657. */
  2658. onlineAt: Ref<number | undefined>;
  2659. /**
  2660. * The download speed in Mbps.
  2661. */
  2662. downlink: Ref<number | undefined>;
  2663. /**
  2664. * The max reachable download speed in Mbps.
  2665. */
  2666. downlinkMax: Ref<number | undefined>;
  2667. /**
  2668. * The detected effective speed type.
  2669. */
  2670. effectiveType: Ref<NetworkEffectiveType | undefined>;
  2671. /**
  2672. * The estimated effective round-trip time of the current connection.
  2673. */
  2674. rtt: Ref<number | undefined>;
  2675. /**
  2676. * If the user activated data saver mode.
  2677. */
  2678. saveData: Ref<boolean | undefined>;
  2679. /**
  2680. * The detected connection/network type.
  2681. */
  2682. type: Ref<NetworkType>;
  2683. }
  2684. /**
  2685. * Reactive Network status.
  2686. *
  2687. * @see https://vueuse.org/useNetwork
  2688. * @param options
  2689. */
  2690. declare function useNetwork(options?: ConfigurableWindow): Readonly<NetworkState>;
  2691. declare type UseNetworkReturn = ReturnType<typeof useNetwork>;
  2692. interface UseNowOptions<Controls extends boolean> {
  2693. /**
  2694. * Expose more controls
  2695. *
  2696. * @default false
  2697. */
  2698. controls?: Controls;
  2699. /**
  2700. * Update interval, or use requestAnimationFrame
  2701. *
  2702. * @default requestAnimationFrame
  2703. */
  2704. interval?: 'requestAnimationFrame' | number;
  2705. }
  2706. /**
  2707. * Reactive current Date instance.
  2708. *
  2709. * @see https://vueuse.org/useNow
  2710. * @param options
  2711. */
  2712. declare function useNow(options?: UseNowOptions<false>): Ref<Date>;
  2713. declare function useNow(options: UseNowOptions<true>): {
  2714. now: Ref<Date>;
  2715. } & Pausable;
  2716. declare type UseNowReturn = ReturnType<typeof useNow>;
  2717. /**
  2718. * Reactive URL representing an object.
  2719. *
  2720. * @see https://vueuse.org/useObjectUrl
  2721. * @param object
  2722. */
  2723. declare function useObjectUrl(object: MaybeRef<Blob | MediaSource | undefined>): Readonly<vue_demi.Ref<string | undefined>>;
  2724. interface UseOffsetPaginationOptions {
  2725. /**
  2726. * Total number of items.
  2727. */
  2728. total?: MaybeRef<number>;
  2729. /**
  2730. * The number of items to display per page.
  2731. * @default 10
  2732. */
  2733. pageSize?: MaybeRef<number>;
  2734. /**
  2735. * The current page number.
  2736. * @default 1
  2737. */
  2738. page?: MaybeRef<number>;
  2739. /**
  2740. * Callback when the `page` change.
  2741. */
  2742. onPageChange?: (returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>) => unknown;
  2743. /**
  2744. * Callback when the `pageSize` change.
  2745. */
  2746. onPageSizeChange?: (returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>) => unknown;
  2747. /**
  2748. * Callback when the `pageCount` change.
  2749. */
  2750. onPageCountChange?: (returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>) => unknown;
  2751. }
  2752. interface UseOffsetPaginationReturn {
  2753. currentPage: Ref<number>;
  2754. currentPageSize: Ref<number>;
  2755. pageCount: ComputedRef<number>;
  2756. isFirstPage: ComputedRef<boolean>;
  2757. isLastPage: ComputedRef<boolean>;
  2758. prev: () => void;
  2759. next: () => void;
  2760. }
  2761. declare type UseOffsetPaginationInfinityPageReturn = Omit<UseOffsetPaginationReturn, 'isLastPage'>;
  2762. declare function useOffsetPagination(options: Omit<UseOffsetPaginationOptions, 'total'>): UseOffsetPaginationInfinityPageReturn;
  2763. declare function useOffsetPagination(options: UseOffsetPaginationOptions): UseOffsetPaginationReturn;
  2764. /**
  2765. * Reactive online state.
  2766. *
  2767. * @see https://vueuse.org/useOnline
  2768. * @param options
  2769. */
  2770. declare function useOnline(options?: ConfigurableWindow): vue.Ref<boolean>;
  2771. /**
  2772. * Reactive state to show whether mouse leaves the page.
  2773. *
  2774. * @see https://vueuse.org/usePageLeave
  2775. * @param options
  2776. */
  2777. declare function usePageLeave(options?: ConfigurableWindow): vue_demi.Ref<boolean>;
  2778. interface UseParallaxOptions extends ConfigurableWindow {
  2779. deviceOrientationTiltAdjust?: (i: number) => number;
  2780. deviceOrientationRollAdjust?: (i: number) => number;
  2781. mouseTiltAdjust?: (i: number) => number;
  2782. mouseRollAdjust?: (i: number) => number;
  2783. }
  2784. interface UseParallaxReturn {
  2785. /**
  2786. * Roll value. Scaled to `-0.5 ~ 0.5`
  2787. */
  2788. roll: ComputedRef<number>;
  2789. /**
  2790. * Tilt value. Scaled to `-0.5 ~ 0.5`
  2791. */
  2792. tilt: ComputedRef<number>;
  2793. /**
  2794. * Sensor source, can be `mouse` or `deviceOrientation`
  2795. */
  2796. source: ComputedRef<'deviceOrientation' | 'mouse'>;
  2797. }
  2798. /**
  2799. * Create parallax effect easily. It uses `useDeviceOrientation` and fallback to `useMouse`
  2800. * if orientation is not supported.
  2801. *
  2802. * @param target
  2803. * @param options
  2804. */
  2805. declare function useParallax(target: MaybeElementRef, options?: UseParallaxOptions): UseParallaxReturn;
  2806. declare type DescriptorNamePolyfill = 'accelerometer' | 'accessibility-events' | 'ambient-light-sensor' | 'background-sync' | 'camera' | 'clipboard-read' | 'clipboard-write' | 'gyroscope' | 'magnetometer' | 'microphone' | 'notifications' | 'payment-handler' | 'persistent-storage' | 'push' | 'speaker';
  2807. declare type GeneralPermissionDescriptor = PermissionDescriptor | {
  2808. name: DescriptorNamePolyfill;
  2809. };
  2810. interface UsePermissionOptions<Controls extends boolean> extends ConfigurableNavigator {
  2811. /**
  2812. * Expose more controls
  2813. *
  2814. * @default false
  2815. */
  2816. controls?: Controls;
  2817. }
  2818. declare type UsePermissionReturn = Readonly<Ref<PermissionState | undefined>>;
  2819. interface UsePermissionReturnWithControls {
  2820. state: UsePermissionReturn;
  2821. isSupported: Ref<boolean>;
  2822. query: () => Promise<PermissionStatus | undefined>;
  2823. }
  2824. /**
  2825. * Reactive Permissions API.
  2826. *
  2827. * @see https://vueuse.org/usePermission
  2828. */
  2829. declare function usePermission(permissionDesc: GeneralPermissionDescriptor | GeneralPermissionDescriptor['name'], options?: UsePermissionOptions<false>): UsePermissionReturn;
  2830. declare function usePermission(permissionDesc: GeneralPermissionDescriptor | GeneralPermissionDescriptor['name'], options: UsePermissionOptions<true>): UsePermissionReturnWithControls;
  2831. interface UsePointerState extends Position {
  2832. pressure: number;
  2833. pointerId: number;
  2834. tiltX: number;
  2835. tiltY: number;
  2836. width: number;
  2837. height: number;
  2838. twist: number;
  2839. pointerType: PointerType | null;
  2840. }
  2841. interface UsePointerOptions extends ConfigurableWindow {
  2842. /**
  2843. * Pointer types that listen to.
  2844. *
  2845. * @default ['mouse', 'touch', 'pen']
  2846. */
  2847. pointerTypes?: PointerType[];
  2848. /**
  2849. * Initial values
  2850. */
  2851. initialValue?: MaybeRef<Partial<UsePointerState>>;
  2852. /**
  2853. * @default window
  2854. */
  2855. target?: MaybeRef<EventTarget | null | undefined> | Document | Window;
  2856. }
  2857. /**
  2858. * Reactive pointer state.
  2859. *
  2860. * @see https://vueuse.org/usePointer
  2861. * @param options
  2862. */
  2863. declare function usePointer(options?: UsePointerOptions): {
  2864. isInside: Ref<boolean>;
  2865. pressure: Ref<number>;
  2866. pointerId: Ref<number>;
  2867. tiltX: Ref<number>;
  2868. tiltY: Ref<number>;
  2869. width: Ref<number>;
  2870. height: Ref<number>;
  2871. twist: Ref<number>;
  2872. pointerType: Ref<PointerType | null>;
  2873. x: Ref<number>;
  2874. y: Ref<number>;
  2875. };
  2876. declare type UsePointerReturn = ReturnType<typeof usePointer>;
  2877. declare enum SwipeDirection {
  2878. UP = "UP",
  2879. RIGHT = "RIGHT",
  2880. DOWN = "DOWN",
  2881. LEFT = "LEFT",
  2882. NONE = "NONE"
  2883. }
  2884. interface UseSwipeOptions extends ConfigurableWindow {
  2885. /**
  2886. * Register events as passive
  2887. *
  2888. * @default true
  2889. */
  2890. passive?: boolean;
  2891. /**
  2892. * @default 50
  2893. */
  2894. threshold?: number;
  2895. /**
  2896. * Callback on swipe start
  2897. */
  2898. onSwipeStart?: (e: TouchEvent) => void;
  2899. /**
  2900. * Callback on swipe moves
  2901. */
  2902. onSwipe?: (e: TouchEvent) => void;
  2903. /**
  2904. * Callback on swipe ends
  2905. */
  2906. onSwipeEnd?: (e: TouchEvent, direction: SwipeDirection) => void;
  2907. }
  2908. interface UseSwipeReturn {
  2909. isPassiveEventSupported: boolean;
  2910. isSwiping: Ref<boolean>;
  2911. direction: ComputedRef<SwipeDirection | null>;
  2912. coordsStart: Readonly<Position>;
  2913. coordsEnd: Readonly<Position>;
  2914. lengthX: ComputedRef<number>;
  2915. lengthY: ComputedRef<number>;
  2916. stop: () => void;
  2917. }
  2918. /**
  2919. * Reactive swipe detection.
  2920. *
  2921. * @see https://vueuse.org/useSwipe
  2922. * @param target
  2923. * @param options
  2924. */
  2925. declare function useSwipe(target: MaybeComputedRef<EventTarget | null | undefined>, options?: UseSwipeOptions): UseSwipeReturn;
  2926. interface UsePointerSwipeOptions {
  2927. /**
  2928. * @default 50
  2929. */
  2930. threshold?: number;
  2931. /**
  2932. * Callback on swipe start
  2933. */
  2934. onSwipeStart?: (e: PointerEvent) => void;
  2935. /**
  2936. * Callback on swipe move
  2937. */
  2938. onSwipe?: (e: PointerEvent) => void;
  2939. /**
  2940. * Callback on swipe end
  2941. */
  2942. onSwipeEnd?: (e: PointerEvent, direction: SwipeDirection) => void;
  2943. /**
  2944. * Pointer types that listen to.
  2945. *
  2946. * @default ['mouse', 'touch', 'pen']
  2947. */
  2948. pointerTypes?: PointerType[];
  2949. }
  2950. interface UsePointerSwipeReturn {
  2951. readonly isSwiping: Ref<boolean>;
  2952. direction: Readonly<Ref<SwipeDirection | null>>;
  2953. readonly posStart: Position;
  2954. readonly posEnd: Position;
  2955. distanceX: Readonly<Ref<number>>;
  2956. distanceY: Readonly<Ref<number>>;
  2957. stop: () => void;
  2958. }
  2959. /**
  2960. * Reactive swipe detection based on PointerEvents.
  2961. *
  2962. * @see https://vueuse.org/usePointerSwipe
  2963. * @param target
  2964. * @param options
  2965. */
  2966. declare function usePointerSwipe(target: MaybeComputedRef<HTMLElement | null | undefined>, options?: UsePointerSwipeOptions): UsePointerSwipeReturn;
  2967. declare type ColorSchemeType = 'dark' | 'light' | 'no-preference';
  2968. /**
  2969. * Reactive prefers-color-scheme media query.
  2970. *
  2971. * @see https://vueuse.org/usePreferredColorScheme
  2972. * @param [options]
  2973. */
  2974. declare function usePreferredColorScheme(options?: ConfigurableWindow): vue_demi.ComputedRef<ColorSchemeType>;
  2975. declare type ContrastType = 'more' | 'less' | 'custom' | 'no-preference';
  2976. /**
  2977. * Reactive prefers-contrast media query.
  2978. *
  2979. * @see https://vueuse.org/usePreferredContrast
  2980. * @param [options]
  2981. */
  2982. declare function usePreferredContrast(options?: ConfigurableWindow): vue_demi.ComputedRef<ContrastType>;
  2983. /**
  2984. * Reactive dark theme preference.
  2985. *
  2986. * @see https://vueuse.org/usePreferredDark
  2987. * @param [options]
  2988. */
  2989. declare function usePreferredDark(options?: ConfigurableWindow): vue.Ref<boolean>;
  2990. /**
  2991. * Reactive Navigator Languages.
  2992. *
  2993. * @see https://vueuse.org/usePreferredLanguages
  2994. * @param options
  2995. */
  2996. declare function usePreferredLanguages(options?: ConfigurableWindow): Ref<readonly string[]>;
  2997. declare type ReducedMotionType = 'reduce' | 'no-preference';
  2998. /**
  2999. * Reactive prefers-reduced-motion media query.
  3000. *
  3001. * @see https://vueuse.org/usePreferredReducedMotion
  3002. * @param [options]
  3003. */
  3004. declare function usePreferredReducedMotion(options?: ConfigurableWindow): vue_demi.ComputedRef<ReducedMotionType>;
  3005. interface UseRafFnOptions extends ConfigurableWindow {
  3006. /**
  3007. * Start the requestAnimationFrame loop immediately on creation
  3008. *
  3009. * @default true
  3010. */
  3011. immediate?: boolean;
  3012. }
  3013. /**
  3014. * Call function on every `requestAnimationFrame`. With controls of pausing and resuming.
  3015. *
  3016. * @see https://vueuse.org/useRafFn
  3017. * @param fn
  3018. * @param options
  3019. */
  3020. declare function useRafFn(fn: Fn, options?: UseRafFnOptions): Pausable;
  3021. /**
  3022. * Reactive screen orientation
  3023. *
  3024. * @see https://vueuse.org/useScreenOrientation
  3025. */
  3026. declare const useScreenOrientation: (options?: ConfigurableWindow) => {
  3027. isSupported: vue_demi.Ref<boolean>;
  3028. orientation: vue_demi.Ref<OrientationType | undefined>;
  3029. angle: vue_demi.Ref<number>;
  3030. lockOrientation: (type: OrientationLockType) => Promise<void>;
  3031. unlockOrientation: () => void;
  3032. };
  3033. declare type UseScreenOrientationReturn = ReturnType<typeof useScreenOrientation>;
  3034. /**
  3035. * Reactive `env(safe-area-inset-*)`
  3036. *
  3037. * @see https://vueuse.org/useScreenSafeArea
  3038. */
  3039. declare function useScreenSafeArea(): {
  3040. top: vue_demi.Ref<string>;
  3041. right: vue_demi.Ref<string>;
  3042. bottom: vue_demi.Ref<string>;
  3043. left: vue_demi.Ref<string>;
  3044. update: () => void;
  3045. };
  3046. interface UseScriptTagOptions extends ConfigurableDocument {
  3047. /**
  3048. * Load the script immediately
  3049. *
  3050. * @default true
  3051. */
  3052. immediate?: boolean;
  3053. /**
  3054. * Add `async` attribute to the script tag
  3055. *
  3056. * @default true
  3057. */
  3058. async?: boolean;
  3059. /**
  3060. * Script type
  3061. *
  3062. * @default 'text/javascript'
  3063. */
  3064. type?: string;
  3065. /**
  3066. * Manual controls the timing of loading and unloading
  3067. *
  3068. * @default false
  3069. */
  3070. manual?: boolean;
  3071. crossOrigin?: 'anonymous' | 'use-credentials';
  3072. referrerPolicy?: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
  3073. noModule?: boolean;
  3074. defer?: boolean;
  3075. /**
  3076. * Add custom attribute to the script tag
  3077. *
  3078. */
  3079. attrs?: Record<string, string>;
  3080. }
  3081. /**
  3082. * Async script tag loading.
  3083. *
  3084. * @see https://vueuse.org/useScriptTag
  3085. * @param src
  3086. * @param onLoaded
  3087. * @param options
  3088. */
  3089. declare function useScriptTag(src: MaybeComputedRef<string>, onLoaded?: (el: HTMLScriptElement) => void, options?: UseScriptTagOptions): {
  3090. scriptTag: vue_demi.Ref<HTMLScriptElement | null>;
  3091. load: (waitForScriptLoad?: boolean) => Promise<HTMLScriptElement | boolean>;
  3092. unload: () => void;
  3093. };
  3094. declare type UseScriptTagReturn = ReturnType<typeof useScriptTag>;
  3095. /**
  3096. * Lock scrolling of the element.
  3097. *
  3098. * @see https://vueuse.org/useScrollLock
  3099. * @param element
  3100. */
  3101. declare function useScrollLock(element: MaybeComputedRef<HTMLElement | SVGElement | Window | Document | null | undefined>, initialState?: boolean): vue_demi.WritableComputedRef<boolean>;
  3102. declare function useSessionStorage(key: string, initialValue: MaybeComputedRef<string>, options?: UseStorageOptions<string>): RemovableRef<string>;
  3103. declare function useSessionStorage(key: string, initialValue: MaybeComputedRef<boolean>, options?: UseStorageOptions<boolean>): RemovableRef<boolean>;
  3104. declare function useSessionStorage(key: string, initialValue: MaybeComputedRef<number>, options?: UseStorageOptions<number>): RemovableRef<number>;
  3105. declare function useSessionStorage<T>(key: string, initialValue: MaybeComputedRef<T>, options?: UseStorageOptions<T>): RemovableRef<T>;
  3106. declare function useSessionStorage<T = unknown>(key: string, initialValue: MaybeComputedRef<null>, options?: UseStorageOptions<T>): RemovableRef<T>;
  3107. interface UseShareOptions {
  3108. title?: string;
  3109. files?: File[];
  3110. text?: string;
  3111. url?: string;
  3112. }
  3113. /**
  3114. * Reactive Web Share API.
  3115. *
  3116. * @see https://vueuse.org/useShare
  3117. * @param shareOptions
  3118. * @param options
  3119. */
  3120. declare function useShare(shareOptions?: MaybeComputedRef<UseShareOptions>, options?: ConfigurableNavigator): {
  3121. isSupported: vue.Ref<boolean>;
  3122. share: (overrideOptions?: MaybeComputedRef<UseShareOptions>) => Promise<void>;
  3123. };
  3124. declare type UseShareReturn = ReturnType<typeof useShare>;
  3125. declare type UseSortedCompareFn<T = any> = (a: T, b: T) => number;
  3126. declare type UseSortedFn<T = any> = (arr: T[], compareFn: UseSortedCompareFn<T>) => T[];
  3127. interface UseSortedOptions<T = any> {
  3128. /**
  3129. * sort algorithm
  3130. */
  3131. sortFn?: UseSortedFn<T>;
  3132. /**
  3133. * compare function
  3134. */
  3135. compareFn?: UseSortedCompareFn<T>;
  3136. /**
  3137. * change the value of the source array
  3138. * @default false
  3139. */
  3140. dirty?: boolean;
  3141. }
  3142. declare function useSorted<T = any>(source: MaybeRef<T[]>, compareFn?: UseSortedCompareFn<T>): Ref<T[]>;
  3143. declare function useSorted<T = any>(source: MaybeRef<T[]>, options?: UseSortedOptions<T>): Ref<T[]>;
  3144. declare function useSorted<T = any>(source: MaybeRef<T[]>, compareFn?: UseSortedCompareFn<T>, options?: Omit<UseSortedOptions<T>, 'compareFn'>): Ref<T[]>;
  3145. declare type SpeechRecognitionErrorCode = 'aborted' | 'audio-capture' | 'bad-grammar' | 'language-not-supported' | 'network' | 'no-speech' | 'not-allowed' | 'service-not-allowed';
  3146. interface SpeechGrammar {
  3147. src: string;
  3148. weight: number;
  3149. }
  3150. interface SpeechGrammarList {
  3151. readonly length: number;
  3152. addFromString(string: string, weight?: number): void;
  3153. addFromURI(src: string, weight?: number): void;
  3154. item(index: number): SpeechGrammar;
  3155. [index: number]: SpeechGrammar;
  3156. }
  3157. interface SpeechRecognitionErrorEvent extends Event {
  3158. readonly error: SpeechRecognitionErrorCode;
  3159. readonly message: string;
  3160. }
  3161. interface SpeechRecognitionEvent extends Event {
  3162. readonly resultIndex: number;
  3163. readonly results: SpeechRecognitionResultList;
  3164. }
  3165. interface SpeechRecognitionEventMap {
  3166. 'audioend': Event;
  3167. 'audiostart': Event;
  3168. 'end': Event;
  3169. 'error': SpeechRecognitionErrorEvent;
  3170. 'nomatch': SpeechRecognitionEvent;
  3171. 'result': SpeechRecognitionEvent;
  3172. 'soundend': Event;
  3173. 'soundstart': Event;
  3174. 'speechend': Event;
  3175. 'speechstart': Event;
  3176. 'start': Event;
  3177. }
  3178. interface SpeechRecognition extends EventTarget {
  3179. continuous: boolean;
  3180. grammars: SpeechGrammarList;
  3181. interimResults: boolean;
  3182. lang: string;
  3183. maxAlternatives: number;
  3184. onaudioend: ((this: SpeechRecognition, ev: Event) => any) | null;
  3185. onaudiostart: ((this: SpeechRecognition, ev: Event) => any) | null;
  3186. onend: ((this: SpeechRecognition, ev: Event) => any) | null;
  3187. onerror: ((this: SpeechRecognition, ev: SpeechRecognitionErrorEvent) => any) | null;
  3188. onnomatch: ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => any) | null;
  3189. onresult: ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => any) | null;
  3190. onsoundend: ((this: SpeechRecognition, ev: Event) => any) | null;
  3191. onsoundstart: ((this: SpeechRecognition, ev: Event) => any) | null;
  3192. onspeechend: ((this: SpeechRecognition, ev: Event) => any) | null;
  3193. onspeechstart: ((this: SpeechRecognition, ev: Event) => any) | null;
  3194. onstart: ((this: SpeechRecognition, ev: Event) => any) | null;
  3195. abort(): void;
  3196. start(): void;
  3197. stop(): void;
  3198. addEventListener<K extends keyof SpeechRecognitionEventMap>(type: K, listener: (this: SpeechRecognition, ev: SpeechRecognitionEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  3199. addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  3200. removeEventListener<K extends keyof SpeechRecognitionEventMap>(type: K, listener: (this: SpeechRecognition, ev: SpeechRecognitionEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  3201. removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
  3202. }
  3203. interface UseSpeechRecognitionOptions extends ConfigurableWindow {
  3204. /**
  3205. * Controls whether continuous results are returned for each recognition, or only a single result.
  3206. *
  3207. * @default true
  3208. */
  3209. continuous?: boolean;
  3210. /**
  3211. * Controls whether interim results should be returned (true) or not (false.) Interim results are results that are not yet final
  3212. *
  3213. * @default true
  3214. */
  3215. interimResults?: boolean;
  3216. /**
  3217. * Language for SpeechRecognition
  3218. *
  3219. * @default 'en-US'
  3220. */
  3221. lang?: MaybeComputedRef<string>;
  3222. }
  3223. /**
  3224. * Reactive SpeechRecognition.
  3225. *
  3226. * @see https://vueuse.org/useSpeechRecognition
  3227. * @see https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition SpeechRecognition
  3228. * @param options
  3229. */
  3230. declare function useSpeechRecognition(options?: UseSpeechRecognitionOptions): {
  3231. isSupported: Ref<boolean>;
  3232. isListening: Ref<boolean>;
  3233. isFinal: Ref<boolean>;
  3234. recognition: SpeechRecognition | undefined;
  3235. result: Ref<string>;
  3236. error: Ref<SpeechRecognitionErrorEvent | undefined>;
  3237. toggle: (value?: boolean) => void;
  3238. start: () => void;
  3239. stop: () => void;
  3240. };
  3241. declare type UseSpeechRecognitionReturn = ReturnType<typeof useSpeechRecognition>;
  3242. declare type UseSpeechSynthesisStatus = 'init' | 'play' | 'pause' | 'end';
  3243. interface UseSpeechSynthesisOptions extends ConfigurableWindow {
  3244. /**
  3245. * Language for SpeechSynthesis
  3246. *
  3247. * @default 'en-US'
  3248. */
  3249. lang?: MaybeComputedRef<string>;
  3250. /**
  3251. * Gets and sets the pitch at which the utterance will be spoken at.
  3252. *
  3253. * @default 1
  3254. */
  3255. pitch?: SpeechSynthesisUtterance['pitch'];
  3256. /**
  3257. * Gets and sets the speed at which the utterance will be spoken at.
  3258. *
  3259. * @default 1
  3260. */
  3261. rate?: SpeechSynthesisUtterance['rate'];
  3262. /**
  3263. * Gets and sets the voice that will be used to speak the utterance.
  3264. */
  3265. voice?: MaybeRef<SpeechSynthesisVoice>;
  3266. /**
  3267. * Gets and sets the volume that the utterance will be spoken at.
  3268. *
  3269. * @default 1
  3270. */
  3271. volume?: SpeechSynthesisUtterance['volume'];
  3272. }
  3273. /**
  3274. * Reactive SpeechSynthesis.
  3275. *
  3276. * @see https://vueuse.org/useSpeechSynthesis
  3277. * @see https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis SpeechSynthesis
  3278. * @param options
  3279. */
  3280. declare function useSpeechSynthesis(text: MaybeComputedRef<string>, options?: UseSpeechSynthesisOptions): {
  3281. isSupported: Ref<boolean>;
  3282. isPlaying: Ref<boolean>;
  3283. status: Ref<UseSpeechSynthesisStatus>;
  3284. utterance: vue_demi.ComputedRef<SpeechSynthesisUtterance>;
  3285. error: Ref<SpeechSynthesisErrorEvent | undefined>;
  3286. toggle: (value?: boolean) => void;
  3287. speak: () => void;
  3288. };
  3289. declare type UseSpeechSynthesisReturn = ReturnType<typeof useSpeechSynthesis>;
  3290. interface UseStepperReturn<StepName, Steps, Step> {
  3291. /** List of steps. */
  3292. steps: Readonly<Ref<Steps>>;
  3293. /** List of step names. */
  3294. stepNames: Readonly<Ref<StepName[]>>;
  3295. /** Index of the current step. */
  3296. index: Ref<number>;
  3297. /** Current step. */
  3298. current: ComputedRef<Step>;
  3299. /** Next step, or undefined if the current step is the last one. */
  3300. next: ComputedRef<StepName | undefined>;
  3301. /** Previous step, or undefined if the current step is the first one. */
  3302. previous: ComputedRef<StepName | undefined>;
  3303. /** Whether the current step is the first one. */
  3304. isFirst: ComputedRef<boolean>;
  3305. /** Whether the current step is the last one. */
  3306. isLast: ComputedRef<boolean>;
  3307. /** Get the step at the specified index. */
  3308. at: (index: number) => Step | undefined;
  3309. /** Get a step by the specified name. */
  3310. get: (step: StepName) => Step | undefined;
  3311. /** Go to the specified step. */
  3312. goTo: (step: StepName) => void;
  3313. /** Go to the next step. Does nothing if the current step is the last one. */
  3314. goToNext: () => void;
  3315. /** Go to the previous step. Does nothing if the current step is the previous one. */
  3316. goToPrevious: () => void;
  3317. /** Go back to the given step, only if the current step is after. */
  3318. goBackTo: (step: StepName) => void;
  3319. /** Checks whether the given step is the next step. */
  3320. isNext: (step: StepName) => boolean;
  3321. /** Checks whether the given step is the previous step. */
  3322. isPrevious: (step: StepName) => boolean;
  3323. /** Checks whether the given step is the current step. */
  3324. isCurrent: (step: StepName) => boolean;
  3325. /** Checks if the current step is before the given step. */
  3326. isBefore: (step: StepName) => boolean;
  3327. /** Checks if the current step is after the given step. */
  3328. isAfter: (step: StepName) => boolean;
  3329. }
  3330. declare function useStepper<T extends string | number>(steps: MaybeRef<T[]>, initialStep?: T): UseStepperReturn<T, T[], T>;
  3331. declare function useStepper<T extends Record<string, any>>(steps: MaybeRef<T>, initialStep?: keyof T): UseStepperReturn<Exclude<keyof T, symbol>, T, T[keyof T]>;
  3332. interface UseStorageAsyncOptions<T> extends Omit<UseStorageOptions<T>, 'serializer'> {
  3333. /**
  3334. * Custom data serialization
  3335. */
  3336. serializer?: SerializerAsync<T>;
  3337. }
  3338. declare function useStorageAsync(key: string, initialValue: MaybeComputedRef<string>, storage?: StorageLikeAsync, options?: UseStorageAsyncOptions<string>): RemovableRef<string>;
  3339. declare function useStorageAsync(key: string, initialValue: MaybeComputedRef<boolean>, storage?: StorageLikeAsync, options?: UseStorageAsyncOptions<boolean>): RemovableRef<boolean>;
  3340. declare function useStorageAsync(key: string, initialValue: MaybeComputedRef<number>, storage?: StorageLikeAsync, options?: UseStorageAsyncOptions<number>): RemovableRef<number>;
  3341. declare function useStorageAsync<T>(key: string, initialValue: MaybeComputedRef<T>, storage?: StorageLikeAsync, options?: UseStorageAsyncOptions<T>): RemovableRef<T>;
  3342. declare function useStorageAsync<T = unknown>(key: string, initialValue: MaybeComputedRef<null>, storage?: StorageLikeAsync, options?: UseStorageAsyncOptions<T>): RemovableRef<T>;
  3343. interface UseStyleTagOptions extends ConfigurableDocument {
  3344. /**
  3345. * Media query for styles to apply
  3346. */
  3347. media?: string;
  3348. /**
  3349. * Load the style immediately
  3350. *
  3351. * @default true
  3352. */
  3353. immediate?: boolean;
  3354. /**
  3355. * Manual controls the timing of loading and unloading
  3356. *
  3357. * @default false
  3358. */
  3359. manual?: boolean;
  3360. /**
  3361. * DOM id of the style tag
  3362. *
  3363. * @default auto-incremented
  3364. */
  3365. id?: string;
  3366. }
  3367. interface UseStyleTagReturn {
  3368. id: string;
  3369. css: Ref<string>;
  3370. load: () => void;
  3371. unload: () => void;
  3372. isLoaded: Readonly<Ref<boolean>>;
  3373. }
  3374. /**
  3375. * Inject <style> element in head.
  3376. *
  3377. * Overload: Omitted id
  3378. *
  3379. * @see https://vueuse.org/useStyleTag
  3380. * @param css
  3381. * @param options
  3382. */
  3383. declare function useStyleTag(css: MaybeRef<string>, options?: UseStyleTagOptions): UseStyleTagReturn;
  3384. declare function useSupported(callback: () => unknown, sync?: boolean): Ref<boolean>;
  3385. declare type TemplateRefsList<T> = T[] & {
  3386. set(el: Object | null): void;
  3387. };
  3388. declare function useTemplateRefsList<T = Element>(): Readonly<Ref<Readonly<TemplateRefsList<T>>>>;
  3389. declare type UseTextDirectionValue = 'ltr' | 'rtl' | 'auto';
  3390. interface UseTextDirectionOptions extends ConfigurableDocument {
  3391. /**
  3392. * CSS Selector for the target element applying to
  3393. *
  3394. * @default 'html'
  3395. */
  3396. selector?: string;
  3397. /**
  3398. * Observe `document.querySelector(selector)` changes using MutationObserve
  3399. *
  3400. * @default false
  3401. */
  3402. observe?: boolean;
  3403. /**
  3404. * Initial value
  3405. *
  3406. * @default 'ltr'
  3407. */
  3408. initialValue?: UseTextDirectionValue;
  3409. }
  3410. /**
  3411. * Reactive dir of the element's text.
  3412. *
  3413. * @see https://vueuse.org/useTextDirection
  3414. */
  3415. declare function useTextDirection(options?: UseTextDirectionOptions): vue_demi.WritableComputedRef<UseTextDirectionValue>;
  3416. /**
  3417. * Reactively track user text selection based on [`Window.getSelection`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection).
  3418. *
  3419. * @see https://vueuse.org/useTextSelection
  3420. */
  3421. declare function useTextSelection(options?: ConfigurableWindow): {
  3422. text: vue_demi.ComputedRef<string>;
  3423. rects: vue_demi.ComputedRef<DOMRect[]>;
  3424. ranges: vue_demi.ComputedRef<Range[]>;
  3425. selection: vue_demi.Ref<{
  3426. readonly anchorNode: Node | null;
  3427. readonly anchorOffset: number;
  3428. readonly focusNode: Node | null;
  3429. readonly focusOffset: number;
  3430. readonly isCollapsed: boolean;
  3431. readonly rangeCount: number;
  3432. readonly type: string;
  3433. addRange: (range: Range) => void;
  3434. collapse: (node: Node | null, offset?: number | undefined) => void;
  3435. collapseToEnd: () => void;
  3436. collapseToStart: () => void;
  3437. containsNode: (node: Node, allowPartialContainment?: boolean | undefined) => boolean;
  3438. deleteFromDocument: () => void;
  3439. empty: () => void;
  3440. extend: (node: Node, offset?: number | undefined) => void;
  3441. getRangeAt: (index: number) => Range;
  3442. removeAllRanges: () => void;
  3443. removeRange: (range: Range) => void;
  3444. selectAllChildren: (node: Node) => void;
  3445. setBaseAndExtent: (anchorNode: Node, anchorOffset: number, focusNode: Node, focusOffset: number) => void;
  3446. setPosition: (node: Node | null, offset?: number | undefined) => void;
  3447. toString: () => string;
  3448. } | null>;
  3449. };
  3450. declare type UseTextSelectionReturn = ReturnType<typeof useTextSelection>;
  3451. interface UseTextareaAutosizeOptions {
  3452. /** Textarea element to autosize. */
  3453. element?: MaybeRef<HTMLTextAreaElement | undefined>;
  3454. /** Textarea content. */
  3455. input?: MaybeRef<string | undefined>;
  3456. /** Watch sources that should trigger a textarea resize. */
  3457. watch?: WatchSource | Array<WatchSource>;
  3458. /** Function called when the textarea size changes. */
  3459. onResize?: () => void;
  3460. }
  3461. declare function useTextareaAutosize(options?: UseTextareaAutosizeOptions): {
  3462. textarea: vue_demi.Ref<HTMLTextAreaElement>;
  3463. input: vue_demi.Ref<string>;
  3464. triggerResize: () => void;
  3465. };
  3466. declare type UseTextareaAutosizeReturn = ReturnType<typeof useTextareaAutosize>;
  3467. declare type UseThrottledRefHistoryOptions<Raw, Serialized = Raw> = Omit<UseRefHistoryOptions<Raw, Serialized>, 'eventFilter'> & {
  3468. throttle?: MaybeRef<number>;
  3469. trailing?: boolean;
  3470. };
  3471. declare type UseThrottledRefHistoryReturn<Raw, Serialized = Raw> = UseRefHistoryReturn<Raw, Serialized>;
  3472. /**
  3473. * Shorthand for [useRefHistory](https://vueuse.org/useRefHistory) with throttled filter.
  3474. *
  3475. * @see https://vueuse.org/useThrottledRefHistory
  3476. * @param source
  3477. * @param options
  3478. */
  3479. declare function useThrottledRefHistory<Raw, Serialized = Raw>(source: Ref<Raw>, options?: UseThrottledRefHistoryOptions<Raw, Serialized>): UseThrottledRefHistoryReturn<Raw, Serialized>;
  3480. declare type UseTimeAgoFormatter<T = number> = (value: T, isPast: boolean) => string;
  3481. interface UseTimeAgoMessages {
  3482. justNow: string;
  3483. past: string | UseTimeAgoFormatter<string>;
  3484. future: string | UseTimeAgoFormatter<string>;
  3485. year: string | UseTimeAgoFormatter<number>;
  3486. month: string | UseTimeAgoFormatter<number>;
  3487. day: string | UseTimeAgoFormatter<number>;
  3488. week: string | UseTimeAgoFormatter<number>;
  3489. hour: string | UseTimeAgoFormatter<number>;
  3490. minute: string | UseTimeAgoFormatter<number>;
  3491. second: string | UseTimeAgoFormatter<number>;
  3492. }
  3493. interface UseTimeAgoOptions<Controls extends boolean> {
  3494. /**
  3495. * Expose more controls
  3496. *
  3497. * @default false
  3498. */
  3499. controls?: Controls;
  3500. /**
  3501. * Intervals to update, set 0 to disable auto update
  3502. *
  3503. * @default 30_000
  3504. */
  3505. updateInterval?: number;
  3506. /**
  3507. * Maximum unit (of diff in milliseconds) to display the full date instead of relative
  3508. *
  3509. * @default undefined
  3510. */
  3511. max?: 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year' | number;
  3512. /**
  3513. * Formatter for full date
  3514. */
  3515. fullDateFormatter?: (date: Date) => string;
  3516. /**
  3517. * Messages for formatting the string
  3518. */
  3519. messages?: UseTimeAgoMessages;
  3520. /**
  3521. * Minimum display time unit (default is minute)
  3522. *
  3523. * @default false
  3524. */
  3525. showSecond?: boolean;
  3526. }
  3527. declare type UseTimeAgoReturn<Controls extends boolean = false> = Controls extends true ? {
  3528. timeAgo: ComputedRef<string>;
  3529. } & Pausable : ComputedRef<string>;
  3530. /**
  3531. * Reactive time ago formatter.
  3532. *
  3533. * @see https://vueuse.org/useTimeAgo
  3534. * @param options
  3535. */
  3536. declare function useTimeAgo(time: MaybeComputedRef<Date | number | string>, options?: UseTimeAgoOptions<false>): UseTimeAgoReturn<false>;
  3537. declare function useTimeAgo(time: MaybeComputedRef<Date | number | string>, options: UseTimeAgoOptions<true>): UseTimeAgoReturn<true>;
  3538. declare function useTimeoutPoll(fn: () => Awaitable<void>, interval: MaybeComputedRef<number>, timeoutPollOptions?: UseTimeoutFnOptions): Pausable;
  3539. interface UseTimestampOptions<Controls extends boolean> {
  3540. /**
  3541. * Expose more controls
  3542. *
  3543. * @default false
  3544. */
  3545. controls?: Controls;
  3546. /**
  3547. * Offset value adding to the value
  3548. *
  3549. * @default 0
  3550. */
  3551. offset?: number;
  3552. /**
  3553. * Update the timestamp immediately
  3554. *
  3555. * @default true
  3556. */
  3557. immediate?: boolean;
  3558. /**
  3559. * Update interval, or use requestAnimationFrame
  3560. *
  3561. * @default requestAnimationFrame
  3562. */
  3563. interval?: 'requestAnimationFrame' | number;
  3564. /**
  3565. * Callback on each update
  3566. */
  3567. callback?: (timestamp: number) => void;
  3568. }
  3569. /**
  3570. * Reactive current timestamp.
  3571. *
  3572. * @see https://vueuse.org/useTimestamp
  3573. * @param options
  3574. */
  3575. declare function useTimestamp(options?: UseTimestampOptions<false>): Ref<number>;
  3576. declare function useTimestamp(options: UseTimestampOptions<true>): {
  3577. timestamp: Ref<number>;
  3578. } & Pausable;
  3579. declare type UseTimestampReturn = ReturnType<typeof useTimestamp>;
  3580. declare type UseTitleOptionsBase = {
  3581. /**
  3582. * Observe `document.title` changes using MutationObserve
  3583. * Cannot be used together with `titleTemplate` option.
  3584. *
  3585. * @default false
  3586. */
  3587. observe?: boolean;
  3588. } | {
  3589. /**
  3590. * The template string to parse the title (e.g., '%s | My Website')
  3591. * Cannot be used together with `observe` option.
  3592. *
  3593. * @default '%s'
  3594. */
  3595. titleTemplate?: MaybeRef<string> | ((title: string) => string);
  3596. };
  3597. declare type UseTitleOptions = ConfigurableDocument & UseTitleOptionsBase;
  3598. declare function useTitle(newTitle: MaybeReadonlyRef<string | null | undefined>, options?: UseTitleOptions): ComputedRef<string | null | undefined>;
  3599. declare function useTitle(newTitle?: MaybeRef<string | null | undefined>, options?: UseTitleOptions): Ref<string | null | undefined>;
  3600. declare type UseTitleReturn = ReturnType<typeof useTitle>;
  3601. /**
  3602. * Cubic bezier points
  3603. */
  3604. declare type CubicBezierPoints = [number, number, number, number];
  3605. /**
  3606. * Easing function
  3607. */
  3608. declare type EasingFunction = (n: number) => number;
  3609. /**
  3610. * Transition options
  3611. */
  3612. interface UseTransitionOptions {
  3613. /**
  3614. * Milliseconds to wait before starting transition
  3615. */
  3616. delay?: MaybeRef<number>;
  3617. /**
  3618. * Disables the transition
  3619. */
  3620. disabled?: MaybeRef<boolean>;
  3621. /**
  3622. * Transition duration in milliseconds
  3623. */
  3624. duration?: MaybeRef<number>;
  3625. /**
  3626. * Callback to execute after transition finishes
  3627. */
  3628. onFinished?: () => void;
  3629. /**
  3630. * Callback to execute after transition starts
  3631. */
  3632. onStarted?: () => void;
  3633. /**
  3634. * Easing function or cubic bezier points for calculating transition values
  3635. */
  3636. transition?: MaybeRef<EasingFunction | CubicBezierPoints>;
  3637. }
  3638. /**
  3639. * Common transitions
  3640. *
  3641. * @see https://easings.net
  3642. */
  3643. declare const TransitionPresets: Record<"easeInSine" | "easeOutSine" | "easeInOutSine" | "easeInQuad" | "easeOutQuad" | "easeInOutQuad" | "easeInCubic" | "easeOutCubic" | "easeInOutCubic" | "easeInQuart" | "easeOutQuart" | "easeInOutQuart" | "easeInQuint" | "easeOutQuint" | "easeInOutQuint" | "easeInExpo" | "easeOutExpo" | "easeInOutExpo" | "easeInCirc" | "easeOutCirc" | "easeInOutCirc" | "easeInBack" | "easeOutBack" | "easeInOutBack", CubicBezierPoints> & {
  3644. linear: EasingFunction;
  3645. };
  3646. declare function useTransition(source: Ref<number>, options?: UseTransitionOptions): ComputedRef<number>;
  3647. declare function useTransition<T extends MaybeRef<number>[]>(source: [...T], options?: UseTransitionOptions): ComputedRef<{
  3648. [K in keyof T]: number;
  3649. }>;
  3650. declare function useTransition<T extends Ref<number[]>>(source: T, options?: UseTransitionOptions): ComputedRef<number[]>;
  3651. declare type UrlParams = Record<string, string[] | string>;
  3652. interface UseUrlSearchParamsOptions<T> extends ConfigurableWindow {
  3653. /**
  3654. * @default true
  3655. */
  3656. removeNullishValues?: boolean;
  3657. /**
  3658. * @default false
  3659. */
  3660. removeFalsyValues?: boolean;
  3661. /**
  3662. * @default {}
  3663. */
  3664. initialValue?: T;
  3665. /**
  3666. * Write back to `window.history` automatically
  3667. *
  3668. * @default true
  3669. */
  3670. write?: boolean;
  3671. }
  3672. /**
  3673. * Reactive URLSearchParams
  3674. *
  3675. * @see https://vueuse.org/useUrlSearchParams
  3676. * @param mode
  3677. * @param options
  3678. */
  3679. declare function useUrlSearchParams<T extends Record<string, any> = UrlParams>(mode?: 'history' | 'hash' | 'hash-params', options?: UseUrlSearchParamsOptions<T>): T;
  3680. interface UseUserMediaOptions extends ConfigurableNavigator {
  3681. /**
  3682. * If the stream is enabled
  3683. * @default false
  3684. */
  3685. enabled?: MaybeRef<boolean>;
  3686. /**
  3687. * Recreate stream when the input devices id changed
  3688. *
  3689. * @default true
  3690. */
  3691. autoSwitch?: MaybeRef<boolean>;
  3692. /**
  3693. * The device id of video input
  3694. *
  3695. * When passing with `undefined` the default device will be used.
  3696. * Pass `false` or "none" to disabled video input
  3697. *
  3698. * @default undefined
  3699. */
  3700. videoDeviceId?: MaybeRef<string | undefined | false | 'none'>;
  3701. /**
  3702. * The device id of audi input
  3703. *
  3704. * When passing with `undefined` the default device will be used.
  3705. * Pass `false` or "none" to disabled audi input
  3706. *
  3707. * @default undefined
  3708. */
  3709. audioDeviceId?: MaybeRef<string | undefined | false | 'none'>;
  3710. }
  3711. /**
  3712. * Reactive `mediaDevices.getUserMedia` streaming
  3713. *
  3714. * @see https://vueuse.org/useUserMedia
  3715. * @param options
  3716. */
  3717. declare function useUserMedia(options?: UseUserMediaOptions): {
  3718. isSupported: Ref<boolean>;
  3719. stream: Ref<MediaStream | undefined>;
  3720. start: () => Promise<MediaStream | undefined>;
  3721. stop: () => void;
  3722. restart: () => Promise<MediaStream | undefined>;
  3723. videoDeviceId: Ref<string | false | undefined>;
  3724. audioDeviceId: Ref<string | false | undefined>;
  3725. enabled: Ref<boolean>;
  3726. autoSwitch: Ref<boolean>;
  3727. };
  3728. declare type UseUserMediaReturn = ReturnType<typeof useUserMedia>;
  3729. interface UseVModelOptions<T> {
  3730. /**
  3731. * When passive is set to `true`, it will use `watch` to sync with props and ref.
  3732. * Instead of relying on the `v-model` or `.sync` to work.
  3733. *
  3734. * @default false
  3735. */
  3736. passive?: boolean;
  3737. /**
  3738. * When eventName is set, it's value will be used to overwrite the emit event name.
  3739. *
  3740. * @default undefined
  3741. */
  3742. eventName?: string;
  3743. /**
  3744. * Attempting to check for changes of properties in a deeply nested object or array.
  3745. * Apply only when `passive` option is set to `true`
  3746. *
  3747. * @default false
  3748. */
  3749. deep?: boolean;
  3750. /**
  3751. * Defining default value for return ref when no value is passed.
  3752. *
  3753. * @default undefined
  3754. */
  3755. defaultValue?: T;
  3756. /**
  3757. * Clone the props.
  3758. * Accepts a custom clone function.
  3759. * When setting to `true`, it will use `JSON.parse(JSON.stringify(value))` to clone.
  3760. *
  3761. * @default false
  3762. */
  3763. clone?: boolean | CloneFn<T>;
  3764. }
  3765. /**
  3766. * Shorthand for v-model binding, props + emit -> ref
  3767. *
  3768. * @see https://vueuse.org/useVModel
  3769. * @param props
  3770. * @param key (default 'value' in Vue 2 and 'modelValue' in Vue 3)
  3771. * @param emit
  3772. */
  3773. declare function useVModel<P extends object, K extends keyof P, Name extends string>(props: P, key?: K, emit?: (name: Name, ...args: any[]) => void, options?: UseVModelOptions<P[K]>): vue_demi.Ref<UnwrapRef<P[K]>> | vue_demi.WritableComputedRef<P[K]>;
  3774. /**
  3775. * Shorthand for props v-model binding. Think like `toRefs(props)` but changes will also emit out.
  3776. *
  3777. * @see https://vueuse.org/useVModels
  3778. * @param props
  3779. * @param emit
  3780. */
  3781. declare function useVModels<P extends object, Name extends string>(props: P, emit?: (name: Name, ...args: any[]) => void, options?: UseVModelOptions<any>): ToRefs<P>;
  3782. interface UseVibrateOptions extends ConfigurableNavigator {
  3783. /**
  3784. *
  3785. * Vibration Pattern
  3786. *
  3787. * An array of values describes alternating periods in which the
  3788. * device is vibrating and not vibrating. Each value in the array
  3789. * is converted to an integer, then interpreted alternately as
  3790. * the number of milliseconds the device should vibrate and the
  3791. * number of milliseconds it should not be vibrating
  3792. *
  3793. * @default []
  3794. *
  3795. */
  3796. pattern?: MaybeComputedRef<number[] | number>;
  3797. /**
  3798. * Interval to run a persistent vibration, in ms
  3799. *
  3800. * Pass `0` to disable
  3801. *
  3802. * @default 0
  3803. *
  3804. */
  3805. interval?: number;
  3806. }
  3807. /**
  3808. * Reactive vibrate
  3809. *
  3810. * @see https://vueuse.org/useVibrate
  3811. * @see https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API
  3812. * @param options
  3813. */
  3814. declare function useVibrate(options?: UseVibrateOptions): {
  3815. isSupported: vue.Ref<boolean>;
  3816. pattern: MaybeComputedRef<number | number[]>;
  3817. intervalControls: Pausable | undefined;
  3818. vibrate: (pattern?: number | number[]) => void;
  3819. stop: () => void;
  3820. };
  3821. declare type UseVibrateReturn = ReturnType<typeof useVibrate>;
  3822. interface UseVirtualListOptions {
  3823. /**
  3824. * item height, accept a pixel value or a function that returns the height
  3825. *
  3826. * @default 0
  3827. */
  3828. itemHeight: number | ((index: number) => number);
  3829. /**
  3830. * the extra buffer items outside of the view area
  3831. *
  3832. * @default 5
  3833. */
  3834. overscan?: number;
  3835. }
  3836. interface UseVirtualListItem<T> {
  3837. data: T;
  3838. index: number;
  3839. }
  3840. interface UseVirtualListReturn<T> {
  3841. list: Ref<UseVirtualListItem<T>[]>;
  3842. scrollTo: (index: number) => void;
  3843. containerProps: {
  3844. ref: Ref<HTMLElement | null>;
  3845. onScroll: () => void;
  3846. style: Partial<CSSStyleDeclaration>;
  3847. };
  3848. wrapperProps: ComputedRef<{
  3849. style: {
  3850. width: string;
  3851. height: string;
  3852. marginTop: string;
  3853. };
  3854. }>;
  3855. }
  3856. declare function useVirtualList<T = any>(list: MaybeRef<T[]>, options: UseVirtualListOptions): UseVirtualListReturn<T>;
  3857. declare type WakeLockType = 'screen';
  3858. interface WakeLockSentinel extends EventTarget {
  3859. type: WakeLockType;
  3860. released: boolean;
  3861. release: () => Promise<void>;
  3862. }
  3863. declare type UseWakeLockOptions = ConfigurableNavigator & ConfigurableDocument;
  3864. /**
  3865. * Reactive Screen Wake Lock API.
  3866. *
  3867. * @see https://vueuse.org/useWakeLock
  3868. * @param options
  3869. */
  3870. declare const useWakeLock: (options?: UseWakeLockOptions) => {
  3871. isSupported: vue_demi.Ref<boolean>;
  3872. isActive: vue_demi.Ref<boolean>;
  3873. request: (type: WakeLockType) => Promise<void>;
  3874. release: () => Promise<void>;
  3875. };
  3876. declare type UseWakeLockReturn = ReturnType<typeof useWakeLock>;
  3877. interface WebNotificationOptions {
  3878. /**
  3879. * The title read-only property of the Notification interface indicates
  3880. * the title of the notification
  3881. *
  3882. * @default ''
  3883. */
  3884. title?: string;
  3885. /**
  3886. * The body string of the notification as specified in the constructor's
  3887. * options parameter.
  3888. *
  3889. * @default ''
  3890. */
  3891. body?: string;
  3892. /**
  3893. * The text direction of the notification as specified in the constructor's
  3894. * options parameter.
  3895. *
  3896. * @default ''
  3897. */
  3898. dir?: 'auto' | 'ltr' | 'rtl';
  3899. /**
  3900. * The language code of the notification as specified in the constructor's
  3901. * options parameter.
  3902. *
  3903. * @default DOMString
  3904. */
  3905. lang?: string;
  3906. /**
  3907. * The ID of the notification(if any) as specified in the constructor's options
  3908. * parameter.
  3909. *
  3910. * @default ''
  3911. */
  3912. tag?: string;
  3913. /**
  3914. * The URL of the image used as an icon of the notification as specified
  3915. * in the constructor's options parameter.
  3916. *
  3917. * @default ''
  3918. */
  3919. icon?: string;
  3920. /**
  3921. * Specifies whether the user should be notified after a new notification
  3922. * replaces an old one.
  3923. *
  3924. * @default false
  3925. */
  3926. renotify?: boolean;
  3927. /**
  3928. * A boolean value indicating that a notification should remain active until the
  3929. * user clicks or dismisses it, rather than closing automatically.
  3930. *
  3931. * @default false
  3932. */
  3933. requireInteraction?: boolean;
  3934. /**
  3935. * The silent read-only property of the Notification interface specifies
  3936. * whether the notification should be silent, i.e., no sounds or vibrations
  3937. * should be issued, regardless of the device settings.
  3938. *
  3939. * @default false
  3940. */
  3941. silent?: boolean;
  3942. /**
  3943. * Specifies a vibration pattern for devices with vibration hardware to emit.
  3944. * A vibration pattern, as specified in the Vibration API spec
  3945. *
  3946. * @see https://w3c.github.io/vibration/
  3947. */
  3948. vibrate?: number[];
  3949. }
  3950. interface UseWebNotificationOptions extends WebNotificationOptions, ConfigurableWindow {
  3951. }
  3952. /**
  3953. * Reactive useWebNotification
  3954. *
  3955. * @see https://vueuse.org/useWebNotification
  3956. * @see https://developer.mozilla.org/en-US/docs/Web/API/notification
  3957. * @param title
  3958. * @param defaultOptions of type WebNotificationOptions
  3959. * @param methods of type WebNotificationMethods
  3960. */
  3961. declare const useWebNotification: (defaultOptions?: UseWebNotificationOptions) => {
  3962. isSupported: Ref<boolean>;
  3963. notification: Ref<Notification | null>;
  3964. show: (overrides?: WebNotificationOptions) => Promise<Notification | undefined>;
  3965. close: () => void;
  3966. onClick: EventHook<any>;
  3967. onShow: EventHook<any>;
  3968. onError: EventHook<any>;
  3969. onClose: EventHook<any>;
  3970. };
  3971. declare type UseWebNotificationReturn = ReturnType<typeof useWebNotification>;
  3972. declare type WebSocketStatus = 'OPEN' | 'CONNECTING' | 'CLOSED';
  3973. interface UseWebSocketOptions {
  3974. onConnected?: (ws: WebSocket) => void;
  3975. onDisconnected?: (ws: WebSocket, event: CloseEvent) => void;
  3976. onError?: (ws: WebSocket, event: Event) => void;
  3977. onMessage?: (ws: WebSocket, event: MessageEvent) => void;
  3978. /**
  3979. * Send heartbeat for every x milliseconds passed
  3980. *
  3981. * @default false
  3982. */
  3983. heartbeat?: boolean | {
  3984. /**
  3985. * Message for the heartbeat
  3986. *
  3987. * @default 'ping'
  3988. */
  3989. message?: string | ArrayBuffer | Blob;
  3990. /**
  3991. * Interval, in milliseconds
  3992. *
  3993. * @default 1000
  3994. */
  3995. interval?: number;
  3996. /**
  3997. * Heartbeat response timeout, in milliseconds
  3998. *
  3999. * @default 1000
  4000. */
  4001. pongTimeout?: number;
  4002. };
  4003. /**
  4004. * Enabled auto reconnect
  4005. *
  4006. * @default false
  4007. */
  4008. autoReconnect?: boolean | {
  4009. /**
  4010. * Maximum retry times.
  4011. *
  4012. * Or you can pass a predicate function (which returns true if you want to retry).
  4013. *
  4014. * @default -1
  4015. */
  4016. retries?: number | (() => boolean);
  4017. /**
  4018. * Delay for reconnect, in milliseconds
  4019. *
  4020. * @default 1000
  4021. */
  4022. delay?: number;
  4023. /**
  4024. * On maximum retry times reached.
  4025. */
  4026. onFailed?: Fn;
  4027. };
  4028. /**
  4029. * Automatically open a connection
  4030. *
  4031. * @default true
  4032. */
  4033. immediate?: boolean;
  4034. /**
  4035. * Automatically close a connection
  4036. *
  4037. * @default true
  4038. */
  4039. autoClose?: boolean;
  4040. /**
  4041. * List of one or more sub-protocol strings
  4042. *
  4043. * @default []
  4044. */
  4045. protocols?: string[];
  4046. }
  4047. interface UseWebSocketReturn<T> {
  4048. /**
  4049. * Reference to the latest data received via the websocket,
  4050. * can be watched to respond to incoming messages
  4051. */
  4052. data: Ref<T | null>;
  4053. /**
  4054. * The current websocket status, can be only one of:
  4055. * 'OPEN', 'CONNECTING', 'CLOSED'
  4056. */
  4057. status: Ref<WebSocketStatus>;
  4058. /**
  4059. * Closes the websocket connection gracefully.
  4060. */
  4061. close: WebSocket['close'];
  4062. /**
  4063. * Reopen the websocket connection.
  4064. * If there the current one is active, will close it before opening a new one.
  4065. */
  4066. open: Fn;
  4067. /**
  4068. * Sends data through the websocket connection.
  4069. *
  4070. * @param data
  4071. * @param useBuffer when the socket is not yet open, store the data into the buffer and sent them one connected. Default to true.
  4072. */
  4073. send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
  4074. /**
  4075. * Reference to the WebSocket instance.
  4076. */
  4077. ws: Ref<WebSocket | undefined>;
  4078. }
  4079. /**
  4080. * Reactive WebSocket client.
  4081. *
  4082. * @see https://vueuse.org/useWebSocket
  4083. * @param url
  4084. */
  4085. declare function useWebSocket<Data = any>(url: string, options?: UseWebSocketOptions): UseWebSocketReturn<Data>;
  4086. interface UseWebWorkerReturn<Data = any> {
  4087. data: Ref<Data>;
  4088. post: typeof Worker.prototype['postMessage'];
  4089. terminate: () => void;
  4090. worker: Ref<Worker | undefined>;
  4091. }
  4092. /**
  4093. * Simple Web Workers registration and communication.
  4094. *
  4095. * @see https://vueuse.org/useWebWorker
  4096. * @param url
  4097. * @param workerOptions
  4098. * @param options
  4099. */
  4100. declare function useWebWorker<Data = any>(url: string, workerOptions?: WorkerOptions, options?: ConfigurableWindow): UseWebWorkerReturn<Data>;
  4101. declare type WebWorkerStatus = 'PENDING' | 'SUCCESS' | 'RUNNING' | 'ERROR' | 'TIMEOUT_EXPIRED';
  4102. interface UseWebWorkerOptions extends ConfigurableWindow {
  4103. /**
  4104. * Number of milliseconds before killing the worker
  4105. *
  4106. * @default undefined
  4107. */
  4108. timeout?: number;
  4109. /**
  4110. * An array that contains the external dependencies needed to run the worker
  4111. */
  4112. dependencies?: string[];
  4113. }
  4114. /**
  4115. * Run expensive function without blocking the UI, using a simple syntax that makes use of Promise.
  4116. *
  4117. * @see https://vueuse.org/useWebWorkerFn
  4118. * @param fn
  4119. * @param options
  4120. */
  4121. declare const useWebWorkerFn: <T extends (...fnArgs: any[]) => any>(fn: T, options?: UseWebWorkerOptions) => {
  4122. workerFn: (...fnArgs: Parameters<T>) => Promise<ReturnType<T>>;
  4123. workerStatus: vue_demi.Ref<WebWorkerStatus>;
  4124. workerTerminate: (status?: WebWorkerStatus) => void;
  4125. };
  4126. declare type UseWebWorkerFnReturn = ReturnType<typeof useWebWorkerFn>;
  4127. /**
  4128. * Reactively track window focus with `window.onfocus` and `window.onblur`.
  4129. *
  4130. * @see https://vueuse.org/useWindowFocus
  4131. * @param options
  4132. */
  4133. declare function useWindowFocus({ window }?: ConfigurableWindow): Ref<boolean>;
  4134. /**
  4135. * Reactive window scroll.
  4136. *
  4137. * @see https://vueuse.org/useWindowScroll
  4138. * @param options
  4139. */
  4140. declare function useWindowScroll({ window }?: ConfigurableWindow): {
  4141. x: vue_demi.Ref<number>;
  4142. y: vue_demi.Ref<number>;
  4143. };
  4144. declare type UseWindowScrollReturn = ReturnType<typeof useWindowScroll>;
  4145. interface UseWindowSizeOptions extends ConfigurableWindow {
  4146. initialWidth?: number;
  4147. initialHeight?: number;
  4148. /**
  4149. * Listen to window `orientationchange` event
  4150. *
  4151. * @default true
  4152. */
  4153. listenOrientation?: boolean;
  4154. /**
  4155. * Whether the scrollbar should be included in the width and height
  4156. * @default true
  4157. */
  4158. includeScrollbar?: boolean;
  4159. }
  4160. /**
  4161. * Reactive window size.
  4162. *
  4163. * @see https://vueuse.org/useWindowSize
  4164. * @param options
  4165. */
  4166. declare function useWindowSize(options?: UseWindowSizeOptions): {
  4167. width: vue_demi.Ref<number>;
  4168. height: vue_demi.Ref<number>;
  4169. };
  4170. declare type UseWindowSizeReturn = ReturnType<typeof useWindowSize>;
  4171. export { AfterFetchContext, AsyncComputedOnCancel, AsyncComputedOptions, BasicColorSchema, BatteryManager, BeforeFetchContext, Breakpoints, BrowserLocationState, CloneFn, ColorSchemeType, ComputedInjectGetter, ComputedInjectGetterWithDefault, ComputedInjectSetter, ConfigurableDocument, ConfigurableLocation, ConfigurableNavigator, ConfigurableWindow, ContrastType, CreateFetchOptions, CubicBezierPoints, DefaultMagicKeysAliasMap, DeviceMotionOptions, DocumentEventName, EasingFunction, ElementSize, EventBusEvents, EventBusIdentifier, EventBusKey, EventBusListener, EyeDropper, EyeDropperOpenOptions, FileSystemAccessShowOpenFileOptions, FileSystemAccessShowSaveFileOptions, FileSystemAccessWindow, FileSystemFileHandle, GeneralEventListener, GeneralPermissionDescriptor, KeyFilter, KeyModifier, KeyPredicate, KeyStrokeEventName, MagicKeysInternal, MaybeComputedElementRef, MaybeElement, MaybeElementRef, MemoryInfo, MouseInElementOptions, MousePressedOptions, MouseSourceType, NavigatorLanguageState, NetworkEffectiveType, NetworkState, NetworkType, OnClickOutsideHandler, OnClickOutsideOptions, OnFetchErrorContext, OnKeyStrokeOptions, OnLongPressModifiers, OnLongPressOptions, PointerType, Position, ReducedMotionType, RenderableComponent, ResizeObserverCallback, ResizeObserverEntry, ResizeObserverSize, SSRHandlersMap, Serializer, SerializerAsync, StorageLike, StorageLikeAsync, StorageSerializers, SwipeDirection, TemplateRefsList, ToDataURLOptions, TransitionPresets, UnRefElementReturn, UnrefFn, UrlParams, UseAsyncQueueOptions, UseAsyncQueueResult, UseAsyncQueueReturn, UseAsyncQueueTask, UseAsyncStateOptions, UseAsyncStateReturn, UseBase64ObjectOptions, UseBase64Return, UseBatteryReturn, UseBluetoothOptions, UseBluetoothRequestDeviceOptions, UseBluetoothReturn, UseBreakpointsReturn, UseBroadcastChannelOptions, UseBroadcastChannelReturn, UseBrowserLocationReturn, UseClipboardOptions, UseClipboardReturn, UseClonedOptions, UseClonedReturn, UseColorModeOptions, UseConfirmDialogReturn, UseConfirmDialogRevealResult, UseCssVarOptions, UseCycleListOptions, UseCycleListReturn, UseDarkOptions, UseDeviceMotionReturn, UseDeviceOrientationReturn, UseDevicePixelRatioReturn, UseDevicesListOptions, UseDevicesListReturn, UseDisplayMediaOptions, UseDisplayMediaReturn, UseDraggableOptions, UseDraggableReturn, UseDropZoneReturn, UseElementBoundingOptions, UseElementBoundingReturn, UseElementByPointOptions, UseElementByPointReturn, UseElementSizeReturn, UseElementVisibilityOptions, UseEventBusReturn, UseEventSourceOptions, UseEventSourceReturn, UseEyeDropperOptions, UseEyeDropperReturn, UseFaviconOptions, UseFaviconReturn, UseFetchOptions, UseFetchReturn, UseFileDialogOptions, UseFileDialogReturn, UseFileSystemAccessCommonOptions, UseFileSystemAccessOptions, UseFileSystemAccessReturn, UseFileSystemAccessShowSaveFileOptions, UseFocusOptions, UseFocusReturn, UseFocusWithinReturn, UseFpsOptions, UseFullscreenOptions, UseFullscreenReturn, UseGamepadOptions, UseGamepadReturn, UseGeolocationOptions, UseGeolocationReturn, UseIdleOptions, UseIdleReturn, UseImageOptions, UseImageReturn, UseInfiniteScrollOptions, UseIntersectionObserverOptions, UseIntersectionObserverReturn, UseKeyModifierReturn, UseMagicKeysOptions, UseMagicKeysReturn, UseManualRefHistoryOptions, UseManualRefHistoryReturn, UseMediaControlsReturn, UseMediaSource, UseMediaTextTrack, UseMediaTextTrackSource, UseMemoizeCache, UseMemoizeOptions, UseMemoizeReturn, UseMemoryOptions, UseMemoryReturn, UseModifierOptions, UseMouseInElementReturn, UseMouseOptions, UseMousePressedReturn, UseMouseReturn, UseMutationObserverOptions, UseMutationObserverReturn, UseNavigatorLanguageReturn, UseNetworkReturn, UseNowOptions, UseNowReturn, UseOffsetPaginationInfinityPageReturn, UseOffsetPaginationOptions, UseOffsetPaginationReturn, UseParallaxOptions, UseParallaxReturn, UsePermissionOptions, UsePermissionReturn, UsePermissionReturnWithControls, UsePointerOptions, UsePointerReturn, UsePointerState, UsePointerSwipeOptions, UsePointerSwipeReturn, UseRafFnOptions, UseRefHistoryOptions, UseRefHistoryRecord, UseRefHistoryReturn, UseResizeObserverOptions, UseResizeObserverReturn, UseScreenOrientationReturn, UseScriptTagOptions, UseScriptTagReturn, UseScrollOptions, UseScrollReturn, UseShareOptions, UseShareReturn, UseSortedCompareFn, UseSortedFn, UseSortedOptions, UseSpeechRecognitionOptions, UseSpeechRecognitionReturn, UseSpeechSynthesisOptions, UseSpeechSynthesisReturn, UseSpeechSynthesisStatus, UseStepperReturn, UseStorageAsyncOptions, UseStorageOptions, UseStyleTagOptions, UseStyleTagReturn, UseSwipeOptions, UseSwipeReturn, UseTextDirectionOptions, UseTextDirectionValue, UseTextSelectionReturn, UseTextareaAutosizeOptions, UseTextareaAutosizeReturn, UseThrottledRefHistoryOptions, UseThrottledRefHistoryReturn, UseTimeAgoFormatter, UseTimeAgoMessages, UseTimeAgoOptions, UseTimeAgoReturn, UseTimestampOptions, UseTimestampReturn, UseTitleOptions, UseTitleOptionsBase, UseTitleReturn, UseTransitionOptions, UseUrlSearchParamsOptions, UseUserMediaOptions, UseUserMediaReturn, UseVModelOptions, UseVibrateOptions, UseVibrateReturn, UseVirtualListItem, UseVirtualListOptions, UseVirtualListReturn, UseWakeLockOptions, UseWakeLockReturn, UseWebNotificationOptions, UseWebNotificationReturn, UseWebSocketOptions, UseWebSocketReturn, UseWebWorkerFnReturn, UseWebWorkerOptions, UseWebWorkerReturn, UseWindowScrollReturn, UseWindowSizeOptions, UseWindowSizeReturn, VueInstance, WakeLockSentinel, WebNotificationOptions, WebSocketStatus, WebWorkerStatus, WindowEventName, WritableComputedInjectOptions, WritableComputedInjectOptionsWithDefault, computedAsync as asyncComputed, breakpointsAntDesign, breakpointsBootstrapV5, breakpointsQuasar, breakpointsSematic, breakpointsTailwind, breakpointsVuetify, cloneFnJSON, computedAsync, computedInject, createFetch, createUnrefFn, defaultDocument, defaultLocation, defaultNavigator, defaultWindow, getSSRHandler, mapGamepadToXbox360Controller, onClickOutside, onKeyDown, onKeyPressed, onKeyStroke, onKeyUp, onLongPress, onStartTyping, setSSRHandler, templateRef, unrefElement, useActiveElement, useAsyncQueue, useAsyncState, useBase64, useBattery, useBluetooth, useBreakpoints, useBroadcastChannel, useBrowserLocation, useCached, useClipboard, useCloned, useColorMode, useConfirmDialog, useCssVar, useCurrentElement, useCycleList, useDark, useDebouncedRefHistory, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useDisplayMedia, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementByPoint, useElementHover, useElementSize, useElementVisibility, useEventBus, useEventListener, useEventSource, useEyeDropper, useFavicon, useFetch, useFileDialog, useFileSystemAccess, useFocus, useFocusWithin, useFps, useFullscreen, useGamepad, useGeolocation, useIdle, useImage, useInfiniteScroll, useIntersectionObserver, useKeyModifier, useLocalStorage, useMagicKeys, useManualRefHistory, useMediaControls, useMediaQuery, useMemoize, useMemory, useMounted, useMouse, useMouseInElement, useMousePressed, useMutationObserver, useNavigatorLanguage, useNetwork, useNow, useObjectUrl, useOffsetPagination, useOnline, usePageLeave, useParallax, usePermission, usePointer, usePointerSwipe, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePreferredLanguages, usePreferredReducedMotion, useRafFn, useRefHistory, useResizeObserver, useScreenOrientation, useScreenSafeArea, useScriptTag, useScroll, useScrollLock, useSessionStorage, useShare, useSorted, useSpeechRecognition, useSpeechSynthesis, useStepper, useStorage, useStorageAsync, useStyleTag, useSupported, useSwipe, useTemplateRefsList, useTextDirection, useTextSelection, useTextareaAutosize, useThrottledRefHistory, useTimeAgo, useTimeoutPoll, useTimestamp, useTitle, useTransition, useUrlSearchParams, useUserMedia, useVModel, useVModels, useVibrate, useVirtualList, useWakeLock, useWebNotification, useWebSocket, useWebWorker, useWebWorkerFn, useWindowFocus, useWindowScroll, useWindowSize };