f9618514c1ea1f1f0bc90085b3100db1e3aa83dd588c0884718ca28b946b8168fd2cce921e556e212ada90f05aef2ea11abd4e28e8a3f6f5d34b3b320e3d6d 185 KB

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