diff --git a/404.html b/404.html new file mode 100644 index 0000000..a0dc32d --- /dev/null +++ b/404.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + +

404

That's a Four-Oh-Four.
Take me home
+ + + diff --git a/arch/index.html b/arch/index.html new file mode 100644 index 0000000..8619ffe --- /dev/null +++ b/arch/index.html @@ -0,0 +1,183 @@ + + + + + + + + + Architecture + + + + + +

Architecture

Let's connect our Quiz app to internet.

Overview

Architecture basics

Everything You NEED to Know About MVVM Architecture Patterns

Data layer for KMP

Data layer in KMP is under building but largly inspired by Android Architecture pattern

data layer overview

Repository classes are responsible for the following tasks:

  • Exposing data to the rest of the app.
  • Centralizing changes to the data.
  • Resolving conflicts between multiple data sources.
  • Abstracting sources of data from the rest of the app.
  • Containing business logic.

Kotlin flow

"A flow is an asynchronous data stream that sequentially emits values and completes normally or with an exception."

There are multiple types of flow, for the Hands-on Lab, we will focus on StateFlow

A state flow is a hot flow because its active instance exists independently of the presence of collectors (our composables that consume the data)

Coroutine

"A coroutine is an instance of suspendable computation. It is conceptually similar to a thread, in the sense that it takes a block of code to run that works concurrently with the rest of the code. However, a coroutine is not bound to any particular thread. It may suspend its execution in one thread and resume in another one."

🧪 DataSource and Repository

  • Create a mock datasource, that generate a list of question
  • Use it with a repository
  • Use the repository on the root of your application ( navHost in App.kt)

🎯 Solutions

Add coroutine dependancy to your project.

build.gradle.kts (commonMain)
commonMain.dependencies {
+           ...
+            implementation(libs.kotlinx.coroutines.core)
+        }
+
MockDataSource.kt
package com.worldline.quiz.data.datasources
+
+class MockDataSource {
+
+  fun generateDummyQuestionsList():List<Question>{
+        return listOf(
+            Question(
+                1,
+                "Android is a great platform ?",
+                1,
+                listOf(
+                    Answer( 1,"YES"),
+                    Answer(2,"NO")
+                )
+            ),
+            Question(
+                1,
+                "Android is a bad platform ?",
+                2,
+                listOf(
+                    Answer( 1,"YES"),
+                    Answer(2,"NO")
+                )
+            )
+        )
+    }
+
+}
+
QuizRepository.kt
package com.worldline.quiz.data
+
+class QuizRepository()  {
+
+    private val mockDataSource = MockDataSource()
+    private val coroutineScope = CoroutineScope(Dispatchers.Main)
+    private var _questionState=  MutableStateFlow(listOf<Question>())
+    var questionState = _questionState
+
+    init {
+        updateQuiz()
+    }
+
+    private fun updateQuiz(){
+        coroutineScope.launch {
+            _questionState.update {
+                    mockDataSource.generateDummyQuestionsList()
+            }
+        }
+    }
+}
+
App.kt
...
+@Composable
+fun App(
+    navController: NavHostController = rememberNavController(),
+    quizRepository: QuizRepository = QuizRepository()
+) {
+
+    MaterialTheme {
+        NavHost(
+            navController = navController,
+            startDestination = WelcomeRoute,
+        ) {
+
+
+            composable<WelcomeRoute>() {
+                welcomeScreen(
+                    onStartButtonPushed = {
+                        navController.navigate(route = QuizRoute)
+                    }
+                )
+            }
+            composable<QuizRoute>() {
+                val questions by quizRepository.questionState.collectAsState()
+                    questionScreen(
+                        questions = questions,
+                        /* FOR SPEAKER TALK DEMO ON WEB APP */
+                        onFinishButtonPushed = {
+                            score: Int, questionSize: Int -> navController.navigate(route = ScoreRoute(score, questionSize))
+                        }
+                    )
+            }
+            composable<ScoreRoute> { backStackEntry ->
+                val scoreRoute: ScoreRoute = backStackEntry.toRoute<ScoreRoute>()
+                scoreScreen(
+                    score = scoreRoute.score,
+                    total = scoreRoute.questionSize,
+                    onResetButtonPushed = {
+                        navController.navigate(route = QuizRoute)
+                    }
+                )
+            }
+        }
+    }
+}
+

Sources

The full solution for this section is availabe here

🧪 ViewModel

  • Create a ViewModel class
  • Upgrade the repository that is no more storing the flow and move it to the ViewModel
  • Upgrade the App to use the ViewModel instead of the Repository

Third party Architecture libraries

Domain layer framework such as ViewModels are just available on KMP. But you can also use a third party library such as Moko-MVVM or KMM-ViewModel or precompose

gradle.build.kts (module : composeApp)
...
+ commonMain.dependencies {
+            ...
+            implementation(libs.androidx.lifecycle.viewmodel.compose)
+...
+
QuizViewModel.kt
package com.worldline.quiz
+
+class QuizViewModel : ViewModel() {
+    private var quizRepository: QuizRepository = QuizRepository()
+    private var _questionState = MutableStateFlow(listOf<Question>())
+    var questionState: StateFlow<List<Question>> = _questionState
+
+    /* Can be replaced with explicit backing fields
+    val questionState : StateFlow<List<Question>>
+       field =  MutableStateFlow(listOf<Question>())
+    -> in build.gradle.kts : sourceSets.all { languageSettings.enableLanguageFeature("ExplicitBackingFields") }
+    */
+
+    init {
+        getQuestionQuiz()
+    }
+
+    private fun getQuestionQuiz() {
+        viewModelScope.launch(Dispatchers.Default) {
+            _questionState.update {
+                quizRepository.updateQuiz()
+            }
+        }
+    }
+}
+
QuizRepository.kt
class QuizRepository  {
+    private val mockDataSource = MockDataSource()
+    fun updateQuiz():List<Question>{
+            return mockDataSource.generateDummyQuestionsList()
+    }
+}
+
App.kt
fun App(
+    navController: NavHostController = rememberNavController(),
+    quizViewModel: QuizViewModel = QuizViewModel()
+) {
+...
+composable(route = QuizRoute) {
+                val questions by quizViewModel.questionState.collectAsState()
+

Sources

The full solution for this section is availabe here

✅ If everything is fine, go to the next chapter →

📖 Further reading

Last Updated:
Contributors: Ibrahim Gharbi
+ + + diff --git a/assets/404.html-BNEFVt0L.js b/assets/404.html-BNEFVt0L.js new file mode 100644 index 0000000..adc2f62 --- /dev/null +++ b/assets/404.html-BNEFVt0L.js @@ -0,0 +1 @@ +import{_ as e,o,c as n,b as r}from"./app-DaulDPFL.js";const a={};function l(p,t){return o(),n("div",null,t[0]||(t[0]=[r("p",null,"404 Not Found",-1)]))}const c=e(a,[["render",l],["__file","404.html.vue"]]),s=JSON.parse('{"path":"/404.html","title":"","lang":"en-US","frontmatter":{"layout":"NotFound","description":"404 Not Found","head":[["meta",{"property":"og:url","content":"https://worldline.github.io/learning-kotlin-multiplatform/learning-kotlin-multiplatform/404.html"}],["meta",{"property":"og:description","content":"404 Not Found"}],["meta",{"property":"og:type","content":"website"}],["meta",{"property":"og:locale","content":"en-US"}],["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"WebPage\\",\\"name\\":\\"\\",\\"description\\":\\"404 Not Found\\"}"]]},"headers":[],"git":{},"filePathRelative":null,"autoDesc":true}');export{c as comp,s as data}; diff --git a/assets/app-DaulDPFL.js b/assets/app-DaulDPFL.js new file mode 100644 index 0000000..8530d22 --- /dev/null +++ b/assets/app-DaulDPFL.js @@ -0,0 +1,42 @@ +const Xf="modulepreload",Zf=function(e){return"/learning-kotlin-multiplatform/"+e},Fi={},pt=function(t,n,r){let o=Promise.resolve();if(n&&n.length>0){document.getElementsByTagName("link");const i=document.querySelector("meta[property=csp-nonce]"),a=(i==null?void 0:i.nonce)||(i==null?void 0:i.getAttribute("nonce"));o=Promise.allSettled(n.map(l=>{if(l=Zf(l),l in Fi)return;Fi[l]=!0;const u=l.endsWith(".css"),f=u?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${l}"]${f}`))return;const c=document.createElement("link");if(c.rel=u?"stylesheet":Xf,u||(c.as="script"),c.crossOrigin="",c.href=l,a&&c.setAttribute("nonce",a),document.head.appendChild(c),u)return new Promise((d,p)=>{c.addEventListener("load",d),c.addEventListener("error",()=>p(new Error(`Unable to preload CSS for ${l}`)))})}))}function s(i){const a=new Event("vite:preloadError",{cancelable:!0});if(a.payload=i,window.dispatchEvent(a),!a.defaultPrevented)throw i}return o.then(i=>{for(const a of i||[])a.status==="rejected"&&s(a.reason);return t().catch(s)})};/** +* @vue/shared v3.5.12 +* (c) 2018-present Yuxi (Evan) You and Vue contributors +* @license MIT +**//*! #__NO_SIDE_EFFECTS__ */function Yn(e){const t=Object.create(null);for(const n of e.split(","))t[n]=1;return n=>n in t}const Se={},Rn=[],kt=()=>{},Jf=()=>!1,Mr=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&(e.charCodeAt(2)>122||e.charCodeAt(2)<97),Ws=e=>e.startsWith("onUpdate:"),Ne=Object.assign,qs=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},Qf=Object.prototype.hasOwnProperty,he=(e,t)=>Qf.call(e,t),re=Array.isArray,Ln=e=>wo(e)==="[object Map]",nu=e=>wo(e)==="[object Set]",oe=e=>typeof e=="function",Oe=e=>typeof e=="string",Bt=e=>typeof e=="symbol",Te=e=>e!==null&&typeof e=="object",ru=e=>(Te(e)||oe(e))&&oe(e.then)&&oe(e.catch),ou=Object.prototype.toString,wo=e=>ou.call(e),ed=e=>wo(e).slice(8,-1),su=e=>wo(e)==="[object Object]",Gs=e=>Oe(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,Dn=Yn(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),To=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},td=/-(\w)/g,rt=To(e=>e.replace(td,(t,n)=>n?n.toUpperCase():"")),nd=/\B([A-Z])/g,$t=To(e=>e.replace(nd,"-$1").toLowerCase()),Hr=To(e=>e.charAt(0).toUpperCase()+e.slice(1)),Wo=To(e=>e?`on${Hr(e)}`:""),en=(e,t)=>!Object.is(e,t),qo=(e,...t)=>{for(let n=0;n{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,writable:r,value:n})},rd=e=>{const t=parseFloat(e);return isNaN(t)?e:t},od=e=>{const t=Oe(e)?Number(e):NaN;return isNaN(t)?e:t};let Bi;const Oo=()=>Bi||(Bi=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});function Xn(e){if(re(e)){const t={};for(let n=0;n{if(n){const r=n.split(id);r.length>1&&(t[r[0].trim()]=r[1].trim())}}),t}function ud(e){let t="";if(!e||Oe(e))return t;for(const n in e){const r=e[n];if(Oe(r)||typeof r=="number"){const o=n.startsWith("--")?n:$t(n);t+=`${o}:${r};`}}return t}function nt(e){let t="";if(Oe(e))t=e;else if(re(e))for(let n=0;n?@[\\\]^`{|}~]/g;function md(e,t){return e.replace(hd,n=>`\\${n}`)}const au=e=>!!(e&&e.__v_isRef===!0),Ie=e=>Oe(e)?e:e==null?"":re(e)||Te(e)&&(e.toString===ou||!oe(e.toString))?au(e)?Ie(e.value):JSON.stringify(e,lu,2):String(e),lu=(e,t)=>au(t)?lu(e,t.value):Ln(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[r,o],s)=>(n[Go(r,s)+" =>"]=o,n),{})}:nu(t)?{[`Set(${t.size})`]:[...t.values()].map(n=>Go(n))}:Bt(t)?Go(t):Te(t)&&!re(t)&&!su(t)?String(t):t,Go=(e,t="")=>{var n;return Bt(e)?`Symbol(${(n=e.description)!=null?n:t})`:e};/** +* @vue/reactivity v3.5.12 +* (c) 2018-present Yuxi (Evan) You and Vue contributors +* @license MIT +**/let Ye;class gd{constructor(t=!1){this.detached=t,this._active=!0,this.effects=[],this.cleanups=[],this._isPaused=!1,this.parent=Ye,!t&&Ye&&(this.index=(Ye.scopes||(Ye.scopes=[])).push(this)-1)}get active(){return this._active}pause(){if(this._active){this._isPaused=!0;let t,n;if(this.scopes)for(t=0,n=this.scopes.length;t0)return;if(gr){let t=gr;for(gr=void 0;t;){const n=t.next;t.next=void 0,t.flags&=-9,t=n}}let e;for(;mr;){let t=mr;for(mr=void 0;t;){const n=t.next;if(t.next=void 0,t.flags&=-9,t.flags&1)try{t.trigger()}catch(r){e||(e=r)}t=n}}if(e)throw e}function pu(e){for(let t=e.deps;t;t=t.nextDep)t.version=-1,t.prevActiveLink=t.dep.activeLink,t.dep.activeLink=t}function hu(e){let t,n=e.depsTail,r=n;for(;r;){const o=r.prevDep;r.version===-1?(r===n&&(n=o),Js(r),vd(r)):t=r,r.dep.activeLink=r.prevActiveLink,r.prevActiveLink=void 0,r=o}e.deps=t,e.depsTail=n}function _s(e){for(let t=e.deps;t;t=t.nextDep)if(t.dep.version!==t.version||t.dep.computed&&(mu(t.dep.computed)||t.dep.version!==t.version))return!0;return!!e._dirty}function mu(e){if(e.flags&4&&!(e.flags&16)||(e.flags&=-17,e.globalVersion===Ar))return;e.globalVersion=Ar;const t=e.dep;if(e.flags|=2,t.version>0&&!e.isSSR&&e.deps&&!_s(e)){e.flags&=-3;return}const n=Ce,r=yt;Ce=e,yt=!0;try{pu(e);const o=e.fn(e._value);(t.version===0||en(o,e._value))&&(e._value=o,t.version++)}catch(o){throw t.version++,o}finally{Ce=n,yt=r,hu(e),e.flags&=-3}}function Js(e,t=!1){const{dep:n,prevSub:r,nextSub:o}=e;if(r&&(r.nextSub=o,e.prevSub=void 0),o&&(o.prevSub=r,e.nextSub=void 0),n.subs===e&&(n.subs=r,!r&&n.computed)){n.computed.flags&=-5;for(let s=n.computed.deps;s;s=s.nextDep)Js(s,!0)}!t&&!--n.sc&&n.map&&n.map.delete(n.key)}function vd(e){const{prevDep:t,nextDep:n}=e;t&&(t.nextDep=n,e.prevDep=void 0),n&&(n.prevDep=t,e.nextDep=void 0)}let yt=!0;const gu=[];function Ut(){gu.push(yt),yt=!1}function jt(){const e=gu.pop();yt=e===void 0?!0:e}function Ui(e){const{cleanup:t}=e;if(e.cleanup=void 0,t){const n=Ce;Ce=void 0;try{t()}finally{Ce=n}}}let Ar=0;class yd{constructor(t,n){this.sub=t,this.dep=n,this.version=n.version,this.nextDep=this.prevDep=this.nextSub=this.prevSub=this.prevActiveLink=void 0}}class xo{constructor(t){this.computed=t,this.version=0,this.activeLink=void 0,this.subs=void 0,this.map=void 0,this.key=void 0,this.sc=0}track(t){if(!Ce||!yt||Ce===this.computed)return;let n=this.activeLink;if(n===void 0||n.sub!==Ce)n=this.activeLink=new yd(Ce,this),Ce.deps?(n.prevDep=Ce.depsTail,Ce.depsTail.nextDep=n,Ce.depsTail=n):Ce.deps=Ce.depsTail=n,_u(n);else if(n.version===-1&&(n.version=this.version,n.nextDep)){const r=n.nextDep;r.prevDep=n.prevDep,n.prevDep&&(n.prevDep.nextDep=r),n.prevDep=Ce.depsTail,n.nextDep=void 0,Ce.depsTail.nextDep=n,Ce.depsTail=n,Ce.deps===n&&(Ce.deps=r)}return n}trigger(t){this.version++,Ar++,this.notify(t)}notify(t){Xs();try{for(let n=this.subs;n;n=n.prevSub)n.sub.notify()&&n.sub.dep.notify()}finally{Zs()}}}function _u(e){if(e.dep.sc++,e.sub.flags&4){const t=e.dep.computed;if(t&&!e.dep.subs){t.flags|=20;for(let r=t.deps;r;r=r.nextDep)_u(r)}const n=e.dep.subs;n!==e&&(e.prevSub=n,n&&(n.nextSub=e)),e.dep.subs=e}}const po=new WeakMap,En=Symbol(""),vs=Symbol(""),Cr=Symbol("");function Ke(e,t,n){if(yt&&Ce){let r=po.get(e);r||po.set(e,r=new Map);let o=r.get(n);o||(r.set(n,o=new xo),o.map=r,o.key=n),o.track()}}function Ht(e,t,n,r,o,s){const i=po.get(e);if(!i){Ar++;return}const a=l=>{l&&l.trigger()};if(Xs(),t==="clear")i.forEach(a);else{const l=re(e),u=l&&Gs(n);if(l&&n==="length"){const f=Number(r);i.forEach((c,d)=>{(d==="length"||d===Cr||!Bt(d)&&d>=f)&&a(c)})}else switch((n!==void 0||i.has(void 0))&&a(i.get(n)),u&&a(i.get(Cr)),t){case"add":l?u&&a(i.get("length")):(a(i.get(En)),Ln(e)&&a(i.get(vs)));break;case"delete":l||(a(i.get(En)),Ln(e)&&a(i.get(vs)));break;case"set":Ln(e)&&a(i.get(En));break}}Zs()}function bd(e,t){const n=po.get(e);return n&&n.get(t)}function On(e){const t=ue(e);return t===e?t:(Ke(t,"iterate",Cr),gt(e)?t:t.map(We))}function ko(e){return Ke(e=ue(e),"iterate",Cr),e}const Ed={__proto__:null,[Symbol.iterator](){return Xo(this,Symbol.iterator,We)},concat(...e){return On(this).concat(...e.map(t=>re(t)?On(t):t))},entries(){return Xo(this,"entries",e=>(e[1]=We(e[1]),e))},every(e,t){return Rt(this,"every",e,t,void 0,arguments)},filter(e,t){return Rt(this,"filter",e,t,n=>n.map(We),arguments)},find(e,t){return Rt(this,"find",e,t,We,arguments)},findIndex(e,t){return Rt(this,"findIndex",e,t,void 0,arguments)},findLast(e,t){return Rt(this,"findLast",e,t,We,arguments)},findLastIndex(e,t){return Rt(this,"findLastIndex",e,t,void 0,arguments)},forEach(e,t){return Rt(this,"forEach",e,t,void 0,arguments)},includes(...e){return Zo(this,"includes",e)},indexOf(...e){return Zo(this,"indexOf",e)},join(e){return On(this).join(e)},lastIndexOf(...e){return Zo(this,"lastIndexOf",e)},map(e,t){return Rt(this,"map",e,t,void 0,arguments)},pop(){return or(this,"pop")},push(...e){return or(this,"push",e)},reduce(e,...t){return ji(this,"reduce",e,t)},reduceRight(e,...t){return ji(this,"reduceRight",e,t)},shift(){return or(this,"shift")},some(e,t){return Rt(this,"some",e,t,void 0,arguments)},splice(...e){return or(this,"splice",e)},toReversed(){return On(this).toReversed()},toSorted(e){return On(this).toSorted(e)},toSpliced(...e){return On(this).toSpliced(...e)},unshift(...e){return or(this,"unshift",e)},values(){return Xo(this,"values",We)}};function Xo(e,t,n){const r=ko(e),o=r[t]();return r!==e&&!gt(e)&&(o._next=o.next,o.next=()=>{const s=o._next();return s.value&&(s.value=n(s.value)),s}),o}const Sd=Array.prototype;function Rt(e,t,n,r,o,s){const i=ko(e),a=i!==e&&!gt(e),l=i[t];if(l!==Sd[t]){const c=l.apply(e,s);return a?We(c):c}let u=n;i!==e&&(a?u=function(c,d){return n.call(this,We(c),d,e)}:n.length>2&&(u=function(c,d){return n.call(this,c,d,e)}));const f=l.call(i,u,r);return a&&o?o(f):f}function ji(e,t,n,r){const o=ko(e);let s=n;return o!==e&&(gt(e)?n.length>3&&(s=function(i,a,l){return n.call(this,i,a,l,e)}):s=function(i,a,l){return n.call(this,i,We(a),l,e)}),o[t](s,...r)}function Zo(e,t,n){const r=ue(e);Ke(r,"iterate",Cr);const o=r[t](...n);return(o===-1||o===!1)&&ti(n[0])?(n[0]=ue(n[0]),r[t](...n)):o}function or(e,t,n=[]){Ut(),Xs();const r=ue(e)[t].apply(e,n);return Zs(),jt(),r}const Ad=Yn("__proto__,__v_isRef,__isVue"),vu=new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(Bt));function Cd(e){Bt(e)||(e=String(e));const t=ue(this);return Ke(t,"has",e),t.hasOwnProperty(e)}class yu{constructor(t=!1,n=!1){this._isReadonly=t,this._isShallow=n}get(t,n,r){const o=this._isReadonly,s=this._isShallow;if(n==="__v_isReactive")return!o;if(n==="__v_isReadonly")return o;if(n==="__v_isShallow")return s;if(n==="__v_raw")return r===(o?s?Dd:Au:s?Su:Eu).get(t)||Object.getPrototypeOf(t)===Object.getPrototypeOf(r)?t:void 0;const i=re(t);if(!o){let l;if(i&&(l=Ed[n]))return l;if(n==="hasOwnProperty")return Cd}const a=Reflect.get(t,n,De(t)?t:r);return(Bt(n)?vu.has(n):Ad(n))||(o||Ke(t,"get",n),s)?a:De(a)?i&&Gs(n)?a:a.value:Te(a)?o?Po(a):Fr(a):a}}class bu extends yu{constructor(t=!1){super(!1,t)}set(t,n,r,o){let s=t[n];if(!this._isShallow){const l=Cn(s);if(!gt(r)&&!Cn(r)&&(s=ue(s),r=ue(r)),!re(t)&&De(s)&&!De(r))return l?!1:(s.value=r,!0)}const i=re(t)&&Gs(n)?Number(n)e,qr=e=>Reflect.getPrototypeOf(e);function kd(e,t,n){return function(...r){const o=this.__v_raw,s=ue(o),i=Ln(s),a=e==="entries"||e===Symbol.iterator&&i,l=e==="keys"&&i,u=o[e](...r),f=n?ys:t?bs:We;return!t&&Ke(s,"iterate",l?vs:En),{next(){const{value:c,done:d}=u.next();return d?{value:c,done:d}:{value:a?[f(c[0]),f(c[1])]:f(c),done:d}},[Symbol.iterator](){return this}}}}function Gr(e){return function(...t){return e==="delete"?!1:e==="clear"?void 0:this}}function Pd(e,t){const n={get(o){const s=this.__v_raw,i=ue(s),a=ue(o);e||(en(o,a)&&Ke(i,"get",o),Ke(i,"get",a));const{has:l}=qr(i),u=t?ys:e?bs:We;if(l.call(i,o))return u(s.get(o));if(l.call(i,a))return u(s.get(a));s!==i&&s.get(o)},get size(){const o=this.__v_raw;return!e&&Ke(ue(o),"iterate",En),Reflect.get(o,"size",o)},has(o){const s=this.__v_raw,i=ue(s),a=ue(o);return e||(en(o,a)&&Ke(i,"has",o),Ke(i,"has",a)),o===a?s.has(o):s.has(o)||s.has(a)},forEach(o,s){const i=this,a=i.__v_raw,l=ue(a),u=t?ys:e?bs:We;return!e&&Ke(l,"iterate",En),a.forEach((f,c)=>o.call(s,u(f),u(c),i))}};return Ne(n,e?{add:Gr("add"),set:Gr("set"),delete:Gr("delete"),clear:Gr("clear")}:{add(o){!t&&!gt(o)&&!Cn(o)&&(o=ue(o));const s=ue(this);return qr(s).has.call(s,o)||(s.add(o),Ht(s,"add",o,o)),this},set(o,s){!t&&!gt(s)&&!Cn(s)&&(s=ue(s));const i=ue(this),{has:a,get:l}=qr(i);let u=a.call(i,o);u||(o=ue(o),u=a.call(i,o));const f=l.call(i,o);return i.set(o,s),u?en(s,f)&&Ht(i,"set",o,s):Ht(i,"add",o,s),this},delete(o){const s=ue(this),{has:i,get:a}=qr(s);let l=i.call(s,o);l||(o=ue(o),l=i.call(s,o)),a&&a.call(s,o);const u=s.delete(o);return l&&Ht(s,"delete",o,void 0),u},clear(){const o=ue(this),s=o.size!==0,i=o.clear();return s&&Ht(o,"clear",void 0,void 0),i}}),["keys","values","entries",Symbol.iterator].forEach(o=>{n[o]=kd(o,e,t)}),n}function Qs(e,t){const n=Pd(e,t);return(r,o,s)=>o==="__v_isReactive"?!e:o==="__v_isReadonly"?e:o==="__v_raw"?r:Reflect.get(he(n,o)&&o in r?n:r,o,s)}const Id={get:Qs(!1,!1)},Rd={get:Qs(!1,!0)},Ld={get:Qs(!0,!1)};const Eu=new WeakMap,Su=new WeakMap,Au=new WeakMap,Dd=new WeakMap;function Nd(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function Vd(e){return e.__v_skip||!Object.isExtensible(e)?0:Nd(ed(e))}function Fr(e){return Cn(e)?e:ei(e,!1,Td,Id,Eu)}function Cu(e){return ei(e,!1,xd,Rd,Su)}function Po(e){return ei(e,!0,Od,Ld,Au)}function ei(e,t,n,r,o){if(!Te(e)||e.__v_raw&&!(t&&e.__v_isReactive))return e;const s=o.get(e);if(s)return s;const i=Vd(e);if(i===0)return e;const a=new Proxy(e,i===2?r:n);return o.set(e,a),a}function Nn(e){return Cn(e)?Nn(e.__v_raw):!!(e&&e.__v_isReactive)}function Cn(e){return!!(e&&e.__v_isReadonly)}function gt(e){return!!(e&&e.__v_isShallow)}function ti(e){return e?!!e.__v_raw:!1}function ue(e){const t=e&&e.__v_raw;return t?ue(t):e}function Md(e){return!he(e,"__v_skip")&&Object.isExtensible(e)&&$n(e,"__v_skip",!0),e}const We=e=>Te(e)?Fr(e):e,bs=e=>Te(e)?Po(e):e;function De(e){return e?e.__v_isRef===!0:!1}function de(e){return wu(e,!1)}function Pt(e){return wu(e,!0)}function wu(e,t){return De(e)?e:new Hd(e,t)}class Hd{constructor(t,n){this.dep=new xo,this.__v_isRef=!0,this.__v_isShallow=!1,this._rawValue=n?t:ue(t),this._value=n?t:We(t),this.__v_isShallow=n}get value(){return this.dep.track(),this._value}set value(t){const n=this._rawValue,r=this.__v_isShallow||gt(t)||Cn(t);t=r?t:ue(t),en(t,n)&&(this._rawValue=t,this._value=r?t:We(t),this.dep.trigger())}}function Qt(e){return De(e)?e.value:e}const Fd={get:(e,t,n)=>t==="__v_raw"?e:Qt(Reflect.get(e,t,n)),set:(e,t,n,r)=>{const o=e[t];return De(o)&&!De(n)?(o.value=n,!0):Reflect.set(e,t,n,r)}};function Tu(e){return Nn(e)?e:new Proxy(e,Fd)}class Bd{constructor(t){this.__v_isRef=!0,this._value=void 0;const n=this.dep=new xo,{get:r,set:o}=t(n.track.bind(n),n.trigger.bind(n));this._get=r,this._set=o}get value(){return this._value=this._get()}set value(t){this._set(t)}}function $d(e){return new Bd(e)}function Ou(e){const t=re(e)?new Array(e.length):{};for(const n in e)t[n]=xu(e,n);return t}class Ud{constructor(t,n,r){this._object=t,this._key=n,this._defaultValue=r,this.__v_isRef=!0,this._value=void 0}get value(){const t=this._object[this._key];return this._value=t===void 0?this._defaultValue:t}set value(t){this._object[this._key]=t}get dep(){return bd(ue(this._object),this._key)}}class jd{constructor(t){this._getter=t,this.__v_isRef=!0,this.__v_isReadonly=!0,this._value=void 0}get value(){return this._value=this._getter()}}function zd(e,t,n){return De(e)?e:oe(e)?new jd(e):Te(e)&&arguments.length>1?xu(e,t,n):de(e)}function xu(e,t,n){const r=e[t];return De(r)?r:new Ud(e,t,n)}class Kd{constructor(t,n,r){this.fn=t,this.setter=n,this._value=void 0,this.dep=new xo(this),this.__v_isRef=!0,this.deps=void 0,this.depsTail=void 0,this.flags=16,this.globalVersion=Ar-1,this.next=void 0,this.effect=this,this.__v_isReadonly=!n,this.isSSR=r}notify(){if(this.flags|=16,!(this.flags&8)&&Ce!==this)return du(this,!0),!0}get value(){const t=this.dep.track();return mu(this),t&&(t.version=this.dep.version),this._value}set value(t){this.setter&&this.setter(t)}}function Wd(e,t,n=!1){let r,o;return oe(e)?r=e:(r=e.get,o=e.set),new Kd(r,o,n)}const Yr={},ho=new WeakMap;let mn;function qd(e,t=!1,n=mn){if(n){let r=ho.get(n);r||ho.set(n,r=[]),r.push(e)}}function Gd(e,t,n=Se){const{immediate:r,deep:o,once:s,scheduler:i,augmentJob:a,call:l}=n,u=E=>o?E:gt(E)||o===!1||o===0?Ft(E,1):Ft(E);let f,c,d,p,_=!1,v=!1;if(De(e)?(c=()=>e.value,_=gt(e)):Nn(e)?(c=()=>u(e),_=!0):re(e)?(v=!0,_=e.some(E=>Nn(E)||gt(E)),c=()=>e.map(E=>{if(De(E))return E.value;if(Nn(E))return u(E);if(oe(E))return l?l(E,2):E()})):oe(e)?t?c=l?()=>l(e,2):e:c=()=>{if(d){Ut();try{d()}finally{jt()}}const E=mn;mn=f;try{return l?l(e,3,[p]):e(p)}finally{mn=E}}:c=kt,t&&o){const E=c,V=o===!0?1/0:o;c=()=>Ft(E(),V)}const y=uu(),b=()=>{f.stop(),y&&qs(y.effects,f)};if(s&&t){const E=t;t=(...V)=>{E(...V),b()}}let A=v?new Array(e.length).fill(Yr):Yr;const m=E=>{if(!(!(f.flags&1)||!f.dirty&&!E))if(t){const V=f.run();if(o||_||(v?V.some((W,M)=>en(W,A[M])):en(V,A))){d&&d();const W=mn;mn=f;try{const M=[V,A===Yr?void 0:v&&A[0]===Yr?[]:A,p];l?l(t,3,M):t(...M),A=V}finally{mn=W}}}else f.run()};return a&&a(m),f=new cu(c),f.scheduler=i?()=>i(m,!1):m,p=E=>qd(E,!1,f),d=f.onStop=()=>{const E=ho.get(f);if(E){if(l)l(E,4);else for(const V of E)V();ho.delete(f)}},t?r?m(!0):A=f.run():i?i(m.bind(null,!0),!0):f.run(),b.pause=f.pause.bind(f),b.resume=f.resume.bind(f),b.stop=b,b}function Ft(e,t=1/0,n){if(t<=0||!Te(e)||e.__v_skip||(n=n||new Set,n.has(e)))return e;if(n.add(e),t--,De(e))Ft(e.value,t,n);else if(re(e))for(let r=0;r{Ft(r,t,n)});else if(su(e)){for(const r in e)Ft(e[r],t,n);for(const r of Object.getOwnPropertySymbols(e))Object.prototype.propertyIsEnumerable.call(e,r)&&Ft(e[r],t,n)}return e}/** +* @vue/runtime-core v3.5.12 +* (c) 2018-present Yuxi (Evan) You and Vue contributors +* @license MIT +**/const _r=[];let Jo=!1;function Gt(e,...t){if(Jo)return;Jo=!0,Ut();const n=_r.length?_r[_r.length-1].component:null,r=n&&n.appContext.config.warnHandler,o=Yd();if(r)Zn(r,n,11,[e+t.map(s=>{var i,a;return(a=(i=s.toString)==null?void 0:i.call(s))!=null?a:JSON.stringify(s)}).join(""),n&&n.proxy,o.map(({vnode:s})=>`at <${gc(n,s.type)}>`).join(` +`),o]);else{const s=[`[Vue warn]: ${e}`,...t];o.length&&s.push(` +`,...Xd(o)),console.warn(...s)}jt(),Jo=!1}function Yd(){let e=_r[_r.length-1];if(!e)return[];const t=[];for(;e;){const n=t[0];n&&n.vnode===e?n.recurseCount++:t.push({vnode:e,recurseCount:0});const r=e.component&&e.component.parent;e=r&&r.vnode}return t}function Xd(e){const t=[];return e.forEach((n,r)=>{t.push(...r===0?[]:[` +`],...Zd(n))}),t}function Zd({vnode:e,recurseCount:t}){const n=t>0?`... (${t} recursive calls)`:"",r=e.component?e.component.parent==null:!1,o=` at <${gc(e.component,e.type,r)}`,s=">"+n;return e.props?[o,...Jd(e.props),s]:[o+s]}function Jd(e){const t=[],n=Object.keys(e);return n.slice(0,3).forEach(r=>{t.push(...ku(r,e[r]))}),n.length>3&&t.push(" ..."),t}function ku(e,t,n){return Oe(t)?(t=JSON.stringify(t),n?t:[`${e}=${t}`]):typeof t=="number"||typeof t=="boolean"||t==null?n?t:[`${e}=${t}`]:De(t)?(t=ku(e,ue(t.value),!0),n?t:[`${e}=Ref<`,t,">"]):oe(t)?[`${e}=fn${t.name?`<${t.name}>`:""}`]:(t=ue(t),n?t:[`${e}=`,t])}function Zn(e,t,n,r){try{return r?e(...r):e()}catch(o){Br(o,t,n)}}function Et(e,t,n,r){if(oe(e)){const o=Zn(e,t,n,r);return o&&ru(o)&&o.catch(s=>{Br(s,t,n)}),o}if(re(e)){const o=[];for(let s=0;s>>1,o=Xe[r],s=wr(o);s=wr(n)?Xe.push(e):Xe.splice(ep(t),0,e),e.flags|=1,Iu()}}function Iu(){mo||(mo=Pu.then(Ru))}function tp(e){re(e)?Vn.push(...e):Yt&&e.id===-1?Yt.splice(Pn+1,0,e):e.flags&1||(Vn.push(e),e.flags|=1),Iu()}function zi(e,t,n=Tt+1){for(;nwr(n)-wr(r));if(Vn.length=0,Yt){Yt.push(...t);return}for(Yt=t,Pn=0;Pne.id==null?e.flags&2?-1:1/0:e.id;function Ru(e){try{for(Tt=0;Ttxt.emit(o,...s)),cr=[]):typeof window<"u"&&window.HTMLElement&&!((r=(n=window.navigator)==null?void 0:n.userAgent)!=null&&r.includes("jsdom"))?((t.__VUE_DEVTOOLS_HOOK_REPLAY__=t.__VUE_DEVTOOLS_HOOK_REPLAY__||[]).push(s=>{Lu(s,t)}),setTimeout(()=>{xt||(t.__VUE_DEVTOOLS_HOOK_REPLAY__=null,Es=!0,cr=[])},3e3)):(Es=!0,cr=[])}function np(e,t){Io("app:init",e,t,{Fragment:_e,Text:tn,Comment:je,Static:Hn})}function rp(e){Io("app:unmount",e)}const op=ri("component:added"),Du=ri("component:updated"),sp=ri("component:removed"),ip=e=>{xt&&typeof xt.cleanupBuffer=="function"&&!xt.cleanupBuffer(e)&&sp(e)};/*! #__NO_SIDE_EFFECTS__ */function ri(e){return t=>{Io(e,t.appContext.app,t.uid,t.parent?t.parent.uid:void 0,t)}}function ap(e,t,n){Io("component:emit",e.appContext.app,e,t,n)}let $e=null,Nu=null;function _o(e){const t=$e;return $e=e,Nu=e&&e.type.__scopeId||null,t}function Ve(e,t=$e,n){if(!t||e._n)return e;const r=(...o)=>{r._d&&oa(-1);const s=_o(t);let i;try{i=e(...o)}finally{_o(s),r._d&&oa(1)}return Du(t),i};return r._n=!0,r._c=!0,r._d=!0,r}function vo(e,t){if($e===null)return e;const n=No($e),r=e.dirs||(e.dirs=[]);for(let o=0;oe.__isTeleport,Xt=Symbol("_leaveCb"),Xr=Symbol("_enterCb");function up(){const e={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return Je(()=>{e.isMounted=!0}),si(()=>{e.isUnmounting=!0}),e}const dt=[Function,Array],Mu={mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:dt,onEnter:dt,onAfterEnter:dt,onEnterCancelled:dt,onBeforeLeave:dt,onLeave:dt,onAfterLeave:dt,onLeaveCancelled:dt,onBeforeAppear:dt,onAppear:dt,onAfterAppear:dt,onAppearCancelled:dt},Hu=e=>{const t=e.subTree;return t.component?Hu(t.component):t},cp={name:"BaseTransition",props:Mu,setup(e,{slots:t}){const n=Ur(),r=up();return()=>{const o=t.default&&$u(t.default(),!0);if(!o||!o.length)return;const s=Fu(o),i=ue(e),{mode:a}=i;if(r.isLeaving)return Qo(s);const l=Ki(s);if(!l)return Qo(s);let u=Ss(l,i,r,n,d=>u=d);l.type!==je&&Tr(l,u);const f=n.subTree,c=f&&Ki(f);if(c&&c.type!==je&&!vn(l,c)&&Hu(n).type!==je){const d=Ss(c,i,r,n);if(Tr(c,d),a==="out-in"&&l.type!==je)return r.isLeaving=!0,d.afterLeave=()=>{r.isLeaving=!1,n.job.flags&8||n.update(),delete d.afterLeave},Qo(s);a==="in-out"&&l.type!==je&&(d.delayLeave=(p,_,v)=>{const y=Bu(r,c);y[String(c.key)]=c,p[Xt]=()=>{_(),p[Xt]=void 0,delete u.delayedLeave},u.delayedLeave=v})}return s}}};function Fu(e){let t=e[0];if(e.length>1){for(const n of e)if(n.type!==je){t=n;break}}return t}const fp=cp;function Bu(e,t){const{leavingVNodes:n}=e;let r=n.get(t.type);return r||(r=Object.create(null),n.set(t.type,r)),r}function Ss(e,t,n,r,o){const{appear:s,mode:i,persisted:a=!1,onBeforeEnter:l,onEnter:u,onAfterEnter:f,onEnterCancelled:c,onBeforeLeave:d,onLeave:p,onAfterLeave:_,onLeaveCancelled:v,onBeforeAppear:y,onAppear:b,onAfterAppear:A,onAppearCancelled:m}=t,E=String(e.key),V=Bu(n,e),W=(U,O)=>{U&&Et(U,r,9,O)},M=(U,O)=>{const B=O[1];W(U,O),re(U)?U.every(w=>w.length<=1)&&B():U.length<=1&&B()},C={mode:i,persisted:a,beforeEnter(U){let O=l;if(!n.isMounted)if(s)O=y||l;else return;U[Xt]&&U[Xt](!0);const B=V[E];B&&vn(e,B)&&B.el[Xt]&&B.el[Xt](),W(O,[U])},enter(U){let O=u,B=f,w=c;if(!n.isMounted)if(s)O=b||u,B=A||f,w=m||c;else return;let L=!1;const Z=U[Xr]=ee=>{L||(L=!0,ee?W(w,[U]):W(B,[U]),C.delayedLeave&&C.delayedLeave(),U[Xr]=void 0)};O?M(O,[U,Z]):Z()},leave(U,O){const B=String(e.key);if(U[Xr]&&U[Xr](!0),n.isUnmounting)return O();W(d,[U]);let w=!1;const L=U[Xt]=Z=>{w||(w=!0,O(),Z?W(v,[U]):W(_,[U]),U[Xt]=void 0,V[B]===e&&delete V[B])};V[B]=e,p?M(p,[U,L]):L()},clone(U){const O=Ss(U,t,n,r,o);return o&&o(O),O}};return C}function Qo(e){if($r(e))return e=rn(e),e.children=null,e}function Ki(e){if(!$r(e))return Vu(e.type)&&e.children?Fu(e.children):e;const{shapeFlag:t,children:n}=e;if(n){if(t&16)return n[0];if(t&32&&oe(n.default))return n.default()}}function Tr(e,t){e.shapeFlag&6&&e.component?(e.transition=t,Tr(e.component.subTree,t)):e.shapeFlag&128?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function $u(e,t=!1,n){let r=[],o=0;for(let s=0;s1)for(let s=0;syo(_,t&&(re(t)?t[v]:t),n,r,o));return}if(Sn(r)&&!o)return;const s=r.shapeFlag&4?No(r.component):r.el,i=o?null:s,{i:a,r:l}=e,u=t&&t.r,f=a.refs===Se?a.refs={}:a.refs,c=a.setupState,d=ue(c),p=c===Se?()=>!1:_=>he(d,_);if(u!=null&&u!==l&&(Oe(u)?(f[u]=null,p(u)&&(c[u]=null)):De(u)&&(u.value=null)),oe(l))Zn(l,a,12,[i,f]);else{const _=Oe(l),v=De(l);if(_||v){const y=()=>{if(e.f){const b=_?p(l)?c[l]:f[l]:l.value;o?re(b)&&qs(b,s):re(b)?b.includes(s)||b.push(s):_?(f[l]=[s],p(l)&&(c[l]=f[l])):(l.value=[s],e.k&&(f[e.k]=l.value))}else _?(f[l]=i,p(l)&&(c[l]=i)):v&&(l.value=i,e.k&&(f[e.k]=i))};i?(y.id=-1,at(y,n)):y()}}}let Wi=!1;const cn=()=>{Wi||(console.error("Hydration completed but contains mismatches."),Wi=!0)},dp=e=>e.namespaceURI.includes("svg")&&e.tagName!=="foreignObject",pp=e=>e.namespaceURI.includes("MathML"),Zr=e=>{if(e.nodeType===1){if(dp(e))return"svg";if(pp(e))return"mathml"}},_n=e=>e.nodeType===8;function hp(e){const{mt:t,p:n,o:{patchProp:r,createText:o,nextSibling:s,parentNode:i,remove:a,insert:l,createComment:u}}=e,f=(m,E)=>{if(!E.hasChildNodes()){Gt("Attempting to hydrate existing markup but container is empty. Performing full mount instead."),n(null,m,E),go(),E._vnode=m;return}c(E.firstChild,m,null,null,null),go(),E._vnode=m},c=(m,E,V,W,M,C=!1)=>{C=C||!!E.dynamicChildren;const U=_n(m)&&m.data==="[",O=()=>v(m,E,V,W,M,U),{type:B,ref:w,shapeFlag:L,patchFlag:Z}=E;let ee=m.nodeType;E.el=m,$n(m,"__vnode",E,!0),$n(m,"__vueParentComponent",V,!0),Z===-2&&(C=!1,E.dynamicChildren=null);let I=null;switch(B){case tn:ee!==3?E.children===""?(l(E.el=o(""),i(m),m),I=m):I=O():(m.data!==E.children&&(Gt("Hydration text mismatch in",m.parentNode,` + - rendered on server: ${JSON.stringify(m.data)} + - expected on client: ${JSON.stringify(E.children)}`),cn(),m.data=E.children),I=s(m));break;case je:A(m)?(I=s(m),b(E.el=m.content.firstChild,m,V)):ee!==8||U?I=O():I=s(m);break;case Hn:if(U&&(m=s(m),ee=m.nodeType),ee===1||ee===3){I=m;const D=!E.children.length;for(let z=0;z{C=C||!!E.dynamicChildren;const{type:U,props:O,patchFlag:B,shapeFlag:w,dirs:L,transition:Z}=E,ee=U==="input"||U==="option";if(ee||B!==-1){L&&Ot(E,null,V,"created");let I=!1;if(A(m)){I=rc(null,Z)&&V&&V.vnode.props&&V.vnode.props.appear;const z=m.content.firstChild;I&&Z.beforeEnter(z),b(z,m,V),E.el=m=z}if(w&16&&!(O&&(O.innerHTML||O.textContent))){let z=p(m.firstChild,E,m,V,W,M,C),le=!1;for(;z;){fr(m,1)||(le||(Gt("Hydration children mismatch on",m,` +Server rendered element contains more child nodes than client vdom.`),le=!0),cn());const ye=z;z=z.nextSibling,a(ye)}}else if(w&8){let z=E.children;z[0]===` +`&&(m.tagName==="PRE"||m.tagName==="TEXTAREA")&&(z=z.slice(1)),m.textContent!==z&&(fr(m,0)||(Gt("Hydration text content mismatch on",m,` + - rendered on server: ${m.textContent} + - expected on client: ${E.children}`),cn()),m.textContent=E.children)}if(O){const z=m.tagName.includes("-");for(const le in O)!(L&&L.some(ye=>ye.dir.created))&&mp(m,le,O[le],E,V)&&cn(),(ee&&(le.endsWith("value")||le==="indeterminate")||Mr(le)&&!Dn(le)||le[0]==="."||z)&&r(m,le,null,O[le],void 0,V)}let D;(D=O&&O.onVnodeBeforeMount)&&ht(D,V,E),L&&Ot(E,null,V,"beforeMount"),((D=O&&O.onVnodeMounted)||L||I)&&cc(()=>{D&&ht(D,V,E),I&&Z.enter(m),L&&Ot(E,null,V,"mounted")},W)}return m.nextSibling},p=(m,E,V,W,M,C,U)=>{U=U||!!E.dynamicChildren;const O=E.children,B=O.length;let w=!1;for(let L=0;L{const{slotScopeIds:U}=E;U&&(M=M?M.concat(U):U);const O=i(m),B=p(s(m),E,O,V,W,M,C);return B&&_n(B)&&B.data==="]"?s(E.anchor=B):(cn(),l(E.anchor=u("]"),O,B),B)},v=(m,E,V,W,M,C)=>{if(fr(m.parentElement,1)||(Gt(`Hydration node mismatch: +- rendered on server:`,m,m.nodeType===3?"(text)":_n(m)&&m.data==="["?"(start of fragment)":"",` +- expected on client:`,E.type),cn()),E.el=null,C){const B=y(m);for(;;){const w=s(m);if(w&&w!==B)a(w);else break}}const U=s(m),O=i(m);return a(m),n(null,E,O,U,V,W,Zr(O),M),U},y=(m,E="[",V="]")=>{let W=0;for(;m;)if(m=s(m),m&&_n(m)&&(m.data===E&&W++,m.data===V)){if(W===0)return s(m);W--}return m},b=(m,E,V)=>{const W=E.parentNode;W&&W.replaceChild(m,E);let M=V;for(;M;)M.vnode.el===E&&(M.vnode.el=M.subTree.el=m),M=M.parent},A=m=>m.nodeType===1&&m.tagName==="TEMPLATE";return[f,c]}function mp(e,t,n,r,o){let s,i,a,l;if(t==="class")a=e.getAttribute("class"),l=nt(n),gp(qi(a||""),qi(l))||(s=2,i="class");else if(t==="style"){a=e.getAttribute("style")||"",l=Oe(n)?n:ud(Xn(n));const u=Gi(a),f=Gi(l);if(r.dirs)for(const{dir:c,value:d}of r.dirs)c.name==="show"&&!d&&f.set("display","none");o&&Uu(o,r,f),_p(u,f)||(s=3,i="style")}else(e instanceof SVGElement&&dd(t)||e instanceof HTMLElement&&($i(t)||fd(t)))&&($i(t)?(a=e.hasAttribute(t),l=Ys(n)):n==null?(a=e.hasAttribute(t),l=!1):(e.hasAttribute(t)?a=e.getAttribute(t):t==="value"&&e.tagName==="TEXTAREA"?a=e.value:a=!1,l=pd(n)?String(n):!1),a!==l&&(s=4,i=t));if(s!=null&&!fr(e,s)){const u=d=>d===!1?"(not rendered)":`${i}="${d}"`,f=`Hydration ${ju[s]} mismatch on`,c=` + - rendered on server: ${u(a)} + - expected on client: ${u(l)} + Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead. + You should fix the source of the mismatch.`;return Gt(f,e,c),!0}return!1}function qi(e){return new Set(e.trim().split(/\s+/))}function gp(e,t){if(e.size!==t.size)return!1;for(const n of e)if(!t.has(n))return!1;return!0}function Gi(e){const t=new Map;for(const n of e.split(";")){let[r,o]=n.split(":");r=r.trim(),o=o&&o.trim(),r&&o&&t.set(r,o)}return t}function _p(e,t){if(e.size!==t.size)return!1;for(const[n,r]of e)if(r!==t.get(n))return!1;return!0}function Uu(e,t,n){const r=e.subTree;if(e.getCssVars&&(t===r||r&&r.type===_e&&r.children.includes(t))){const o=e.getCssVars();for(const s in o)n.set(`--${md(s)}`,String(o[s]))}t===r&&e.parent&&Uu(e.parent,e.vnode,n)}const Yi="data-allow-mismatch",ju={0:"text",1:"children",2:"class",3:"style",4:"attribute"};function fr(e,t){if(t===0||t===1)for(;e&&!e.hasAttribute(Yi);)e=e.parentElement;const n=e&&e.getAttribute(Yi);if(n==null)return!1;if(n==="")return!0;{const r=n.split(",");return t===0&&r.includes("children")?!0:n.split(",").includes(ju[t])}}Oo().requestIdleCallback;Oo().cancelIdleCallback;function vp(e,t){if(_n(e)&&e.data==="["){let n=1,r=e.nextSibling;for(;r;){if(r.nodeType===1){if(t(r)===!1)break}else if(_n(r))if(r.data==="]"){if(--n===0)break}else r.data==="["&&n++;r=r.nextSibling}}else t(e)}const Sn=e=>!!e.type.__asyncLoader;/*! #__NO_SIDE_EFFECTS__ */function yp(e){oe(e)&&(e={loader:e});const{loader:t,loadingComponent:n,errorComponent:r,delay:o=200,hydrate:s,timeout:i,suspensible:a=!0,onError:l}=e;let u=null,f,c=0;const d=()=>(c++,u=null,p()),p=()=>{let _;return u||(_=u=t().catch(v=>{if(v=v instanceof Error?v:new Error(String(v)),l)return new Promise((y,b)=>{l(v,()=>y(d()),()=>b(v),c+1)});throw v}).then(v=>_!==u&&u?u:(v&&(v.__esModule||v[Symbol.toStringTag]==="Module")&&(v=v.default),f=v,v)))};return me({name:"AsyncComponentWrapper",__asyncLoader:p,__asyncHydrate(_,v,y){const b=s?()=>{const A=s(y,m=>vp(_,m));A&&(v.bum||(v.bum=[])).push(A)}:y;f?b():p().then(()=>!v.isUnmounted&&b())},get __asyncResolved(){return f},setup(){const _=Be;if(oi(_),f)return()=>es(f,_);const v=m=>{u=null,Br(m,_,13,!r)};if(a&&_.suspense||Un)return p().then(m=>()=>es(m,_)).catch(m=>(v(m),()=>r?ae(r,{error:m}):null));const y=de(!1),b=de(),A=de(!!o);return o&&setTimeout(()=>{A.value=!1},o),i!=null&&setTimeout(()=>{if(!y.value&&!b.value){const m=new Error(`Async component timed out after ${i}ms.`);v(m),b.value=m}},i),p().then(()=>{y.value=!0,_.parent&&$r(_.parent.vnode)&&_.parent.update()}).catch(m=>{v(m),b.value=m}),()=>{if(y.value&&f)return es(f,_);if(b.value&&r)return ae(r,{error:b.value});if(n&&!A.value)return ae(n)}}})}function es(e,t){const{ref:n,props:r,children:o,ce:s}=t.vnode,i=ae(e,r,o);return i.ref=n,i.ce=s,delete t.vnode.ce,i}const $r=e=>e.type.__isKeepAlive;function bp(e,t){zu(e,"a",t)}function Ep(e,t){zu(e,"da",t)}function zu(e,t,n=Be){const r=e.__wdc||(e.__wdc=()=>{let o=n;for(;o;){if(o.isDeactivated)return;o=o.parent}return e()});if(Ro(t,r,n),n){let o=n.parent;for(;o&&o.parent;)$r(o.parent.vnode)&&Sp(r,t,n,o),o=o.parent}}function Sp(e,t,n,r){const o=Ro(t,e,r,!0);Lo(()=>{qs(r[t],o)},n)}function Ro(e,t,n=Be,r=!1){if(n){const o=n[e]||(n[e]=[]),s=t.__weh||(t.__weh=(...i)=>{Ut();const a=jr(n),l=Et(t,n,e,i);return a(),jt(),l});return r?o.unshift(s):o.push(s),s}}const zt=e=>(t,n=Be)=>{(!Un||e==="sp")&&Ro(e,(...r)=>t(...r),n)},Ap=zt("bm"),Je=zt("m"),Cp=zt("bu"),wp=zt("u"),si=zt("bum"),Lo=zt("um"),Tp=zt("sp"),Op=zt("rtg"),xp=zt("rtc");function kp(e,t=Be){Ro("ec",e,t)}const Pp="components";function ii(e,t){return Rp(Pp,e,!0,t)||e}const Ip=Symbol.for("v-ndc");function Rp(e,t,n=!0,r=!1){const o=$e||Be;if(o){const s=o.type;{const a=mc(s,!1);if(a&&(a===t||a===rt(t)||a===Hr(rt(t))))return s}const i=Xi(o[e]||s[e],t)||Xi(o.appContext[e],t);return!i&&r?s:i}}function Xi(e,t){return e&&(e[t]||e[rt(t)]||e[Hr(rt(t))])}function nn(e,t,n,r){let o;const s=n,i=re(e);if(i||Oe(e)){const a=i&&Nn(e);let l=!1;a&&(l=!gt(e),e=ko(e)),o=new Array(e.length);for(let u=0,f=e.length;ut(a,l,void 0,s));else{const a=Object.keys(e);o=new Array(a.length);for(let l=0,u=a.length;lxr(t)?!(t.type===je||t.type===_e&&!Ku(t.children)):!0)?e:null}const As=e=>e?pc(e)?No(e):As(e.parent):null,vr=Ne(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>As(e.parent),$root:e=>As(e.root),$host:e=>e.ce,$emit:e=>e.emit,$options:e=>ai(e),$forceUpdate:e=>e.f||(e.f=()=>{ni(e.update)}),$nextTick:e=>e.n||(e.n=Jn.bind(e.proxy)),$watch:e=>Jp.bind(e)}),ts=(e,t)=>e!==Se&&!e.__isScriptSetup&&he(e,t),Lp={get({_:e},t){if(t==="__v_skip")return!0;const{ctx:n,setupState:r,data:o,props:s,accessCache:i,type:a,appContext:l}=e;let u;if(t[0]!=="$"){const p=i[t];if(p!==void 0)switch(p){case 1:return r[t];case 2:return o[t];case 4:return n[t];case 3:return s[t]}else{if(ts(r,t))return i[t]=1,r[t];if(o!==Se&&he(o,t))return i[t]=2,o[t];if((u=e.propsOptions[0])&&he(u,t))return i[t]=3,s[t];if(n!==Se&&he(n,t))return i[t]=4,n[t];Cs&&(i[t]=0)}}const f=vr[t];let c,d;if(f)return t==="$attrs"&&Ke(e.attrs,"get",""),f(e);if((c=a.__cssModules)&&(c=c[t]))return c;if(n!==Se&&he(n,t))return i[t]=4,n[t];if(d=l.config.globalProperties,he(d,t))return d[t]},set({_:e},t,n){const{data:r,setupState:o,ctx:s}=e;return ts(o,t)?(o[t]=n,!0):r!==Se&&he(r,t)?(r[t]=n,!0):he(e.props,t)||t[0]==="$"&&t.slice(1)in e?!1:(s[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:r,appContext:o,propsOptions:s}},i){let a;return!!n[i]||e!==Se&&he(e,i)||ts(t,i)||(a=s[0])&&he(a,i)||he(r,i)||he(vr,i)||he(o.config.globalProperties,i)},defineProperty(e,t,n){return n.get!=null?e._.accessCache[t]=0:he(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}};function Zi(e){return re(e)?e.reduce((t,n)=>(t[n]=null,t),{}):e}let Cs=!0;function Dp(e){const t=ai(e),n=e.proxy,r=e.ctx;Cs=!1,t.beforeCreate&&Ji(t.beforeCreate,e,"bc");const{data:o,computed:s,methods:i,watch:a,provide:l,inject:u,created:f,beforeMount:c,mounted:d,beforeUpdate:p,updated:_,activated:v,deactivated:y,beforeDestroy:b,beforeUnmount:A,destroyed:m,unmounted:E,render:V,renderTracked:W,renderTriggered:M,errorCaptured:C,serverPrefetch:U,expose:O,inheritAttrs:B,components:w,directives:L,filters:Z}=t;if(u&&Np(u,r,null),i)for(const D in i){const z=i[D];oe(z)&&(r[D]=z.bind(n))}if(o){const D=o.call(n,n);Te(D)&&(e.data=Fr(D))}if(Cs=!0,s)for(const D in s){const z=s[D],le=oe(z)?z.bind(n,n):oe(z.get)?z.get.bind(n,n):kt,ye=!oe(z)&&oe(z.set)?z.set.bind(n):kt,xe=H({get:le,set:ye});Object.defineProperty(r,D,{enumerable:!0,configurable:!0,get:()=>xe.value,set:be=>xe.value=be})}if(a)for(const D in a)Wu(a[D],r,n,D);if(l){const D=oe(l)?l.call(n):l;Reflect.ownKeys(D).forEach(z=>{An(z,D[z])})}f&&Ji(f,e,"c");function I(D,z){re(z)?z.forEach(le=>D(le.bind(n))):z&&D(z.bind(n))}if(I(Ap,c),I(Je,d),I(Cp,p),I(wp,_),I(bp,v),I(Ep,y),I(kp,C),I(xp,W),I(Op,M),I(si,A),I(Lo,E),I(Tp,U),re(O))if(O.length){const D=e.exposed||(e.exposed={});O.forEach(z=>{Object.defineProperty(D,z,{get:()=>n[z],set:le=>n[z]=le})})}else e.exposed||(e.exposed={});V&&e.render===kt&&(e.render=V),B!=null&&(e.inheritAttrs=B),w&&(e.components=w),L&&(e.directives=L),U&&oi(e)}function Np(e,t,n=kt){re(e)&&(e=ws(e));for(const r in e){const o=e[r];let s;Te(o)?"default"in o?s=Ze(o.from||r,o.default,!0):s=Ze(o.from||r):s=Ze(o),De(s)?Object.defineProperty(t,r,{enumerable:!0,configurable:!0,get:()=>s.value,set:i=>s.value=i}):t[r]=s}}function Ji(e,t,n){Et(re(e)?e.map(r=>r.bind(t.proxy)):e.bind(t.proxy),t,n)}function Wu(e,t,n,r){let o=r.includes(".")?ac(n,r):()=>n[r];if(Oe(e)){const s=t[e];oe(s)&&Ue(o,s)}else if(oe(e))Ue(o,e.bind(n));else if(Te(e))if(re(e))e.forEach(s=>Wu(s,t,n,r));else{const s=oe(e.handler)?e.handler.bind(n):t[e.handler];oe(s)&&Ue(o,s,e)}}function ai(e){const t=e.type,{mixins:n,extends:r}=t,{mixins:o,optionsCache:s,config:{optionMergeStrategies:i}}=e.appContext,a=s.get(t);let l;return a?l=a:!o.length&&!n&&!r?l=t:(l={},o.length&&o.forEach(u=>bo(l,u,i,!0)),bo(l,t,i)),Te(t)&&s.set(t,l),l}function bo(e,t,n,r=!1){const{mixins:o,extends:s}=t;s&&bo(e,s,n,!0),o&&o.forEach(i=>bo(e,i,n,!0));for(const i in t)if(!(r&&i==="expose")){const a=Vp[i]||n&&n[i];e[i]=a?a(e[i],t[i]):t[i]}return e}const Vp={data:Qi,props:ea,emits:ea,methods:dr,computed:dr,beforeCreate:Ge,created:Ge,beforeMount:Ge,mounted:Ge,beforeUpdate:Ge,updated:Ge,beforeDestroy:Ge,beforeUnmount:Ge,destroyed:Ge,unmounted:Ge,activated:Ge,deactivated:Ge,errorCaptured:Ge,serverPrefetch:Ge,components:dr,directives:dr,watch:Hp,provide:Qi,inject:Mp};function Qi(e,t){return t?e?function(){return Ne(oe(e)?e.call(this,this):e,oe(t)?t.call(this,this):t)}:t:e}function Mp(e,t){return dr(ws(e),ws(t))}function ws(e){if(re(e)){const t={};for(let n=0;n1)return n&&oe(t)?t.call(r&&r.proxy):t}}const Gu={},Yu=()=>Object.create(Gu),Xu=e=>Object.getPrototypeOf(e)===Gu;function $p(e,t,n,r=!1){const o={},s=Yu();e.propsDefaults=Object.create(null),Zu(e,t,o,s);for(const i in e.propsOptions[0])i in o||(o[i]=void 0);n?e.props=r?o:Cu(o):e.type.props?e.props=o:e.props=s,e.attrs=s}function Up(e,t,n,r){const{props:o,attrs:s,vnode:{patchFlag:i}}=e,a=ue(o),[l]=e.propsOptions;let u=!1;if((r||i>0)&&!(i&16)){if(i&8){const f=e.vnode.dynamicProps;for(let c=0;c{l=!0;const[d,p]=Ju(c,t,!0);Ne(i,d),p&&a.push(...p)};!n&&t.mixins.length&&t.mixins.forEach(f),e.extends&&f(e.extends),e.mixins&&e.mixins.forEach(f)}if(!s&&!l)return Te(e)&&r.set(e,Rn),Rn;if(re(s))for(let f=0;fe[0]==="_"||e==="$stable",li=e=>re(e)?e.map(mt):[mt(e)],zp=(e,t,n)=>{if(t._n)return t;const r=Ve((...o)=>li(t(...o)),n);return r._c=!1,r},ec=(e,t,n)=>{const r=e._ctx;for(const o in e){if(Qu(o))continue;const s=e[o];if(oe(s))t[o]=zp(o,s,r);else if(s!=null){const i=li(s);t[o]=()=>i}}},tc=(e,t)=>{const n=li(t);e.slots.default=()=>n},nc=(e,t,n)=>{for(const r in t)(n||r!=="_")&&(e[r]=t[r])},Kp=(e,t,n)=>{const r=e.slots=Yu();if(e.vnode.shapeFlag&32){const o=t._;o?(nc(r,t,n),n&&$n(r,"_",o,!0)):ec(t,r)}else t&&tc(e,t)},Wp=(e,t,n)=>{const{vnode:r,slots:o}=e;let s=!0,i=Se;if(r.shapeFlag&32){const a=t._;a?n&&a===1?s=!1:nc(o,t,n):(s=!t.$stable,ec(t,o)),i=t}else t&&(tc(e,t),i={default:1});if(s)for(const a in o)!Qu(a)&&i[a]==null&&delete o[a]},at=cc;function qp(e){return Gp(e,hp)}function Gp(e,t){const n=Oo();n.__VUE__=!0,Lu(n.__VUE_DEVTOOLS_GLOBAL_HOOK__,n);const{insert:r,remove:o,patchProp:s,createElement:i,createText:a,createComment:l,setText:u,setElementText:f,parentNode:c,nextSibling:d,setScopeId:p=kt,insertStaticContent:_}=e,v=(h,g,S,k=null,T=null,R=null,K=void 0,$=null,F=!!g.dynamicChildren)=>{if(h===g)return;h&&!vn(h,g)&&(k=x(h),be(h,T,R,!0),h=null),g.patchFlag===-2&&(F=!1,g.dynamicChildren=null);const{type:N,ref:te,shapeFlag:G}=g;switch(N){case tn:y(h,g,S,k);break;case je:b(h,g,S,k);break;case Hn:h==null&&A(g,S,k,K);break;case _e:w(h,g,S,k,T,R,K,$,F);break;default:G&1?V(h,g,S,k,T,R,K,$,F):G&6?L(h,g,S,k,T,R,K,$,F):(G&64||G&128)&&N.process(h,g,S,k,T,R,K,$,F,J)}te!=null&&T&&yo(te,h&&h.ref,R,g||h,!g)},y=(h,g,S,k)=>{if(h==null)r(g.el=a(g.children),S,k);else{const T=g.el=h.el;g.children!==h.children&&u(T,g.children)}},b=(h,g,S,k)=>{h==null?r(g.el=l(g.children||""),S,k):g.el=h.el},A=(h,g,S,k)=>{[h.el,h.anchor]=_(h.children,g,S,k,h.el,h.anchor)},m=({el:h,anchor:g},S,k)=>{let T;for(;h&&h!==g;)T=d(h),r(h,S,k),h=T;r(g,S,k)},E=({el:h,anchor:g})=>{let S;for(;h&&h!==g;)S=d(h),o(h),h=S;o(g)},V=(h,g,S,k,T,R,K,$,F)=>{g.type==="svg"?K="svg":g.type==="math"&&(K="mathml"),h==null?W(g,S,k,T,R,K,$,F):U(h,g,T,R,K,$,F)},W=(h,g,S,k,T,R,K,$)=>{let F,N;const{props:te,shapeFlag:G,transition:Q,dirs:se}=h;if(F=h.el=i(h.type,R,te&&te.is,te),G&8?f(F,h.children):G&16&&C(h.children,F,null,k,T,ns(h,R),K,$),se&&Ot(h,null,k,"created"),M(F,h,h.scopeId,K,k),te){for(const Ae in te)Ae!=="value"&&!Dn(Ae)&&s(F,Ae,null,te[Ae],R,k);"value"in te&&s(F,"value",null,te.value,R),(N=te.onVnodeBeforeMount)&&ht(N,k,h)}$n(F,"__vnode",h,!0),$n(F,"__vueParentComponent",k,!0),se&&Ot(h,null,k,"beforeMount");const fe=rc(T,Q);fe&&Q.beforeEnter(F),r(F,g,S),((N=te&&te.onVnodeMounted)||fe||se)&&at(()=>{N&&ht(N,k,h),fe&&Q.enter(F),se&&Ot(h,null,k,"mounted")},T)},M=(h,g,S,k,T)=>{if(S&&p(h,S),k)for(let R=0;R{for(let N=F;N{const $=g.el=h.el;$.__vnode=g;let{patchFlag:F,dynamicChildren:N,dirs:te}=g;F|=h.patchFlag&16;const G=h.props||Se,Q=g.props||Se;let se;if(S&&fn(S,!1),(se=Q.onVnodeBeforeUpdate)&&ht(se,S,g,h),te&&Ot(g,h,S,"beforeUpdate"),S&&fn(S,!0),(G.innerHTML&&Q.innerHTML==null||G.textContent&&Q.textContent==null)&&f($,""),N?O(h.dynamicChildren,N,$,S,k,ns(g,T),R):K||z(h,g,$,null,S,k,ns(g,T),R,!1),F>0){if(F&16)B($,G,Q,S,T);else if(F&2&&G.class!==Q.class&&s($,"class",null,Q.class,T),F&4&&s($,"style",G.style,Q.style,T),F&8){const fe=g.dynamicProps;for(let Ae=0;Ae{se&&ht(se,S,g,h),te&&Ot(g,h,S,"updated")},k)},O=(h,g,S,k,T,R,K)=>{for(let $=0;${if(g!==S){if(g!==Se)for(const R in g)!Dn(R)&&!(R in S)&&s(h,R,g[R],null,T,k);for(const R in S){if(Dn(R))continue;const K=S[R],$=g[R];K!==$&&R!=="value"&&s(h,R,$,K,T,k)}"value"in S&&s(h,"value",g.value,S.value,T)}},w=(h,g,S,k,T,R,K,$,F)=>{const N=g.el=h?h.el:a(""),te=g.anchor=h?h.anchor:a("");let{patchFlag:G,dynamicChildren:Q,slotScopeIds:se}=g;se&&($=$?$.concat(se):se),h==null?(r(N,S,k),r(te,S,k),C(g.children||[],S,te,T,R,K,$,F)):G>0&&G&64&&Q&&h.dynamicChildren?(O(h.dynamicChildren,Q,S,T,R,K,$),(g.key!=null||T&&g===T.subTree)&&oc(h,g,!0)):z(h,g,S,te,T,R,K,$,F)},L=(h,g,S,k,T,R,K,$,F)=>{g.slotScopeIds=$,h==null?g.shapeFlag&512?T.ctx.activate(g,S,k,K,F):Z(g,S,k,T,R,K,F):ee(h,g,F)},Z=(h,g,S,k,T,R,K)=>{const $=h.component=dh(h,k,T);if($r(h)&&($.ctx.renderer=J),ph($,!1,K),$.asyncDep){if(T&&T.registerDep($,I,K),!h.el){const F=$.subTree=ae(je);b(null,F,g,S)}}else I($,h,g,S,T,R,K)},ee=(h,g,S)=>{const k=g.component=h.component;if(rh(h,g,S))if(k.asyncDep&&!k.asyncResolved){D(k,g,S);return}else k.next=g,k.update();else g.el=h.el,k.vnode=g},I=(h,g,S,k,T,R,K)=>{const $=()=>{if(h.isMounted){let{next:G,bu:Q,u:se,parent:fe,vnode:Ae}=h;{const st=sc(h);if(st){G&&(G.el=Ae.el,D(h,G,K)),st.asyncDep.then(()=>{h.isUnmounted||$()});return}}let ge=G,ot;fn(h,!1),G?(G.el=Ae.el,D(h,G,K)):G=Ae,Q&&qo(Q),(ot=G.props&&G.props.onVnodeBeforeUpdate)&&ht(ot,fe,G,Ae),fn(h,!0);const ze=rs(h),vt=h.subTree;h.subTree=ze,v(vt,ze,c(vt.el),x(vt),h,T,R),G.el=ze.el,ge===null&&oh(h,ze.el),se&&at(se,T),(ot=G.props&&G.props.onVnodeUpdated)&&at(()=>ht(ot,fe,G,Ae),T),Du(h)}else{let G;const{el:Q,props:se}=g,{bm:fe,m:Ae,parent:ge,root:ot,type:ze}=h,vt=Sn(g);if(fn(h,!1),fe&&qo(fe),!vt&&(G=se&&se.onVnodeBeforeMount)&&ht(G,ge,g),fn(h,!0),Q&&Ee){const st=()=>{h.subTree=rs(h),Ee(Q,h.subTree,h,T,null)};vt&&ze.__asyncHydrate?ze.__asyncHydrate(Q,h,st):st()}else{ot.ce&&ot.ce._injectChildStyle(ze);const st=h.subTree=rs(h);v(null,st,S,k,h,T,R),g.el=st.el}if(Ae&&at(Ae,T),!vt&&(G=se&&se.onVnodeMounted)){const st=g;at(()=>ht(G,ge,st),T)}(g.shapeFlag&256||ge&&Sn(ge.vnode)&&ge.vnode.shapeFlag&256)&&h.a&&at(h.a,T),h.isMounted=!0,op(h),g=S=k=null}};h.scope.on();const F=h.effect=new cu($);h.scope.off();const N=h.update=F.run.bind(F),te=h.job=F.runIfDirty.bind(F);te.i=h,te.id=h.uid,F.scheduler=()=>ni(te),fn(h,!0),N()},D=(h,g,S)=>{g.component=h;const k=h.vnode.props;h.vnode=g,h.next=null,Up(h,g.props,k,S),Wp(h,g.children,S),Ut(),zi(h),jt()},z=(h,g,S,k,T,R,K,$,F=!1)=>{const N=h&&h.children,te=h?h.shapeFlag:0,G=g.children,{patchFlag:Q,shapeFlag:se}=g;if(Q>0){if(Q&128){ye(N,G,S,k,T,R,K,$,F);return}else if(Q&256){le(N,G,S,k,T,R,K,$,F);return}}se&8?(te&16&&tt(N,T,R),G!==N&&f(S,G)):te&16?se&16?ye(N,G,S,k,T,R,K,$,F):tt(N,T,R,!0):(te&8&&f(S,""),se&16&&C(G,S,k,T,R,K,$,F))},le=(h,g,S,k,T,R,K,$,F)=>{h=h||Rn,g=g||Rn;const N=h.length,te=g.length,G=Math.min(N,te);let Q;for(Q=0;Qte?tt(h,T,R,!0,!1,G):C(g,S,k,T,R,K,$,F,G)},ye=(h,g,S,k,T,R,K,$,F)=>{let N=0;const te=g.length;let G=h.length-1,Q=te-1;for(;N<=G&&N<=Q;){const se=h[N],fe=g[N]=F?Zt(g[N]):mt(g[N]);if(vn(se,fe))v(se,fe,S,null,T,R,K,$,F);else break;N++}for(;N<=G&&N<=Q;){const se=h[G],fe=g[Q]=F?Zt(g[Q]):mt(g[Q]);if(vn(se,fe))v(se,fe,S,null,T,R,K,$,F);else break;G--,Q--}if(N>G){if(N<=Q){const se=Q+1,fe=seQ)for(;N<=G;)be(h[N],T,R,!0),N++;else{const se=N,fe=N,Ae=new Map;for(N=fe;N<=Q;N++){const it=g[N]=F?Zt(g[N]):mt(g[N]);it.key!=null&&Ae.set(it.key,N)}let ge,ot=0;const ze=Q-fe+1;let vt=!1,st=0;const rr=new Array(ze);for(N=0;N=ze){be(it,T,R,!0);continue}let Ct;if(it.key!=null)Ct=Ae.get(it.key);else for(ge=fe;ge<=Q;ge++)if(rr[ge-fe]===0&&vn(it,g[ge])){Ct=ge;break}Ct===void 0?be(it,T,R,!0):(rr[Ct-fe]=N+1,Ct>=st?st=Ct:vt=!0,v(it,g[Ct],S,null,T,R,K,$,F),ot++)}const Mi=vt?Yp(rr):Rn;for(ge=Mi.length-1,N=ze-1;N>=0;N--){const it=fe+N,Ct=g[it],Hi=it+1{const{el:R,type:K,transition:$,children:F,shapeFlag:N}=h;if(N&6){xe(h.component.subTree,g,S,k);return}if(N&128){h.suspense.move(g,S,k);return}if(N&64){K.move(h,g,S,J);return}if(K===_e){r(R,g,S);for(let G=0;G$.enter(R),T);else{const{leave:G,delayLeave:Q,afterLeave:se}=$,fe=()=>r(R,g,S),Ae=()=>{G(R,()=>{fe(),se&&se()})};Q?Q(R,fe,Ae):Ae()}else r(R,g,S)},be=(h,g,S,k=!1,T=!1)=>{const{type:R,props:K,ref:$,children:F,dynamicChildren:N,shapeFlag:te,patchFlag:G,dirs:Q,cacheIndex:se}=h;if(G===-2&&(T=!1),$!=null&&yo($,null,S,h,!0),se!=null&&(g.renderCache[se]=void 0),te&256){g.ctx.deactivate(h);return}const fe=te&1&&Q,Ae=!Sn(h);let ge;if(Ae&&(ge=K&&K.onVnodeBeforeUnmount)&&ht(ge,g,h),te&6)et(h.component,S,k);else{if(te&128){h.suspense.unmount(S,k);return}fe&&Ot(h,null,g,"beforeUnmount"),te&64?h.type.remove(h,g,S,J,k):N&&!N.hasOnce&&(R!==_e||G>0&&G&64)?tt(N,g,S,!1,!0):(R===_e&&G&384||!T&&te&16)&&tt(F,g,S),k&&Qe(h)}(Ae&&(ge=K&&K.onVnodeUnmounted)||fe)&&at(()=>{ge&&ht(ge,g,h),fe&&Ot(h,null,g,"unmounted")},S)},Qe=h=>{const{type:g,el:S,anchor:k,transition:T}=h;if(g===_e){_t(S,k);return}if(g===Hn){E(h);return}const R=()=>{o(S),T&&!T.persisted&&T.afterLeave&&T.afterLeave()};if(h.shapeFlag&1&&T&&!T.persisted){const{leave:K,delayLeave:$}=T,F=()=>K(S,R);$?$(h.el,R,F):F()}else R()},_t=(h,g)=>{let S;for(;h!==g;)S=d(h),o(h),h=S;o(g)},et=(h,g,S)=>{const{bum:k,scope:T,job:R,subTree:K,um:$,m:F,a:N}=h;na(F),na(N),k&&qo(k),T.stop(),R&&(R.flags|=8,be(K,h,g,S)),$&&at($,g),at(()=>{h.isUnmounted=!0},g),g&&g.pendingBranch&&!g.isUnmounted&&h.asyncDep&&!h.asyncResolved&&h.suspenseId===g.pendingId&&(g.deps--,g.deps===0&&g.resolve()),ip(h)},tt=(h,g,S,k=!1,T=!1,R=0)=>{for(let K=R;K{if(h.shapeFlag&6)return x(h.component.subTree);if(h.shapeFlag&128)return h.suspense.next();const g=d(h.anchor||h.el),S=g&&g[lp];return S?d(S):g};let q=!1;const j=(h,g,S)=>{h==null?g._vnode&&be(g._vnode,null,null,!0):v(g._vnode||null,h,g,null,null,null,S),g._vnode=h,q||(q=!0,zi(),go(),q=!1)},J={p:v,um:be,m:xe,r:Qe,mt:Z,mc:C,pc:z,pbc:O,n:x,o:e};let ce,Ee;return t&&([ce,Ee]=t(J)),{render:j,hydrate:ce,createApp:Bp(j,ce)}}function ns({type:e,props:t},n){return n==="svg"&&e==="foreignObject"||n==="mathml"&&e==="annotation-xml"&&t&&t.encoding&&t.encoding.includes("html")?void 0:n}function fn({effect:e,job:t},n){n?(e.flags|=32,t.flags|=4):(e.flags&=-33,t.flags&=-5)}function rc(e,t){return(!e||e&&!e.pendingBranch)&&t&&!t.persisted}function oc(e,t,n=!1){const r=e.children,o=t.children;if(re(r)&&re(o))for(let s=0;s>1,e[n[a]]0&&(t[r]=n[s-1]),n[s]=r)}}for(s=n.length,i=n[s-1];s-- >0;)n[s]=i,i=t[i];return n}function sc(e){const t=e.subTree.component;if(t)return t.asyncDep&&!t.asyncResolved?t:sc(t)}function na(e){if(e)for(let t=0;tZe(Xp);function ic(e,t){return ui(e,null,t)}function Ue(e,t,n){return ui(e,t,n)}function ui(e,t,n=Se){const{immediate:r,deep:o,flush:s,once:i}=n,a=Ne({},n),l=t&&r||!t&&s!=="post";let u;if(Un){if(s==="sync"){const p=Zp();u=p.__watcherHandles||(p.__watcherHandles=[])}else if(!l){const p=()=>{};return p.stop=kt,p.resume=kt,p.pause=kt,p}}const f=Be;a.call=(p,_,v)=>Et(p,f,_,v);let c=!1;s==="post"?a.scheduler=p=>{at(p,f&&f.suspense)}:s!=="sync"&&(c=!0,a.scheduler=(p,_)=>{_?p():ni(p)}),a.augmentJob=p=>{t&&(p.flags|=4),c&&(p.flags|=2,f&&(p.id=f.uid,p.i=f))};const d=Gd(e,t,a);return Un&&(u?u.push(d):l&&d()),d}function Jp(e,t,n){const r=this.proxy,o=Oe(e)?e.includes(".")?ac(r,e):()=>r[e]:e.bind(r,r);let s;oe(t)?s=t:(s=t.handler,n=t);const i=jr(this),a=ui(o,s.bind(r),n);return i(),a}function ac(e,t){const n=t.split(".");return()=>{let r=e;for(let o=0;ot==="modelValue"||t==="model-value"?e.modelModifiers:e[`${t}Modifiers`]||e[`${rt(t)}Modifiers`]||e[`${$t(t)}Modifiers`];function eh(e,t,...n){if(e.isUnmounted)return;const r=e.vnode.props||Se;let o=n;const s=t.startsWith("update:"),i=s&&Qp(r,t.slice(7));i&&(i.trim&&(o=n.map(f=>Oe(f)?f.trim():f)),i.number&&(o=n.map(rd))),ap(e,t,o);let a,l=r[a=Wo(t)]||r[a=Wo(rt(t))];!l&&s&&(l=r[a=Wo($t(t))]),l&&Et(l,e,6,o);const u=r[a+"Once"];if(u){if(!e.emitted)e.emitted={};else if(e.emitted[a])return;e.emitted[a]=!0,Et(u,e,6,o)}}function lc(e,t,n=!1){const r=t.emitsCache,o=r.get(e);if(o!==void 0)return o;const s=e.emits;let i={},a=!1;if(!oe(e)){const l=u=>{const f=lc(u,t,!0);f&&(a=!0,Ne(i,f))};!n&&t.mixins.length&&t.mixins.forEach(l),e.extends&&l(e.extends),e.mixins&&e.mixins.forEach(l)}return!s&&!a?(Te(e)&&r.set(e,null),null):(re(s)?s.forEach(l=>i[l]=null):Ne(i,s),Te(e)&&r.set(e,i),i)}function Do(e,t){return!e||!Mr(t)?!1:(t=t.slice(2).replace(/Once$/,""),he(e,t[0].toLowerCase()+t.slice(1))||he(e,$t(t))||he(e,t))}function rs(e){const{type:t,vnode:n,proxy:r,withProxy:o,propsOptions:[s],slots:i,attrs:a,emit:l,render:u,renderCache:f,props:c,data:d,setupState:p,ctx:_,inheritAttrs:v}=e,y=_o(e);let b,A;try{if(n.shapeFlag&4){const E=o||r,V=E;b=mt(u.call(V,E,f,c,p,d,_)),A=a}else{const E=t;b=mt(E.length>1?E(c,{attrs:a,slots:i,emit:l}):E(c,null)),A=t.props?a:th(a)}}catch(E){yr.length=0,Br(E,e,1),b=ae(je)}let m=b;if(A&&v!==!1){const E=Object.keys(A),{shapeFlag:V}=m;E.length&&V&7&&(s&&E.some(Ws)&&(A=nh(A,s)),m=rn(m,A,!1,!0))}return n.dirs&&(m=rn(m,null,!1,!0),m.dirs=m.dirs?m.dirs.concat(n.dirs):n.dirs),n.transition&&Tr(m,n.transition),b=m,_o(y),b}const th=e=>{let t;for(const n in e)(n==="class"||n==="style"||Mr(n))&&((t||(t={}))[n]=e[n]);return t},nh=(e,t)=>{const n={};for(const r in e)(!Ws(r)||!(r.slice(9)in t))&&(n[r]=e[r]);return n};function rh(e,t,n){const{props:r,children:o,component:s}=e,{props:i,children:a,patchFlag:l}=t,u=s.emitsOptions;if(t.dirs||t.transition)return!0;if(n&&l>=0){if(l&1024)return!0;if(l&16)return r?ra(r,i,u):!!i;if(l&8){const f=t.dynamicProps;for(let c=0;ce.__isSuspense;function cc(e,t){t&&t.pendingBranch?re(e)?t.effects.push(...e):t.effects.push(e):tp(e)}const _e=Symbol.for("v-fgt"),tn=Symbol.for("v-txt"),je=Symbol.for("v-cmt"),Hn=Symbol.for("v-stc"),yr=[];let ut=null;function Y(e=!1){yr.push(ut=e?null:[])}function sh(){yr.pop(),ut=yr[yr.length-1]||null}let Or=1;function oa(e){Or+=e,e<0&&ut&&(ut.hasOnce=!0)}function fc(e){return e.dynamicChildren=Or>0?ut||Rn:null,sh(),Or>0&&ut&&ut.push(e),e}function ne(e,t,n,r,o,s){return fc(ie(e,t,n,r,o,s,!0))}function Le(e,t,n,r,o){return fc(ae(e,t,n,r,o,!0))}function xr(e){return e?e.__v_isVNode===!0:!1}function vn(e,t){return e.type===t.type&&e.key===t.key}const dc=({key:e})=>e??null,io=({ref:e,ref_key:t,ref_for:n})=>(typeof e=="number"&&(e=""+e),e!=null?Oe(e)||De(e)||oe(e)?{i:$e,r:e,k:t,f:!!n}:e:null);function ie(e,t=null,n=null,r=0,o=null,s=e===_e?0:1,i=!1,a=!1){const l={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&dc(t),ref:t&&io(t),scopeId:Nu,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetStart:null,targetAnchor:null,staticCount:0,shapeFlag:s,patchFlag:r,dynamicProps:o,dynamicChildren:null,appContext:null,ctx:$e};return a?(ci(l,n),s&128&&e.normalize(l)):n&&(l.shapeFlag|=Oe(n)?8:16),Or>0&&!i&&ut&&(l.patchFlag>0||s&6)&&l.patchFlag!==32&&ut.push(l),l}const ae=ih;function ih(e,t=null,n=null,r=0,o=null,s=!1){if((!e||e===Ip)&&(e=je),xr(e)){const a=rn(e,t,!0);return n&&ci(a,n),Or>0&&!s&&ut&&(a.shapeFlag&6?ut[ut.indexOf(e)]=a:ut.push(a)),a.patchFlag=-2,a}if(yh(e)&&(e=e.__vccOpts),t){t=ah(t);let{class:a,style:l}=t;a&&!Oe(a)&&(t.class=nt(a)),Te(l)&&(ti(l)&&!re(l)&&(l=Ne({},l)),t.style=Xn(l))}const i=Oe(e)?1:uc(e)?128:Vu(e)?64:Te(e)?4:oe(e)?2:0;return ie(e,t,n,r,o,i,s,!0)}function ah(e){return e?ti(e)||Xu(e)?Ne({},e):e:null}function rn(e,t,n=!1,r=!1){const{props:o,ref:s,patchFlag:i,children:a,transition:l}=e,u=t?uh(o||{},t):o,f={__v_isVNode:!0,__v_skip:!0,type:e.type,props:u,key:u&&dc(u),ref:t&&t.ref?n&&s?re(s)?s.concat(io(t)):[s,io(t)]:io(t):s,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:a,target:e.target,targetStart:e.targetStart,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==_e?i===-1?16:i|16:i,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:l,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&rn(e.ssContent),ssFallback:e.ssFallback&&rn(e.ssFallback),el:e.el,anchor:e.anchor,ctx:e.ctx,ce:e.ce};return l&&r&&Tr(f,l.clone(f)),f}function on(e=" ",t=0){return ae(tn,null,e,t)}function lh(e,t){const n=ae(Hn,null,e);return n.staticCount=t,n}function He(e="",t=!1){return t?(Y(),Le(je,null,e)):ae(je,null,e)}function mt(e){return e==null||typeof e=="boolean"?ae(je):re(e)?ae(_e,null,e.slice()):xr(e)?Zt(e):ae(tn,null,String(e))}function Zt(e){return e.el===null&&e.patchFlag!==-1||e.memo?e:rn(e)}function ci(e,t){let n=0;const{shapeFlag:r}=e;if(t==null)t=null;else if(re(t))n=16;else if(typeof t=="object")if(r&65){const o=t.default;o&&(o._c&&(o._d=!1),ci(e,o()),o._c&&(o._d=!0));return}else{n=32;const o=t._;!o&&!Xu(t)?t._ctx=$e:o===3&&$e&&($e.slots._===1?t._=1:(t._=2,e.patchFlag|=1024))}else oe(t)?(t={default:t,_ctx:$e},n=32):(t=String(t),r&64?(n=16,t=[on(t)]):n=8);e.children=t,e.shapeFlag|=n}function uh(...e){const t={};for(let n=0;nBe||$e;let Eo,Os;{const e=Oo(),t=(n,r)=>{let o;return(o=e[n])||(o=e[n]=[]),o.push(r),s=>{o.length>1?o.forEach(i=>i(s)):o[0](s)}};Eo=t("__VUE_INSTANCE_SETTERS__",n=>Be=n),Os=t("__VUE_SSR_SETTERS__",n=>Un=n)}const jr=e=>{const t=Be;return Eo(e),e.scope.on(),()=>{e.scope.off(),Eo(t)}},sa=()=>{Be&&Be.scope.off(),Eo(null)};function pc(e){return e.vnode.shapeFlag&4}let Un=!1;function ph(e,t=!1,n=!1){t&&Os(t);const{props:r,children:o}=e.vnode,s=pc(e);$p(e,r,s,t),Kp(e,o,n);const i=s?hh(e,t):void 0;return t&&Os(!1),i}function hh(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=new Proxy(e.ctx,Lp);const{setup:r}=n;if(r){Ut();const o=e.setupContext=r.length>1?gh(e):null,s=jr(e),i=Zn(r,e,0,[e.props,o]),a=ru(i);if(jt(),s(),(a||e.sp)&&!Sn(e)&&oi(e),a){if(i.then(sa,sa),t)return i.then(l=>{ia(e,l,t)}).catch(l=>{Br(l,e,0)});e.asyncDep=i}else ia(e,i,t)}else hc(e,t)}function ia(e,t,n){oe(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:Te(t)&&(e.devtoolsRawSetupState=t,e.setupState=Tu(t)),hc(e,n)}let aa;function hc(e,t,n){const r=e.type;if(!e.render){if(!t&&aa&&!r.render){const o=r.template||ai(e).template;if(o){const{isCustomElement:s,compilerOptions:i}=e.appContext.config,{delimiters:a,compilerOptions:l}=r,u=Ne(Ne({isCustomElement:s,delimiters:a},i),l);r.render=aa(o,u)}}e.render=r.render||kt}{const o=jr(e);Ut();try{Dp(e)}finally{jt(),o()}}}const mh={get(e,t){return Ke(e,"get",""),e[t]}};function gh(e){const t=n=>{e.exposed=n||{}};return{attrs:new Proxy(e.attrs,mh),slots:e.slots,emit:e.emit,expose:t}}function No(e){return e.exposed?e.exposeProxy||(e.exposeProxy=new Proxy(Tu(Md(e.exposed)),{get(t,n){if(n in t)return t[n];if(n in vr)return vr[n](e)},has(t,n){return n in t||n in vr}})):e.proxy}const _h=/(?:^|[-_])(\w)/g,vh=e=>e.replace(_h,t=>t.toUpperCase()).replace(/[-_]/g,"");function mc(e,t=!0){return oe(e)?e.displayName||e.name:e.name||t&&e.__name}function gc(e,t,n=!1){let r=mc(t);if(!r&&t.__file){const o=t.__file.match(/([^/\\]+)\.\w+$/);o&&(r=o[1])}if(!r&&e&&e.parent){const o=s=>{for(const i in s)if(s[i]===t)return i};r=o(e.components||e.parent.type.components)||o(e.appContext.components)}return r?vh(r):n?"App":"Anonymous"}function yh(e){return oe(e)&&"__vccOpts"in e}const H=(e,t)=>Wd(e,t,Un);function ve(e,t,n){const r=arguments.length;return r===2?Te(t)&&!re(t)?xr(t)?ae(e,null,[t]):ae(e,t):ae(e,null,t):(r>3?n=Array.prototype.slice.call(arguments,2):r===3&&xr(n)&&(n=[n]),ae(e,t,n))}const la="3.5.12";/** +* @vue/runtime-dom v3.5.12 +* (c) 2018-present Yuxi (Evan) You and Vue contributors +* @license MIT +**/let xs;const ua=typeof window<"u"&&window.trustedTypes;if(ua)try{xs=ua.createPolicy("vue",{createHTML:e=>e})}catch{}const _c=xs?e=>xs.createHTML(e):e=>e,bh="http://www.w3.org/2000/svg",Eh="http://www.w3.org/1998/Math/MathML",Vt=typeof document<"u"?document:null,ca=Vt&&Vt.createElement("template"),Sh={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,r)=>{const o=t==="svg"?Vt.createElementNS(bh,e):t==="mathml"?Vt.createElementNS(Eh,e):n?Vt.createElement(e,{is:n}):Vt.createElement(e);return e==="select"&&r&&r.multiple!=null&&o.setAttribute("multiple",r.multiple),o},createText:e=>Vt.createTextNode(e),createComment:e=>Vt.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>Vt.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,n,r,o,s){const i=n?n.previousSibling:t.lastChild;if(o&&(o===s||o.nextSibling))for(;t.insertBefore(o.cloneNode(!0),n),!(o===s||!(o=o.nextSibling)););else{ca.innerHTML=_c(r==="svg"?`${e}`:r==="mathml"?`${e}`:e);const a=ca.content;if(r==="svg"||r==="mathml"){const l=a.firstChild;for(;l.firstChild;)a.appendChild(l.firstChild);a.removeChild(l)}t.insertBefore(a,n)}return[i?i.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}},Wt="transition",sr="animation",kr=Symbol("_vtc"),vc={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String},Ah=Ne({},Mu,vc),Ch=e=>(e.displayName="Transition",e.props=Ah,e),fi=Ch((e,{slots:t})=>ve(fp,wh(e),t)),dn=(e,t=[])=>{re(e)?e.forEach(n=>n(...t)):e&&e(...t)},fa=e=>e?re(e)?e.some(t=>t.length>1):e.length>1:!1;function wh(e){const t={};for(const w in e)w in vc||(t[w]=e[w]);if(e.css===!1)return t;const{name:n="v",type:r,duration:o,enterFromClass:s=`${n}-enter-from`,enterActiveClass:i=`${n}-enter-active`,enterToClass:a=`${n}-enter-to`,appearFromClass:l=s,appearActiveClass:u=i,appearToClass:f=a,leaveFromClass:c=`${n}-leave-from`,leaveActiveClass:d=`${n}-leave-active`,leaveToClass:p=`${n}-leave-to`}=e,_=Th(o),v=_&&_[0],y=_&&_[1],{onBeforeEnter:b,onEnter:A,onEnterCancelled:m,onLeave:E,onLeaveCancelled:V,onBeforeAppear:W=b,onAppear:M=A,onAppearCancelled:C=m}=t,U=(w,L,Z)=>{pn(w,L?f:a),pn(w,L?u:i),Z&&Z()},O=(w,L)=>{w._isLeaving=!1,pn(w,c),pn(w,p),pn(w,d),L&&L()},B=w=>(L,Z)=>{const ee=w?M:A,I=()=>U(L,w,Z);dn(ee,[L,I]),da(()=>{pn(L,w?l:s),qt(L,w?f:a),fa(ee)||pa(L,r,v,I)})};return Ne(t,{onBeforeEnter(w){dn(b,[w]),qt(w,s),qt(w,i)},onBeforeAppear(w){dn(W,[w]),qt(w,l),qt(w,u)},onEnter:B(!1),onAppear:B(!0),onLeave(w,L){w._isLeaving=!0;const Z=()=>O(w,L);qt(w,c),qt(w,d),kh(),da(()=>{w._isLeaving&&(pn(w,c),qt(w,p),fa(E)||pa(w,r,y,Z))}),dn(E,[w,Z])},onEnterCancelled(w){U(w,!1),dn(m,[w])},onAppearCancelled(w){U(w,!0),dn(C,[w])},onLeaveCancelled(w){O(w),dn(V,[w])}})}function Th(e){if(e==null)return null;if(Te(e))return[os(e.enter),os(e.leave)];{const t=os(e);return[t,t]}}function os(e){return od(e)}function qt(e,t){t.split(/\s+/).forEach(n=>n&&e.classList.add(n)),(e[kr]||(e[kr]=new Set)).add(t)}function pn(e,t){t.split(/\s+/).forEach(r=>r&&e.classList.remove(r));const n=e[kr];n&&(n.delete(t),n.size||(e[kr]=void 0))}function da(e){requestAnimationFrame(()=>{requestAnimationFrame(e)})}let Oh=0;function pa(e,t,n,r){const o=e._endId=++Oh,s=()=>{o===e._endId&&r()};if(n!=null)return setTimeout(s,n);const{type:i,timeout:a,propCount:l}=xh(e,t);if(!i)return r();const u=i+"end";let f=0;const c=()=>{e.removeEventListener(u,d),s()},d=p=>{p.target===e&&++f>=l&&c()};setTimeout(()=>{f(n[_]||"").split(", "),o=r(`${Wt}Delay`),s=r(`${Wt}Duration`),i=ha(o,s),a=r(`${sr}Delay`),l=r(`${sr}Duration`),u=ha(a,l);let f=null,c=0,d=0;t===Wt?i>0&&(f=Wt,c=i,d=s.length):t===sr?u>0&&(f=sr,c=u,d=l.length):(c=Math.max(i,u),f=c>0?i>u?Wt:sr:null,d=f?f===Wt?s.length:l.length:0);const p=f===Wt&&/\b(transform|all)(,|$)/.test(r(`${Wt}Property`).toString());return{type:f,timeout:c,propCount:d,hasTransform:p}}function ha(e,t){for(;e.lengthma(n)+ma(e[r])))}function ma(e){return e==="auto"?0:Number(e.slice(0,-1).replace(",","."))*1e3}function kh(){return document.body.offsetHeight}function Ph(e,t,n){const r=e[kr];r&&(t=(t?[t,...r]:[...r]).join(" ")),t==null?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}const So=Symbol("_vod"),yc=Symbol("_vsh"),Ao={beforeMount(e,{value:t},{transition:n}){e[So]=e.style.display==="none"?"":e.style.display,n&&t?n.beforeEnter(e):ir(e,t)},mounted(e,{value:t},{transition:n}){n&&t&&n.enter(e)},updated(e,{value:t,oldValue:n},{transition:r}){!t!=!n&&(r?t?(r.beforeEnter(e),ir(e,!0),r.enter(e)):r.leave(e,()=>{ir(e,!1)}):ir(e,t))},beforeUnmount(e,{value:t}){ir(e,t)}};function ir(e,t){e.style.display=t?e[So]:"none",e[yc]=!t}const Ih=Symbol(""),Rh=/(^|;)\s*display\s*:/;function Lh(e,t,n){const r=e.style,o=Oe(n);let s=!1;if(n&&!o){if(t)if(Oe(t))for(const i of t.split(";")){const a=i.slice(0,i.indexOf(":")).trim();n[a]==null&&ao(r,a,"")}else for(const i in t)n[i]==null&&ao(r,i,"");for(const i in n)i==="display"&&(s=!0),ao(r,i,n[i])}else if(o){if(t!==n){const i=r[Ih];i&&(n+=";"+i),r.cssText=n,s=Rh.test(n)}}else t&&e.removeAttribute("style");So in e&&(e[So]=s?r.display:"",e[yc]&&(r.display="none"))}const ga=/\s*!important$/;function ao(e,t,n){if(re(n))n.forEach(r=>ao(e,t,r));else if(n==null&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const r=Dh(e,t);ga.test(n)?e.setProperty($t(r),n.replace(ga,""),"important"):e[r]=n}}const _a=["Webkit","Moz","ms"],ss={};function Dh(e,t){const n=ss[t];if(n)return n;let r=rt(t);if(r!=="filter"&&r in e)return ss[t]=r;r=Hr(r);for(let o=0;o<_a.length;o++){const s=_a[o]+r;if(s in e)return ss[t]=s}return t}const va="http://www.w3.org/1999/xlink";function ya(e,t,n,r,o,s=cd(t)){r&&t.startsWith("xlink:")?n==null?e.removeAttributeNS(va,t.slice(6,t.length)):e.setAttributeNS(va,t,n):n==null||s&&!Ys(n)?e.removeAttribute(t):e.setAttribute(t,s?"":Bt(n)?String(n):n)}function ba(e,t,n,r,o){if(t==="innerHTML"||t==="textContent"){n!=null&&(e[t]=t==="innerHTML"?_c(n):n);return}const s=e.tagName;if(t==="value"&&s!=="PROGRESS"&&!s.includes("-")){const a=s==="OPTION"?e.getAttribute("value")||"":e.value,l=n==null?e.type==="checkbox"?"on":"":String(n);(a!==l||!("_value"in e))&&(e.value=l),n==null&&e.removeAttribute(t),e._value=n;return}let i=!1;if(n===""||n==null){const a=typeof e[t];a==="boolean"?n=Ys(n):n==null&&a==="string"?(n="",i=!0):a==="number"&&(n=0,i=!0)}try{e[t]=n}catch{}i&&e.removeAttribute(o||t)}function Nh(e,t,n,r){e.addEventListener(t,n,r)}function Vh(e,t,n,r){e.removeEventListener(t,n,r)}const Ea=Symbol("_vei");function Mh(e,t,n,r,o=null){const s=e[Ea]||(e[Ea]={}),i=s[t];if(r&&i)i.value=r;else{const[a,l]=Hh(t);if(r){const u=s[t]=$h(r,o);Nh(e,a,u,l)}else i&&(Vh(e,a,i,l),s[t]=void 0)}}const Sa=/(?:Once|Passive|Capture)$/;function Hh(e){let t;if(Sa.test(e)){t={};let r;for(;r=e.match(Sa);)e=e.slice(0,e.length-r[0].length),t[r[0].toLowerCase()]=!0}return[e[2]===":"?e.slice(3):$t(e.slice(2)),t]}let is=0;const Fh=Promise.resolve(),Bh=()=>is||(Fh.then(()=>is=0),is=Date.now());function $h(e,t){const n=r=>{if(!r._vts)r._vts=Date.now();else if(r._vts<=n.attached)return;Et(Uh(r,n.value),t,5,[r])};return n.value=e,n.attached=Bh(),n}function Uh(e,t){if(re(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map(r=>o=>!o._stopped&&r&&r(o))}else return t}const Aa=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&e.charCodeAt(2)>96&&e.charCodeAt(2)<123,jh=(e,t,n,r,o,s)=>{const i=o==="svg";t==="class"?Ph(e,r,i):t==="style"?Lh(e,n,r):Mr(t)?Ws(t)||Mh(e,t,n,r,s):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):zh(e,t,r,i))?(ba(e,t,r),!e.tagName.includes("-")&&(t==="value"||t==="checked"||t==="selected")&&ya(e,t,r,i,s,t!=="value")):e._isVueCE&&(/[A-Z]/.test(t)||!Oe(r))?ba(e,rt(t),r,s,t):(t==="true-value"?e._trueValue=r:t==="false-value"&&(e._falseValue=r),ya(e,t,r,i))};function zh(e,t,n,r){if(r)return!!(t==="innerHTML"||t==="textContent"||t in e&&Aa(t)&&oe(n));if(t==="spellcheck"||t==="draggable"||t==="translate"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA")return!1;if(t==="width"||t==="height"){const o=e.tagName;if(o==="IMG"||o==="VIDEO"||o==="CANVAS"||o==="SOURCE")return!1}return Aa(t)&&Oe(n)?!1:t in e}const Kh={esc:"escape",space:" ",up:"arrow-up",left:"arrow-left",right:"arrow-right",down:"arrow-down",delete:"backspace"},Wh=(e,t)=>{const n=e._withKeys||(e._withKeys={}),r=t.join(".");return n[r]||(n[r]=o=>{if(!("key"in o))return;const s=$t(o.key);if(t.some(i=>i===s||Kh[i]===s))return e(o)})},qh=Ne({patchProp:jh},Sh);let as,Ca=!1;function Gh(){return as=Ca?as:qp(qh),Ca=!0,as}const Yh=(...e)=>{const t=Gh().createApp(...e),{mount:n}=t;return t.mount=r=>{const o=Zh(r);if(o)return n(o,!0,Xh(o))},t};function Xh(e){if(e instanceof SVGElement)return"svg";if(typeof MathMLElement=="function"&&e instanceof MathMLElement)return"mathml"}function Zh(e){return Oe(e)?document.querySelector(e):e}var zr=e=>/^[a-z][a-z0-9+.-]*:/.test(e)||e.startsWith("//"),Jh=/.md((\?|#).*)?$/,Qh=(e,t="/")=>zr(e)||e.startsWith("/")&&!e.startsWith(t)&&!Jh.test(e),Vo=e=>/^(https?:)?\/\//.test(e),wa=e=>{if(!e||e.endsWith("/"))return e;let t=e.replace(/(^|\/)README.md$/i,"$1index.html");return t.endsWith(".md")?t=`${t.substring(0,t.length-3)}.html`:t.endsWith(".html")||(t=`${t}.html`),t.endsWith("/index.html")&&(t=t.substring(0,t.length-10)),t},em="http://.",tm=(e,t)=>{if(!e.startsWith("/")&&t){const n=t.slice(0,t.lastIndexOf("/"));return wa(new URL(`${n}/${e}`,em).pathname)}return wa(e)},nm=(e,t)=>{const n=Object.keys(e).sort((r,o)=>{const s=o.split("/").length-r.split("/").length;return s!==0?s:o.length-r.length});for(const r of n)if(t.startsWith(r))return r;return"/"},rm=/(#|\?)/,bc=e=>{const[t,...n]=e.split(rm);return{pathname:t,hashAndQueries:n.join("")}},om=["link","meta","script","style","noscript","template"],sm=["title","base"],im=([e,t,n])=>sm.includes(e)?e:om.includes(e)?e==="meta"&&t.name?`${e}.${t.name}`:e==="template"&&t.id?`${e}.${t.id}`:JSON.stringify([e,Object.entries(t).map(([r,o])=>typeof o=="boolean"?o?[r,""]:null:[r,o]).filter(r=>r!=null).sort(([r],[o])=>r.localeCompare(o)),n]):null,am=e=>{const t=new Set,n=[];return e.forEach(r=>{const o=im(r);o&&!t.has(o)&&(t.add(o),n.push(r))}),n},lm=e=>e.endsWith("/")||e.endsWith(".html")?e:`${e}/`,Ec=e=>e.endsWith("/")?e.slice(0,-1):e,Sc=e=>e.startsWith("/")?e.slice(1):e,di=e=>Object.prototype.toString.call(e)==="[object Object]",bt=e=>typeof e=="string";const um=JSON.parse("{}"),cm=Object.fromEntries([["/",{loader:()=>pt(()=>import("./index.html-Bl1WRIzJ.js"),[]),meta:{title:"KMP | Tech at Worldline"}}],["/arch/",{loader:()=>pt(()=>import("./index.html-CyMmZTR2.js"),[]),meta:{title:"Architecture"}}],["/configure/",{loader:()=>pt(()=>import("./index.html-IZAD4WfO.js"),[]),meta:{title:"Configure KMP"}}],["/database/",{loader:()=>pt(()=>import("./index.html-CJwk2asI.js"),[]),meta:{title:"(Local Database)"}}],["/nav/",{loader:()=>pt(()=>import("./index.html-CIZ6Tn1I.js"),[]),meta:{title:"Navigation"}}],["/network/",{loader:()=>pt(()=>import("./index.html-pIQXzd7o.js"),[]),meta:{title:"Connectivity"}}],["/overview/",{loader:()=>pt(()=>import("./index.html-DBoeKgiV.js"),[]),meta:{title:"🚀 Let's start"}}],["/preferences/",{loader:()=>pt(()=>import("./index.html-B_ORBeHs.js"),[]),meta:{title:"Preferences"}}],["/res/",{loader:()=>pt(()=>import("./index.html-C2rGOrLv.js"),[]),meta:{title:"Ressources"}}],["/ui/",{loader:()=>pt(()=>import("./index.html-dJGFTDYi.js"),[]),meta:{title:"User interface"}}],["/404.html",{loader:()=>pt(()=>import("./404.html-BNEFVt0L.js"),[]),meta:{title:""}}]]);function fm(){return Ac().__VUE_DEVTOOLS_GLOBAL_HOOK__}function Ac(){return typeof navigator<"u"&&typeof window<"u"?window:typeof globalThis<"u"?globalThis:{}}const dm=typeof Proxy=="function",pm="devtools-plugin:setup",hm="plugin:settings:set";let xn,ks;function mm(){var e;return xn!==void 0||(typeof window<"u"&&window.performance?(xn=!0,ks=window.performance):typeof globalThis<"u"&&(!((e=globalThis.perf_hooks)===null||e===void 0)&&e.performance)?(xn=!0,ks=globalThis.perf_hooks.performance):xn=!1),xn}function gm(){return mm()?ks.now():Date.now()}class _m{constructor(t,n){this.target=null,this.targetQueue=[],this.onQueue=[],this.plugin=t,this.hook=n;const r={};if(t.settings)for(const i in t.settings){const a=t.settings[i];r[i]=a.defaultValue}const o=`__vue-devtools-plugin-settings__${t.id}`;let s=Object.assign({},r);try{const i=localStorage.getItem(o),a=JSON.parse(i);Object.assign(s,a)}catch{}this.fallbacks={getSettings(){return s},setSettings(i){try{localStorage.setItem(o,JSON.stringify(i))}catch{}s=i},now(){return gm()}},n&&n.on(hm,(i,a)=>{i===this.plugin.id&&this.fallbacks.setSettings(a)}),this.proxiedOn=new Proxy({},{get:(i,a)=>this.target?this.target.on[a]:(...l)=>{this.onQueue.push({method:a,args:l})}}),this.proxiedTarget=new Proxy({},{get:(i,a)=>this.target?this.target[a]:a==="on"?this.proxiedOn:Object.keys(this.fallbacks).includes(a)?(...l)=>(this.targetQueue.push({method:a,args:l,resolve:()=>{}}),this.fallbacks[a](...l)):(...l)=>new Promise(u=>{this.targetQueue.push({method:a,args:l,resolve:u})})})}async setRealTarget(t){this.target=t;for(const n of this.onQueue)this.target.on[n.method](...n.args);for(const n of this.targetQueue)n.resolve(await this.target[n.method](...n.args))}}function vm(e,t){const n=e,r=Ac(),o=fm(),s=dm&&n.enableEarlyProxy;if(o&&(r.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__||!s))o.emit(pm,e,t);else{const i=s?new _m(n,o):null;(r.__VUE_DEVTOOLS_PLUGINS__=r.__VUE_DEVTOOLS_PLUGINS__||[]).push({pluginDescriptor:n,setupFn:t,proxy:i}),i&&t(i.proxiedTarget)}}/*! + * vue-router v4.4.5 + * (c) 2024 Eduardo San Martin Morote + * @license MIT + */const Mt=typeof document<"u";function Cc(e){return typeof e=="object"||"displayName"in e||"props"in e||"__vccOpts"in e}function ym(e){return e.__esModule||e[Symbol.toStringTag]==="Module"||e.default&&Cc(e.default)}const pe=Object.assign;function ls(e,t){const n={};for(const r in t){const o=t[r];n[r]=ct(o)?o.map(e):e(o)}return n}const br=()=>{},ct=Array.isArray,wc=/#/g,bm=/&/g,Em=/\//g,Sm=/=/g,Am=/\?/g,Tc=/\+/g,Cm=/%5B/g,wm=/%5D/g,Oc=/%5E/g,Tm=/%60/g,xc=/%7B/g,Om=/%7C/g,kc=/%7D/g,xm=/%20/g;function pi(e){return encodeURI(""+e).replace(Om,"|").replace(Cm,"[").replace(wm,"]")}function km(e){return pi(e).replace(xc,"{").replace(kc,"}").replace(Oc,"^")}function Ps(e){return pi(e).replace(Tc,"%2B").replace(xm,"+").replace(wc,"%23").replace(bm,"%26").replace(Tm,"`").replace(xc,"{").replace(kc,"}").replace(Oc,"^")}function Pm(e){return Ps(e).replace(Sm,"%3D")}function Im(e){return pi(e).replace(wc,"%23").replace(Am,"%3F")}function Rm(e){return e==null?"":Im(e).replace(Em,"%2F")}function jn(e){try{return decodeURIComponent(""+e)}catch{}return""+e}const Lm=/\/$/,Dm=e=>e.replace(Lm,"");function us(e,t,n="/"){let r,o={},s="",i="";const a=t.indexOf("#");let l=t.indexOf("?");return a=0&&(l=-1),l>-1&&(r=t.slice(0,l),s=t.slice(l+1,a>-1?a:t.length),o=e(s)),a>-1&&(r=r||t.slice(0,a),i=t.slice(a,t.length)),r=Hm(r??t,n),{fullPath:r+(s&&"?")+s+i,path:r,query:o,hash:jn(i)}}function Nm(e,t){const n=t.query?e(t.query):"";return t.path+(n&&"?")+n+(t.hash||"")}function Ta(e,t){return!t||!e.toLowerCase().startsWith(t.toLowerCase())?e:e.slice(t.length)||"/"}function Vm(e,t,n){const r=t.matched.length-1,o=n.matched.length-1;return r>-1&&r===o&&sn(t.matched[r],n.matched[o])&&Pc(t.params,n.params)&&e(t.query)===e(n.query)&&t.hash===n.hash}function sn(e,t){return(e.aliasOf||e)===(t.aliasOf||t)}function Pc(e,t){if(Object.keys(e).length!==Object.keys(t).length)return!1;for(const n in e)if(!Mm(e[n],t[n]))return!1;return!0}function Mm(e,t){return ct(e)?Oa(e,t):ct(t)?Oa(t,e):e===t}function Oa(e,t){return ct(t)?e.length===t.length&&e.every((n,r)=>n===t[r]):e.length===1&&e[0]===t}function Hm(e,t){if(e.startsWith("/"))return e;if(!e)return t;const n=t.split("/"),r=e.split("/"),o=r[r.length-1];(o===".."||o===".")&&r.push("");let s=n.length-1,i,a;for(i=0;i1&&s--;else break;return n.slice(0,s).join("/")+"/"+r.slice(i).join("/")}const Nt={path:"/",name:void 0,params:{},query:{},hash:"",fullPath:"/",matched:[],meta:{},redirectedFrom:void 0};var Pr;(function(e){e.pop="pop",e.push="push"})(Pr||(Pr={}));var Er;(function(e){e.back="back",e.forward="forward",e.unknown=""})(Er||(Er={}));function Fm(e){if(!e)if(Mt){const t=document.querySelector("base");e=t&&t.getAttribute("href")||"/",e=e.replace(/^\w+:\/\/[^\/]+/,"")}else e="/";return e[0]!=="/"&&e[0]!=="#"&&(e="/"+e),Dm(e)}const Bm=/^[^#]+#/;function $m(e,t){return e.replace(Bm,"#")+t}function Um(e,t){const n=document.documentElement.getBoundingClientRect(),r=e.getBoundingClientRect();return{behavior:t.behavior,left:r.left-n.left-(t.left||0),top:r.top-n.top-(t.top||0)}}const Mo=()=>({left:window.scrollX,top:window.scrollY});function jm(e){let t;if("el"in e){const n=e.el,r=typeof n=="string"&&n.startsWith("#"),o=typeof n=="string"?r?document.getElementById(n.slice(1)):document.querySelector(n):n;if(!o)return;t=Um(o,e)}else t=e;"scrollBehavior"in document.documentElement.style?window.scrollTo(t):window.scrollTo(t.left!=null?t.left:window.scrollX,t.top!=null?t.top:window.scrollY)}function xa(e,t){return(history.state?history.state.position-t:-1)+e}const Is=new Map;function zm(e,t){Is.set(e,t)}function Km(e){const t=Is.get(e);return Is.delete(e),t}let Wm=()=>location.protocol+"//"+location.host;function Ic(e,t){const{pathname:n,search:r,hash:o}=t,s=e.indexOf("#");if(s>-1){let a=o.includes(e.slice(s))?e.slice(s).length:1,l=o.slice(a);return l[0]!=="/"&&(l="/"+l),Ta(l,"")}return Ta(n,e)+r+o}function qm(e,t,n,r){let o=[],s=[],i=null;const a=({state:d})=>{const p=Ic(e,location),_=n.value,v=t.value;let y=0;if(d){if(n.value=p,t.value=d,i&&i===_){i=null;return}y=v?d.position-v.position:0}else r(p);o.forEach(b=>{b(n.value,_,{delta:y,type:Pr.pop,direction:y?y>0?Er.forward:Er.back:Er.unknown})})};function l(){i=n.value}function u(d){o.push(d);const p=()=>{const _=o.indexOf(d);_>-1&&o.splice(_,1)};return s.push(p),p}function f(){const{history:d}=window;d.state&&d.replaceState(pe({},d.state,{scroll:Mo()}),"")}function c(){for(const d of s)d();s=[],window.removeEventListener("popstate",a),window.removeEventListener("beforeunload",f)}return window.addEventListener("popstate",a),window.addEventListener("beforeunload",f,{passive:!0}),{pauseListeners:l,listen:u,destroy:c}}function ka(e,t,n,r=!1,o=!1){return{back:e,current:t,forward:n,replaced:r,position:window.history.length,scroll:o?Mo():null}}function Gm(e){const{history:t,location:n}=window,r={value:Ic(e,n)},o={value:t.state};o.value||s(r.value,{back:null,current:r.value,forward:null,position:t.length-1,replaced:!0,scroll:null},!0);function s(l,u,f){const c=e.indexOf("#"),d=c>-1?(n.host&&document.querySelector("base")?e:e.slice(c))+l:Wm()+e+l;try{t[f?"replaceState":"pushState"](u,"",d),o.value=u}catch(p){console.error(p),n[f?"replace":"assign"](d)}}function i(l,u){const f=pe({},t.state,ka(o.value.back,l,o.value.forward,!0),u,{position:o.value.position});s(l,f,!0),r.value=l}function a(l,u){const f=pe({},o.value,t.state,{forward:l,scroll:Mo()});s(f.current,f,!0);const c=pe({},ka(r.value,l,null),{position:f.position+1},u);s(l,c,!1),r.value=l}return{location:r,state:o,push:a,replace:i}}function Ym(e){e=Fm(e);const t=Gm(e),n=qm(e,t.state,t.location,t.replace);function r(s,i=!0){i||n.pauseListeners(),history.go(s)}const o=pe({location:"",base:e,go:r,createHref:$m.bind(null,e)},t,n);return Object.defineProperty(o,"location",{enumerable:!0,get:()=>t.location.value}),Object.defineProperty(o,"state",{enumerable:!0,get:()=>t.state.value}),o}function Rc(e){return typeof e=="string"||e&&typeof e=="object"}function Lc(e){return typeof e=="string"||typeof e=="symbol"}const Dc=Symbol("");var Pa;(function(e){e[e.aborted=4]="aborted",e[e.cancelled=8]="cancelled",e[e.duplicated=16]="duplicated"})(Pa||(Pa={}));function zn(e,t){return pe(new Error,{type:e,[Dc]:!0},t)}function Lt(e,t){return e instanceof Error&&Dc in e&&(t==null||!!(e.type&t))}const Ia="[^/]+?",Xm={sensitive:!1,strict:!1,start:!0,end:!0},Zm=/[.+*?^${}()[\]/\\]/g;function Jm(e,t){const n=pe({},Xm,t),r=[];let o=n.start?"^":"";const s=[];for(const u of e){const f=u.length?[]:[90];n.strict&&!u.length&&(o+="/");for(let c=0;ct.length?t.length===1&&t[0]===80?1:-1:0}function Nc(e,t){let n=0;const r=e.score,o=t.score;for(;n0&&t[t.length-1]<0}const eg={type:0,value:""},tg=/[a-zA-Z0-9_]/;function ng(e){if(!e)return[[]];if(e==="/")return[[eg]];if(!e.startsWith("/"))throw new Error(`Invalid path "${e}"`);function t(p){throw new Error(`ERR (${n})/"${u}": ${p}`)}let n=0,r=n;const o=[];let s;function i(){s&&o.push(s),s=[]}let a=0,l,u="",f="";function c(){u&&(n===0?s.push({type:0,value:u}):n===1||n===2||n===3?(s.length>1&&(l==="*"||l==="+")&&t(`A repeatable param (${u}) must be alone in its segment. eg: '/:ids+.`),s.push({type:1,value:u,regexp:f,repeatable:l==="*"||l==="+",optional:l==="*"||l==="?"})):t("Invalid state to consume buffer"),u="")}function d(){u+=l}for(;a{i(m)}:br}function i(c){if(Lc(c)){const d=r.get(c);d&&(r.delete(c),n.splice(n.indexOf(d),1),d.children.forEach(i),d.alias.forEach(i))}else{const d=n.indexOf(c);d>-1&&(n.splice(d,1),c.record.name&&r.delete(c.record.name),c.children.forEach(i),c.alias.forEach(i))}}function a(){return n}function l(c){const d=ag(c,n);n.splice(d,0,c),c.record.name&&!Na(c)&&r.set(c.record.name,c)}function u(c,d){let p,_={},v,y;if("name"in c&&c.name){if(p=r.get(c.name),!p)throw zn(1,{location:c});y=p.record.name,_=pe(La(d.params,p.keys.filter(m=>!m.optional).concat(p.parent?p.parent.keys.filter(m=>m.optional):[]).map(m=>m.name)),c.params&&La(c.params,p.keys.map(m=>m.name))),v=p.stringify(_)}else if(c.path!=null)v=c.path,p=n.find(m=>m.re.test(v)),p&&(_=p.parse(v),y=p.record.name);else{if(p=d.name?r.get(d.name):n.find(m=>m.re.test(d.path)),!p)throw zn(1,{location:c,currentLocation:d});y=p.record.name,_=pe({},d.params,c.params),v=p.stringify(_)}const b=[];let A=p;for(;A;)b.unshift(A.record),A=A.parent;return{name:y,path:v,params:_,matched:b,meta:ig(b)}}e.forEach(c=>s(c));function f(){n.length=0,r.clear()}return{addRoute:s,resolve:u,removeRoute:i,clearRoutes:f,getRoutes:a,getRecordMatcher:o}}function La(e,t){const n={};for(const r of t)r in e&&(n[r]=e[r]);return n}function Da(e){const t={path:e.path,redirect:e.redirect,name:e.name,meta:e.meta||{},aliasOf:e.aliasOf,beforeEnter:e.beforeEnter,props:sg(e),children:e.children||[],instances:{},leaveGuards:new Set,updateGuards:new Set,enterCallbacks:{},components:"components"in e?e.components||null:e.component&&{default:e.component}};return Object.defineProperty(t,"mods",{value:{}}),t}function sg(e){const t={},n=e.props||!1;if("component"in e)t.default=n;else for(const r in e.components)t[r]=typeof n=="object"?n[r]:n;return t}function Na(e){for(;e;){if(e.record.aliasOf)return!0;e=e.parent}return!1}function ig(e){return e.reduce((t,n)=>pe(t,n.meta),{})}function Va(e,t){const n={};for(const r in e)n[r]=r in t?t[r]:e[r];return n}function ag(e,t){let n=0,r=t.length;for(;n!==r;){const s=n+r>>1;Nc(e,t[s])<0?r=s:n=s+1}const o=lg(e);return o&&(r=t.lastIndexOf(o,r-1)),r}function lg(e){let t=e;for(;t=t.parent;)if(Vc(t)&&Nc(e,t)===0)return t}function Vc({record:e}){return!!(e.name||e.components&&Object.keys(e.components).length||e.redirect)}function ug(e){const t={};if(e===""||e==="?")return t;const r=(e[0]==="?"?e.slice(1):e).split("&");for(let o=0;os&&Ps(s)):[r&&Ps(r)]).forEach(s=>{s!==void 0&&(t+=(t.length?"&":"")+n,s!=null&&(t+="="+s))})}return t}function cg(e){const t={};for(const n in e){const r=e[n];r!==void 0&&(t[n]=ct(r)?r.map(o=>o==null?null:""+o):r==null?r:""+r)}return t}const fg=Symbol(""),Ha=Symbol(""),Ho=Symbol(""),hi=Symbol(""),Rs=Symbol("");function ar(){let e=[];function t(r){return e.push(r),()=>{const o=e.indexOf(r);o>-1&&e.splice(o,1)}}function n(){e=[]}return{add:t,list:()=>e.slice(),reset:n}}function Jt(e,t,n,r,o,s=i=>i()){const i=r&&(r.enterCallbacks[o]=r.enterCallbacks[o]||[]);return()=>new Promise((a,l)=>{const u=d=>{d===!1?l(zn(4,{from:n,to:t})):d instanceof Error?l(d):Rc(d)?l(zn(2,{from:t,to:d})):(i&&r.enterCallbacks[o]===i&&typeof d=="function"&&i.push(d),a())},f=s(()=>e.call(r&&r.instances[o],t,n,u));let c=Promise.resolve(f);e.length<3&&(c=c.then(u)),c.catch(d=>l(d))})}function cs(e,t,n,r,o=s=>s()){const s=[];for(const i of e)for(const a in i.components){let l=i.components[a];if(!(t!=="beforeRouteEnter"&&!i.instances[a]))if(Cc(l)){const f=(l.__vccOpts||l)[t];f&&s.push(Jt(f,n,r,i,a,o))}else{let u=l();s.push(()=>u.then(f=>{if(!f)throw new Error(`Couldn't resolve component "${a}" at "${i.path}"`);const c=ym(f)?f.default:f;i.mods[a]=f,i.components[a]=c;const p=(c.__vccOpts||c)[t];return p&&Jt(p,n,r,i,a,o)()}))}}return s}function Fa(e){const t=Ze(Ho),n=Ze(hi),r=H(()=>{const l=Qt(e.to);return t.resolve(l)}),o=H(()=>{const{matched:l}=r.value,{length:u}=l,f=l[u-1],c=n.matched;if(!f||!c.length)return-1;const d=c.findIndex(sn.bind(null,f));if(d>-1)return d;const p=Ba(l[u-2]);return u>1&&Ba(f)===p&&c[c.length-1].path!==p?c.findIndex(sn.bind(null,l[u-2])):d}),s=H(()=>o.value>-1&&mg(n.params,r.value.params)),i=H(()=>o.value>-1&&o.value===n.matched.length-1&&Pc(n.params,r.value.params));function a(l={}){return hg(l)?t[Qt(e.replace)?"replace":"push"](Qt(e.to)).catch(br):Promise.resolve()}if(Mt){const l=Ur();if(l){const u={route:r.value,isActive:s.value,isExactActive:i.value,error:null};l.__vrl_devtools=l.__vrl_devtools||[],l.__vrl_devtools.push(u),ic(()=>{u.route=r.value,u.isActive=s.value,u.isExactActive=i.value,u.error=Rc(Qt(e.to))?null:'Invalid "to" value'},{flush:"post"})}}return{route:r,href:H(()=>r.value.href),isActive:s,isExactActive:i,navigate:a}}const dg=me({name:"RouterLink",compatConfig:{MODE:3},props:{to:{type:[String,Object],required:!0},replace:Boolean,activeClass:String,exactActiveClass:String,custom:Boolean,ariaCurrentValue:{type:String,default:"page"}},useLink:Fa,setup(e,{slots:t}){const n=Fr(Fa(e)),{options:r}=Ze(Ho),o=H(()=>({[$a(e.activeClass,r.linkActiveClass,"router-link-active")]:n.isActive,[$a(e.exactActiveClass,r.linkExactActiveClass,"router-link-exact-active")]:n.isExactActive}));return()=>{const s=t.default&&t.default(n);return e.custom?s:ve("a",{"aria-current":n.isExactActive?e.ariaCurrentValue:null,href:n.href,onClick:n.navigate,class:o.value},s)}}}),pg=dg;function hg(e){if(!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)&&!e.defaultPrevented&&!(e.button!==void 0&&e.button!==0)){if(e.currentTarget&&e.currentTarget.getAttribute){const t=e.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(t))return}return e.preventDefault&&e.preventDefault(),!0}}function mg(e,t){for(const n in t){const r=t[n],o=e[n];if(typeof r=="string"){if(r!==o)return!1}else if(!ct(o)||o.length!==r.length||r.some((s,i)=>s!==o[i]))return!1}return!0}function Ba(e){return e?e.aliasOf?e.aliasOf.path:e.path:""}const $a=(e,t,n)=>e??t??n,gg=me({name:"RouterView",inheritAttrs:!1,props:{name:{type:String,default:"default"},route:Object},compatConfig:{MODE:3},setup(e,{attrs:t,slots:n}){const r=Ze(Rs),o=H(()=>e.route||r.value),s=Ze(Ha,0),i=H(()=>{let u=Qt(s);const{matched:f}=o.value;let c;for(;(c=f[u])&&!c.components;)u++;return u}),a=H(()=>o.value.matched[i.value]);An(Ha,H(()=>i.value+1)),An(fg,a),An(Rs,o);const l=de();return Ue(()=>[l.value,a.value,e.name],([u,f,c],[d,p,_])=>{f&&(f.instances[c]=u,p&&p!==f&&u&&u===d&&(f.leaveGuards.size||(f.leaveGuards=p.leaveGuards),f.updateGuards.size||(f.updateGuards=p.updateGuards))),u&&f&&(!p||!sn(f,p)||!d)&&(f.enterCallbacks[c]||[]).forEach(v=>v(u))},{flush:"post"}),()=>{const u=o.value,f=e.name,c=a.value,d=c&&c.components[f];if(!d)return Ua(n.default,{Component:d,route:u});const p=c.props[f],_=p?p===!0?u.params:typeof p=="function"?p(u):p:null,y=ve(d,pe({},_,t,{onVnodeUnmounted:b=>{b.component.isUnmounted&&(c.instances[f]=null)},ref:l}));if(Mt&&y.ref){const b={depth:i.value,name:c.name,path:c.path,meta:c.meta};(ct(y.ref)?y.ref.map(m=>m.i):[y.ref.i]).forEach(m=>{m.__vrv_devtools=b})}return Ua(n.default,{Component:y,route:u})||y}}});function Ua(e,t){if(!e)return null;const n=e(t);return n.length===1?n[0]:n}const _g=gg;function lr(e,t){const n=pe({},e,{matched:e.matched.map(r=>xg(r,["instances","children","aliasOf"]))});return{_custom:{type:null,readOnly:!0,display:e.fullPath,tooltip:t,value:n}}}function Jr(e){return{_custom:{display:e}}}let vg=0;function yg(e,t,n){if(t.__hasDevtools)return;t.__hasDevtools=!0;const r=vg++;vm({id:"org.vuejs.router"+(r?"."+r:""),label:"Vue Router",packageName:"vue-router",homepage:"https://router.vuejs.org",logo:"https://router.vuejs.org/logo.png",componentStateTypes:["Routing"],app:e},o=>{typeof o.now!="function"&&console.warn("[Vue Router]: You seem to be using an outdated version of Vue Devtools. Are you still using the Beta release instead of the stable one? You can find the links at https://devtools.vuejs.org/guide/installation.html."),o.on.inspectComponent((f,c)=>{f.instanceData&&f.instanceData.state.push({type:"Routing",key:"$route",editable:!1,value:lr(t.currentRoute.value,"Current Route")})}),o.on.visitComponentTree(({treeNode:f,componentInstance:c})=>{if(c.__vrv_devtools){const d=c.__vrv_devtools;f.tags.push({label:(d.name?`${d.name.toString()}: `:"")+d.path,textColor:0,tooltip:"This component is rendered by <router-view>",backgroundColor:Mc})}ct(c.__vrl_devtools)&&(c.__devtoolsApi=o,c.__vrl_devtools.forEach(d=>{let p=d.route.path,_=Bc,v="",y=0;d.error?(p=d.error,_=Cg,y=wg):d.isExactActive?(_=Fc,v="This is exactly active"):d.isActive&&(_=Hc,v="This link is active"),f.tags.push({label:p,textColor:y,tooltip:v,backgroundColor:_})}))}),Ue(t.currentRoute,()=>{l(),o.notifyComponentUpdate(),o.sendInspectorTree(a),o.sendInspectorState(a)});const s="router:navigations:"+r;o.addTimelineLayer({id:s,label:`Router${r?" "+r:""} Navigations`,color:4237508}),t.onError((f,c)=>{o.addTimelineEvent({layerId:s,event:{title:"Error during Navigation",subtitle:c.fullPath,logType:"error",time:o.now(),data:{error:f},groupId:c.meta.__navigationId}})});let i=0;t.beforeEach((f,c)=>{const d={guard:Jr("beforeEach"),from:lr(c,"Current Location during this navigation"),to:lr(f,"Target location")};Object.defineProperty(f.meta,"__navigationId",{value:i++}),o.addTimelineEvent({layerId:s,event:{time:o.now(),title:"Start of navigation",subtitle:f.fullPath,data:d,groupId:f.meta.__navigationId}})}),t.afterEach((f,c,d)=>{const p={guard:Jr("afterEach")};d?(p.failure={_custom:{type:Error,readOnly:!0,display:d?d.message:"",tooltip:"Navigation Failure",value:d}},p.status=Jr("❌")):p.status=Jr("✅"),p.from=lr(c,"Current Location during this navigation"),p.to=lr(f,"Target location"),o.addTimelineEvent({layerId:s,event:{title:"End of navigation",subtitle:f.fullPath,time:o.now(),data:p,logType:d?"warning":"default",groupId:f.meta.__navigationId}})});const a="router-inspector:"+r;o.addInspector({id:a,label:"Routes"+(r?" "+r:""),icon:"book",treeFilterPlaceholder:"Search routes"});function l(){if(!u)return;const f=u;let c=n.getRoutes().filter(d=>!d.parent||!d.parent.record.components);c.forEach(jc),f.filter&&(c=c.filter(d=>Ls(d,f.filter.toLowerCase()))),c.forEach(d=>Uc(d,t.currentRoute.value)),f.rootNodes=c.map($c)}let u;o.on.getInspectorTree(f=>{u=f,f.app===e&&f.inspectorId===a&&l()}),o.on.getInspectorState(f=>{if(f.app===e&&f.inspectorId===a){const d=n.getRoutes().find(p=>p.record.__vd_id===f.nodeId);d&&(f.state={options:Eg(d)})}}),o.sendInspectorTree(a),o.sendInspectorState(a)})}function bg(e){return e.optional?e.repeatable?"*":"?":e.repeatable?"+":""}function Eg(e){const{record:t}=e,n=[{editable:!1,key:"path",value:t.path}];return t.name!=null&&n.push({editable:!1,key:"name",value:t.name}),n.push({editable:!1,key:"regexp",value:e.re}),e.keys.length&&n.push({editable:!1,key:"keys",value:{_custom:{type:null,readOnly:!0,display:e.keys.map(r=>`${r.name}${bg(r)}`).join(" "),tooltip:"Param keys",value:e.keys}}}),t.redirect!=null&&n.push({editable:!1,key:"redirect",value:t.redirect}),e.alias.length&&n.push({editable:!1,key:"aliases",value:e.alias.map(r=>r.record.path)}),Object.keys(e.record.meta).length&&n.push({editable:!1,key:"meta",value:e.record.meta}),n.push({key:"score",editable:!1,value:{_custom:{type:null,readOnly:!0,display:e.score.map(r=>r.join(", ")).join(" | "),tooltip:"Score used to sort routes",value:e.score}}}),n}const Mc=15485081,Hc=2450411,Fc=8702998,Sg=2282478,Bc=16486972,Ag=6710886,Cg=16704226,wg=12131356;function $c(e){const t=[],{record:n}=e;n.name!=null&&t.push({label:String(n.name),textColor:0,backgroundColor:Sg}),n.aliasOf&&t.push({label:"alias",textColor:0,backgroundColor:Bc}),e.__vd_match&&t.push({label:"matches",textColor:0,backgroundColor:Mc}),e.__vd_exactActive&&t.push({label:"exact",textColor:0,backgroundColor:Fc}),e.__vd_active&&t.push({label:"active",textColor:0,backgroundColor:Hc}),n.redirect&&t.push({label:typeof n.redirect=="string"?`redirect: ${n.redirect}`:"redirects",textColor:16777215,backgroundColor:Ag});let r=n.__vd_id;return r==null&&(r=String(Tg++),n.__vd_id=r),{id:r,label:n.path,tags:t,children:e.children.map($c)}}let Tg=0;const Og=/^\/(.*)\/([a-z]*)$/;function Uc(e,t){const n=t.matched.length&&sn(t.matched[t.matched.length-1],e.record);e.__vd_exactActive=e.__vd_active=n,n||(e.__vd_active=t.matched.some(r=>sn(r,e.record))),e.children.forEach(r=>Uc(r,t))}function jc(e){e.__vd_match=!1,e.children.forEach(jc)}function Ls(e,t){const n=String(e.re).match(Og);if(e.__vd_match=!1,!n||n.length<3)return!1;if(new RegExp(n[1].replace(/\$$/,""),n[2]).test(t))return e.children.forEach(i=>Ls(i,t)),e.record.path!=="/"||t==="/"?(e.__vd_match=e.re.test(t),!0):!1;const o=e.record.path.toLowerCase(),s=jn(o);return!t.startsWith("/")&&(s.includes(t)||o.includes(t))||s.startsWith(t)||o.startsWith(t)||e.record.name&&String(e.record.name).includes(t)?!0:e.children.some(i=>Ls(i,t))}function xg(e,t){const n={};for(const r in e)t.includes(r)||(n[r]=e[r]);return n}function kg(e){const t=og(e.routes,e),n=e.parseQuery||ug,r=e.stringifyQuery||Ma,o=e.history,s=ar(),i=ar(),a=ar(),l=Pt(Nt);let u=Nt;Mt&&e.scrollBehavior&&"scrollRestoration"in history&&(history.scrollRestoration="manual");const f=ls.bind(null,x=>""+x),c=ls.bind(null,Rm),d=ls.bind(null,jn);function p(x,q){let j,J;return Lc(x)?(j=t.getRecordMatcher(x),J=q):J=x,t.addRoute(J,j)}function _(x){const q=t.getRecordMatcher(x);q&&t.removeRoute(q)}function v(){return t.getRoutes().map(x=>x.record)}function y(x){return!!t.getRecordMatcher(x)}function b(x,q){if(q=pe({},q||l.value),typeof x=="string"){const g=us(n,x,q.path),S=t.resolve({path:g.path},q),k=o.createHref(g.fullPath);return pe(g,S,{params:d(S.params),hash:jn(g.hash),redirectedFrom:void 0,href:k})}let j;if(x.path!=null)j=pe({},x,{path:us(n,x.path,q.path).path});else{const g=pe({},x.params);for(const S in g)g[S]==null&&delete g[S];j=pe({},x,{params:c(g)}),q.params=c(q.params)}const J=t.resolve(j,q),ce=x.hash||"";J.params=f(d(J.params));const Ee=Nm(r,pe({},x,{hash:km(ce),path:J.path})),h=o.createHref(Ee);return pe({fullPath:Ee,hash:ce,query:r===Ma?cg(x.query):x.query||{}},J,{redirectedFrom:void 0,href:h})}function A(x){return typeof x=="string"?us(n,x,l.value.path):pe({},x)}function m(x,q){if(u!==x)return zn(8,{from:q,to:x})}function E(x){return M(x)}function V(x){return E(pe(A(x),{replace:!0}))}function W(x){const q=x.matched[x.matched.length-1];if(q&&q.redirect){const{redirect:j}=q;let J=typeof j=="function"?j(x):j;return typeof J=="string"&&(J=J.includes("?")||J.includes("#")?J=A(J):{path:J},J.params={}),pe({query:x.query,hash:x.hash,params:J.path!=null?{}:x.params},J)}}function M(x,q){const j=u=b(x),J=l.value,ce=x.state,Ee=x.force,h=x.replace===!0,g=W(j);if(g)return M(pe(A(g),{state:typeof g=="object"?pe({},ce,g.state):ce,force:Ee,replace:h}),q||j);const S=j;S.redirectedFrom=q;let k;return!Ee&&Vm(r,J,j)&&(k=zn(16,{to:S,from:J}),xe(J,J,!0,!1)),(k?Promise.resolve(k):O(S,J)).catch(T=>Lt(T)?Lt(T,2)?T:ye(T):z(T,S,J)).then(T=>{if(T){if(Lt(T,2))return M(pe({replace:h},A(T.to),{state:typeof T.to=="object"?pe({},ce,T.to.state):ce,force:Ee}),q||S)}else T=w(S,J,!0,h,ce);return B(S,J,T),T})}function C(x,q){const j=m(x,q);return j?Promise.reject(j):Promise.resolve()}function U(x){const q=_t.values().next().value;return q&&typeof q.runWithContext=="function"?q.runWithContext(x):x()}function O(x,q){let j;const[J,ce,Ee]=Pg(x,q);j=cs(J.reverse(),"beforeRouteLeave",x,q);for(const g of J)g.leaveGuards.forEach(S=>{j.push(Jt(S,x,q))});const h=C.bind(null,x,q);return j.push(h),tt(j).then(()=>{j=[];for(const g of s.list())j.push(Jt(g,x,q));return j.push(h),tt(j)}).then(()=>{j=cs(ce,"beforeRouteUpdate",x,q);for(const g of ce)g.updateGuards.forEach(S=>{j.push(Jt(S,x,q))});return j.push(h),tt(j)}).then(()=>{j=[];for(const g of Ee)if(g.beforeEnter)if(ct(g.beforeEnter))for(const S of g.beforeEnter)j.push(Jt(S,x,q));else j.push(Jt(g.beforeEnter,x,q));return j.push(h),tt(j)}).then(()=>(x.matched.forEach(g=>g.enterCallbacks={}),j=cs(Ee,"beforeRouteEnter",x,q,U),j.push(h),tt(j))).then(()=>{j=[];for(const g of i.list())j.push(Jt(g,x,q));return j.push(h),tt(j)}).catch(g=>Lt(g,8)?g:Promise.reject(g))}function B(x,q,j){a.list().forEach(J=>U(()=>J(x,q,j)))}function w(x,q,j,J,ce){const Ee=m(x,q);if(Ee)return Ee;const h=q===Nt,g=Mt?history.state:{};j&&(J||h?o.replace(x.fullPath,pe({scroll:h&&g&&g.scroll},ce)):o.push(x.fullPath,ce)),l.value=x,xe(x,q,j,h),ye()}let L;function Z(){L||(L=o.listen((x,q,j)=>{if(!et.listening)return;const J=b(x),ce=W(J);if(ce){M(pe(ce,{replace:!0}),J).catch(br);return}u=J;const Ee=l.value;Mt&&zm(xa(Ee.fullPath,j.delta),Mo()),O(J,Ee).catch(h=>Lt(h,12)?h:Lt(h,2)?(M(h.to,J).then(g=>{Lt(g,20)&&!j.delta&&j.type===Pr.pop&&o.go(-1,!1)}).catch(br),Promise.reject()):(j.delta&&o.go(-j.delta,!1),z(h,J,Ee))).then(h=>{h=h||w(J,Ee,!1),h&&(j.delta&&!Lt(h,8)?o.go(-j.delta,!1):j.type===Pr.pop&&Lt(h,20)&&o.go(-1,!1)),B(J,Ee,h)}).catch(br)}))}let ee=ar(),I=ar(),D;function z(x,q,j){ye(x);const J=I.list();return J.length?J.forEach(ce=>ce(x,q,j)):console.error(x),Promise.reject(x)}function le(){return D&&l.value!==Nt?Promise.resolve():new Promise((x,q)=>{ee.add([x,q])})}function ye(x){return D||(D=!x,Z(),ee.list().forEach(([q,j])=>x?j(x):q()),ee.reset()),x}function xe(x,q,j,J){const{scrollBehavior:ce}=e;if(!Mt||!ce)return Promise.resolve();const Ee=!j&&Km(xa(x.fullPath,0))||(J||!j)&&history.state&&history.state.scroll||null;return Jn().then(()=>ce(x,q,Ee)).then(h=>h&&jm(h)).catch(h=>z(h,x,q))}const be=x=>o.go(x);let Qe;const _t=new Set,et={currentRoute:l,listening:!0,addRoute:p,removeRoute:_,clearRoutes:t.clearRoutes,hasRoute:y,getRoutes:v,resolve:b,options:e,push:E,replace:V,go:be,back:()=>be(-1),forward:()=>be(1),beforeEach:s.add,beforeResolve:i.add,afterEach:a.add,onError:I.add,isReady:le,install(x){const q=this;x.component("RouterLink",pg),x.component("RouterView",_g),x.config.globalProperties.$router=q,Object.defineProperty(x.config.globalProperties,"$route",{enumerable:!0,get:()=>Qt(l)}),Mt&&!Qe&&l.value===Nt&&(Qe=!0,E(o.location).catch(ce=>{}));const j={};for(const ce in Nt)Object.defineProperty(j,ce,{get:()=>l.value[ce],enumerable:!0});x.provide(Ho,q),x.provide(hi,Cu(j)),x.provide(Rs,l);const J=x.unmount;_t.add(x),x.unmount=function(){_t.delete(x),_t.size<1&&(u=Nt,L&&L(),L=null,l.value=Nt,Qe=!1,D=!1),J()},Mt&&yg(x,q,t)}};function tt(x){return x.reduce((q,j)=>q.then(()=>U(j)),Promise.resolve())}return et}function Pg(e,t){const n=[],r=[],o=[],s=Math.max(t.matched.length,e.matched.length);for(let i=0;isn(u,a))?r.push(a):n.push(a));const l=e.matched[i];l&&(t.matched.find(u=>sn(u,l))||o.push(l))}return[n,r,o]}function Tn(){return Ze(Ho)}function Kt(e){return Ze(hi)}var mi=Symbol(""),It=()=>{const e=Ze(mi);if(!e)throw new Error("useClientData() is called without provider.");return e},Ig=()=>It().pageComponent,Qn=()=>It().pageData,At=()=>It().pageFrontmatter,Rg=()=>It().pageHead,Lg=()=>It().pageLang,Dg=()=>It().pageLayout,Kr=()=>It().routeLocale,Ng=()=>It().routes,zc=()=>It().siteData,gi=()=>It().siteLocaleData,Vg=Symbol(""),Ds=Pt(um),Fn=Pt(cm),Kc=(e,t)=>{const n=tm(e,t);if(Fn.value[n])return n;const r=encodeURI(n);if(Fn.value[r])return r;const o=Ds.value[n]||Ds.value[r];return o||n},Ir=(e,t)=>{const{pathname:n,hashAndQueries:r}=bc(e),o=Kc(n,t),s=o+r;return Fn.value[o]?{...Fn.value[o],path:s,notFound:!1}:{...Fn.value["/404.html"],path:s,notFound:!0}},Mg=(e,t)=>{const{pathname:n,hashAndQueries:r}=bc(e);return Kc(n,t)+r},Hg=e=>{if(!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)&&!e.defaultPrevented&&!(e.button!==void 0&&e.button!==0)){if(e.currentTarget){const t=e.currentTarget.getAttribute("target");if(t!=null&&t.match(/\b_blank\b/i))return}return e.preventDefault(),!0}},Fo=me({name:"RouteLink",props:{to:{type:String,required:!0},active:Boolean,activeClass:{type:String,default:"route-link-active"}},slots:Object,setup(e,{slots:t}){const n=Tn(),r=Kt(),o=H(()=>e.to.startsWith("#")||e.to.startsWith("?")?e.to:`/learning-kotlin-multiplatform/${Mg(e.to,r.path).substring(1)}`);return()=>ve("a",{class:["route-link",{[e.activeClass]:e.active}],href:o.value,onClick:(s={})=>{Hg(s)&&n.push(e.to).catch()}},t.default())}}),er=me({name:"AutoLink",props:{config:{type:Object,required:!0}},slots:Object,setup(e,{slots:t}){const n=zd(e,"config"),r=Kt(),o=zc(),s=H(()=>zr(n.value.link)),i=H(()=>n.value.target||(s.value?"_blank":void 0)),a=H(()=>i.value==="_blank"),l=H(()=>!s.value&&!a.value),u=H(()=>n.value.rel||(a.value?"noopener noreferrer":null)),f=H(()=>n.value.ariaLabel??n.value.text),c=H(()=>{if(n.value.exact)return!1;const p=Object.keys(o.value.locales);return p.length?p.every(_=>_!==n.value.link):n.value.link!=="/"}),d=H(()=>l.value?n.value.activeMatch?(n.value.activeMatch instanceof RegExp?n.value.activeMatch:new RegExp(n.value.activeMatch,"u")).test(r.path):c.value?r.path.startsWith(n.value.link):r.path===n.value.link:!1);return()=>{const{before:p,after:_,default:v}=t,y=(v==null?void 0:v(n.value))??[p==null?void 0:p(n.value),n.value.text,_==null?void 0:_(n.value)];return l.value?ve(Fo,{class:"auto-link",to:n.value.link,active:d.value,"aria-label":f.value},()=>y):ve("a",{class:"auto-link external-link",href:n.value.link,"aria-label":f.value,rel:u.value,target:i.value},y)}}}),_i=me({name:"ClientOnly",setup(e,t){const n=de(!1);return Je(()=>{n.value=!0}),()=>{var r,o;return n.value?(o=(r=t.slots).default)==null?void 0:o.call(r):null}}}),vi=me({name:"Content",props:{path:{type:String,required:!1,default:""}},setup(e){const t=Ig(),n=H(()=>{if(!e.path)return t.value;const r=Ir(e.path);return yp(async()=>r.loader().then(({comp:o})=>o))});return()=>ve(n.value)}}),Fg="Layout",Bg="en-US",hn=Fr({resolveLayouts:e=>e.reduce((t,n)=>({...t,...n.layouts}),{}),resolvePageHead:(e,t,n)=>{const r=bt(t.description)?t.description:n.description,o=[...Array.isArray(t.head)?t.head:[],...n.head,["title",{},e],["meta",{name:"description",content:r}]];return am(o)},resolvePageHeadTitle:(e,t)=>[e.title,t.title].filter(n=>!!n).join(" | "),resolvePageLang:(e,t)=>e.lang||t.lang||Bg,resolvePageLayout:(e,t)=>{const n=bt(e.frontmatter.layout)?e.frontmatter.layout:Fg;if(!t[n])throw new Error(`[vuepress] Cannot resolve layout: ${n}`);return t[n]},resolveRouteLocale:(e,t)=>nm(e,decodeURI(t)),resolveSiteLocaleData:({base:e,locales:t,...n},r)=>{var o;return{...n,...t[r],head:[...((o=t[r])==null?void 0:o.head)??[],...n.head]}}}),un=(e={})=>e,yi=e=>Vo(e)?e:`/learning-kotlin-multiplatform/${Sc(e)}`;function Bo(e){return uu()?(_d(e),!0):!1}function St(e){return typeof e=="function"?e():Qt(e)}const bi=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const $g=Object.prototype.toString,Ug=e=>$g.call(e)==="[object Object]",Ns=()=>{};function Wc(e,t){function n(...r){return new Promise((o,s)=>{Promise.resolve(e(()=>t.apply(this,r),{fn:t,thisArg:this,args:r})).then(o).catch(s)})}return n}const qc=e=>e();function jg(e,t={}){let n,r,o=Ns;const s=a=>{clearTimeout(a),o(),o=Ns};return a=>{const l=St(e),u=St(t.maxWait);return n&&s(n),l<=0||u!==void 0&&u<=0?(r&&(s(r),r=null),Promise.resolve(a())):new Promise((f,c)=>{o=t.rejectOnCancel?c:f,u&&!r&&(r=setTimeout(()=>{n&&s(n),r=null,f(a())},u)),n=setTimeout(()=>{r&&s(r),r=null,f(a())},l)})}}function zg(e=qc){const t=de(!0);function n(){t.value=!1}function r(){t.value=!0}const o=(...s)=>{t.value&&e(...s)};return{isActive:Po(t),pause:n,resume:r,eventFilter:o}}function Kg(e){let t;function n(){return t||(t=e()),t}return n.reset=async()=>{const r=t;t=void 0,r&&await r},n}function Wg(e){return Ur()}function qg(e,t=200,n={}){return Wc(jg(t,n),e)}function Gg(e,t,n={}){const{eventFilter:r=qc,...o}=n;return Ue(e,Wc(r,t),o)}function Yg(e,t,n={}){const{eventFilter:r,...o}=n,{eventFilter:s,pause:i,resume:a,isActive:l}=zg(r);return{stop:Gg(e,t,{...o,eventFilter:s}),pause:i,resume:a,isActive:l}}function Ei(e,t=!0,n){Wg()?Je(e,n):t?e():Jn(e)}function Xg(e,t,n={}){const{immediate:r=!0}=n,o=de(!1);let s=null;function i(){s&&(clearTimeout(s),s=null)}function a(){o.value=!1,i()}function l(...u){i(),o.value=!0,s=setTimeout(()=>{o.value=!1,s=null,e(...u)},St(t))}return r&&(o.value=!0,bi&&l()),Bo(a),{isPending:Po(o),start:l,stop:a}}function Gc(e=!1,t={}){const{truthyValue:n=!0,falsyValue:r=!1}=t,o=De(e),s=de(e);function i(a){if(arguments.length)return s.value=a,s.value;{const l=St(n);return s.value=s.value===l?St(r):l,s.value}}return o?i:[s,i]}const an=bi?window:void 0,Yc=bi?window.navigator:void 0;function yn(e){var t;const n=St(e);return(t=n==null?void 0:n.$el)!=null?t:n}function ft(...e){let t,n,r,o;if(typeof e[0]=="string"||Array.isArray(e[0])?([n,r,o]=e,t=an):[t,n,r,o]=e,!t)return Ns;Array.isArray(n)||(n=[n]),Array.isArray(r)||(r=[r]);const s=[],i=()=>{s.forEach(f=>f()),s.length=0},a=(f,c,d,p)=>(f.addEventListener(c,d,p),()=>f.removeEventListener(c,d,p)),l=Ue(()=>[yn(t),St(o)],([f,c])=>{if(i(),!f)return;const d=Ug(c)?{...c}:c;s.push(...n.flatMap(p=>r.map(_=>a(f,p,_,d))))},{immediate:!0,flush:"post"}),u=()=>{l(),i()};return Bo(u),u}function Zg(){const e=de(!1),t=Ur();return t&&Je(()=>{e.value=!0},t),e}function $o(e){const t=Zg();return H(()=>(t.value,!!e()))}function Si(e,t={}){const{window:n=an}=t,r=$o(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function");let o;const s=de(!1),i=u=>{s.value=u.matches},a=()=>{o&&("removeEventListener"in o?o.removeEventListener("change",i):o.removeListener(i))},l=ic(()=>{r.value&&(a(),o=n.matchMedia(St(e)),"addEventListener"in o?o.addEventListener("change",i):o.addListener(i),s.value=o.matches)});return Bo(()=>{l(),a(),o=void 0}),s}function ja(e,t={}){const{controls:n=!1,navigator:r=Yc}=t,o=$o(()=>r&&"permissions"in r),s=Pt(),i=typeof e=="string"?{name:e}:e,a=Pt(),l=()=>{var f,c;a.value=(c=(f=s.value)==null?void 0:f.state)!=null?c:"prompt"};ft(s,"change",l);const u=Kg(async()=>{if(o.value){if(!s.value)try{s.value=await r.permissions.query(i)}catch{s.value=void 0}finally{l()}if(n)return ue(s.value)}});return u(),n?{state:a,isSupported:o,query:u}:a}function Jg(e={}){const{navigator:t=Yc,read:n=!1,source:r,copiedDuring:o=1500,legacy:s=!1}=e,i=$o(()=>t&&"clipboard"in t),a=ja("clipboard-read"),l=ja("clipboard-write"),u=H(()=>i.value||s),f=de(""),c=de(!1),d=Xg(()=>c.value=!1,o);function p(){i.value&&b(a.value)?t.clipboard.readText().then(A=>{f.value=A}):f.value=y()}u.value&&n&&ft(["copy","cut"],p);async function _(A=St(r)){u.value&&A!=null&&(i.value&&b(l.value)?await t.clipboard.writeText(A):v(A),f.value=A,c.value=!0,d.start())}function v(A){const m=document.createElement("textarea");m.value=A??"",m.style.position="absolute",m.style.opacity="0",document.body.appendChild(m),m.select(),document.execCommand("copy"),m.remove()}function y(){var A,m,E;return(E=(m=(A=document==null?void 0:document.getSelection)==null?void 0:A.call(document))==null?void 0:m.toString())!=null?E:""}function b(A){return A==="granted"||A==="prompt"}return{isSupported:u,text:f,copied:c,copy:_}}const Qr=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},eo="__vueuse_ssr_handlers__",Qg=e_();function e_(){return eo in Qr||(Qr[eo]=Qr[eo]||{}),Qr[eo]}function t_(e,t){return Qg[e]||t}function n_(e){return Si("(prefers-color-scheme: dark)",e)}function r_(e){return e==null?"any":e instanceof Set?"set":e instanceof Map?"map":e instanceof Date?"date":typeof e=="boolean"?"boolean":typeof e=="string"?"string":typeof e=="object"?"object":Number.isNaN(e)?"any":"number"}const o_={boolean:{read:e=>e==="true",write:e=>String(e)},object:{read:e=>JSON.parse(e),write:e=>JSON.stringify(e)},number:{read:e=>Number.parseFloat(e),write:e=>String(e)},any:{read:e=>e,write:e=>String(e)},string:{read:e=>e,write:e=>String(e)},map:{read:e=>new Map(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e.entries()))},set:{read:e=>new Set(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e))},date:{read:e=>new Date(e),write:e=>e.toISOString()}},za="vueuse-storage";function Ai(e,t,n,r={}){var o;const{flush:s="pre",deep:i=!0,listenToStorageChanges:a=!0,writeDefaults:l=!0,mergeDefaults:u=!1,shallow:f,window:c=an,eventFilter:d,onError:p=O=>{console.error(O)},initOnMounted:_}=r,v=(f?Pt:de)(typeof t=="function"?t():t);if(!n)try{n=t_("getDefaultStorage",()=>{var O;return(O=an)==null?void 0:O.localStorage})()}catch(O){p(O)}if(!n)return v;const y=St(t),b=r_(y),A=(o=r.serializer)!=null?o:o_[b],{pause:m,resume:E}=Yg(v,()=>W(v.value),{flush:s,deep:i,eventFilter:d});c&&a&&Ei(()=>{n instanceof Storage?ft(c,"storage",C):ft(c,za,U),_&&C()}),_||C();function V(O,B){if(c){const w={key:e,oldValue:O,newValue:B,storageArea:n};c.dispatchEvent(n instanceof Storage?new StorageEvent("storage",w):new CustomEvent(za,{detail:w}))}}function W(O){try{const B=n.getItem(e);if(O==null)V(B,null),n.removeItem(e);else{const w=A.write(O);B!==w&&(n.setItem(e,w),V(B,w))}}catch(B){p(B)}}function M(O){const B=O?O.newValue:n.getItem(e);if(B==null)return l&&y!=null&&n.setItem(e,A.write(y)),y;if(!O&&u){const w=A.read(B);return typeof u=="function"?u(w,y):b==="object"&&!Array.isArray(w)?{...y,...w}:w}else return typeof B!="string"?B:A.read(B)}function C(O){if(!(O&&O.storageArea!==n)){if(O&&O.key==null){v.value=y;return}if(!(O&&O.key!==e)){m();try{(O==null?void 0:O.newValue)!==A.write(v.value)&&(v.value=M(O))}catch(B){p(B)}finally{O?Jn(E):E()}}}}function U(O){C(O.detail)}return v}function s_(e,t,n={}){const{window:r=an,...o}=n;let s;const i=$o(()=>r&&"ResizeObserver"in r),a=()=>{s&&(s.disconnect(),s=void 0)},l=H(()=>{const c=St(e);return Array.isArray(c)?c.map(d=>yn(d)):[yn(c)]}),u=Ue(l,c=>{if(a(),i.value&&r){s=new ResizeObserver(t);for(const d of c)d&&s.observe(d,o)}},{immediate:!0,flush:"post"}),f=()=>{a(),u()};return Bo(f),{isSupported:i,stop:f}}function i_(e,t={width:0,height:0},n={}){const{window:r=an,box:o="content-box"}=n,s=H(()=>{var c,d;return(d=(c=yn(e))==null?void 0:c.namespaceURI)==null?void 0:d.includes("svg")}),i=de(t.width),a=de(t.height),{stop:l}=s_(e,([c])=>{const d=o==="border-box"?c.borderBoxSize:o==="content-box"?c.contentBoxSize:c.devicePixelContentBoxSize;if(r&&s.value){const p=yn(e);if(p){const _=p.getBoundingClientRect();i.value=_.width,a.value=_.height}}else if(d){const p=Array.isArray(d)?d:[d];i.value=p.reduce((_,{inlineSize:v})=>_+v,0),a.value=p.reduce((_,{blockSize:v})=>_+v,0)}else i.value=c.contentRect.width,a.value=c.contentRect.height},n);Ei(()=>{const c=yn(e);c&&(i.value="offsetWidth"in c?c.offsetWidth:t.width,a.value="offsetHeight"in c?c.offsetHeight:t.height)});const u=Ue(()=>yn(e),c=>{i.value=c?t.width:0,a.value=c?t.height:0});function f(){l(),u()}return{width:i,height:a,stop:f}}function a_(e={}){const{window:t=an,behavior:n="auto"}=e;if(!t)return{x:de(0),y:de(0)};const r=de(t.scrollX),o=de(t.scrollY),s=H({get(){return r.value},set(a){scrollTo({left:a,behavior:n})}}),i=H({get(){return o.value},set(a){scrollTo({top:a,behavior:n})}});return ft(t,"scroll",()=>{r.value=t.scrollX,o.value=t.scrollY},{capture:!1,passive:!0}),{x:s,y:i}}function l_(e={}){const{window:t=an,initialWidth:n=Number.POSITIVE_INFINITY,initialHeight:r=Number.POSITIVE_INFINITY,listenOrientation:o=!0,includeScrollbar:s=!0,type:i="inner"}=e,a=de(n),l=de(r),u=()=>{t&&(i==="outer"?(a.value=t.outerWidth,l.value=t.outerHeight):s?(a.value=t.innerWidth,l.value=t.innerHeight):(a.value=t.document.documentElement.clientWidth,l.value=t.document.documentElement.clientHeight))};if(u(),Ei(u),ft("resize",u,{passive:!0}),o){const f=Si("(orientation: portrait)");Ue(f,()=>u())}return{width:a,height:l}}const Ka=async(e,t)=>{const{path:n,query:r}=e.currentRoute.value,{scrollBehavior:o}=e.options;e.options.scrollBehavior=void 0,await e.replace({path:n,query:r,hash:t}),e.options.scrollBehavior=o},u_=({headerLinkSelector:e,headerAnchorSelector:t,delay:n,offset:r=5})=>{const o=Tn();ft("scroll",qg(()=>{var _,v;const i=Math.max(window.scrollY,document.documentElement.scrollTop,document.body.scrollTop);if(Math.abs(i-0)c.some(b=>b.hash===y.hash));for(let y=0;y=(((_=b.parentElement)==null?void 0:_.offsetTop)??0)-r,E=!A||i<(((v=A.parentElement)==null?void 0:v.offsetTop)??0)-r;if(!(m&&E))continue;const W=decodeURIComponent(o.currentRoute.value.hash),M=decodeURIComponent(b.hash);if(W===M)return;if(f){for(let C=y+1;C{if(t===!1)return[];const[n,r]=typeof t=="number"?[t,t]:t==="deep"?[2,6]:t,o=e.filter(i=>i.level>=n&&i.level<=r),s=[];e:for(let i=0;i=0;l--){const u=o[l];if(u.level{let n;if(t.length){const r=e.cloneNode(!0);r.querySelectorAll(t.join(",")).forEach(o=>{o.remove()}),n=r.textContent||""}else n=e.textContent||"";return n.trim()},v_=({selector:e=[...new Array(6)].map((r,o)=>`[vp-content] h${o+1}`).join(","),levels:t=2,ignore:n=[]}={})=>{const r=Array.from(document.querySelectorAll(e)).filter(o=>o.id&&o.hasChildNodes()).map(o=>{const s=Number(o.tagName[1]);return{element:o,title:__(o,n),link:`#${o.id}`,slug:o.id,level:s}});return g_(r,t)},Xc=(e,t)=>{var r;const n=(r=Ur())==null?void 0:r.appContext.components;return n?e in n||rt(e)in n||Hr(rt(e))in n:!1},Zc=e=>new Promise(t=>{setTimeout(t,e)}),Jc=e=>{const t=Kr();return H(()=>e[t.value]??{})},y_=()=>{const e=Ng();return H(()=>Object.keys(e.value))},b_=e=>typeof e<"u",Qc=(e,t)=>bt(e)&&e.startsWith(t),{keys:E_}=Object,ef=e=>Qc(e,"/");var S_={"/":{backToTop:"Back to top"}};const A_=me({name:"BackToTop",setup(){const e=At(),t=Jc(S_),n=Pt(),{height:r}=i_(n),{height:o}=l_(),{y:s}=a_(),i=H(()=>e.value.backToTop!==!1&&s.value>100),a=H(()=>s.value/(r.value-o.value)*100);return Je(()=>{n.value=document.body}),()=>ve(fi,{name:"back-to-top"},()=>i.value?ve("button",{type:"button",class:"vp-back-to-top-button","aria-label":t.value.backToTop,onClick:()=>{window.scrollTo({top:0,behavior:"smooth"})}},[ve("span",{class:"vp-scroll-progress",role:"progressbar","aria-labelledby":"loadinglabel","aria-valuenow":a.value},ve("svg",ve("circle",{cx:"26",cy:"26",r:"24",fill:"none",stroke:"currentColor","stroke-width":"4","stroke-dasharray":`${Math.PI*a.value*.48} ${Math.PI*(100-a.value)*.48}`}))),ve("div",{class:"back-to-top-icon"})]):null)}}),C_=un({rootComponents:[A_]}),w_=Object.freeze(Object.defineProperty({__proto__:null,default:C_},Symbol.toStringTag,{value:"Module"})),T_=/language-(shellscript|shell|bash|sh|zsh)/,O_=({delay:e=500,duration:t=2e3,locales:n,selector:r,showInMobile:o,ignoreSelector:s=[],transform:i})=>{const a=Si("(max-width: 419px)"),l=H(()=>!a.value||o),u=Jc(n),f=Qn(),c=y=>{var A;if(y.hasAttribute("copy-code"))return;const b=document.createElement("button");b.type="button",b.classList.add("vp-copy-code-button"),b.setAttribute("aria-label",u.value.copy),b.setAttribute("data-copied",u.value.copied),(A=y.parentElement)==null||A.insertBefore(b,y),y.setAttribute("copy-code","")};Ue(()=>[f.value.path,l.value],async()=>{document.body.classList.toggle("no-copy-code",!l.value),l.value&&(await Jn(),await Zc(e),document.querySelectorAll(r.join(",")).forEach(c))},{immediate:!0});const{copy:p}=Jg({legacy:!0}),_=new WeakMap,v=async(y,b,A)=>{const m=b.cloneNode(!0);s.length&&m.querySelectorAll(s.join(",")).forEach(W=>{W.remove()}),i&&i(m);let E=m.textContent||"";if(T_.test(y.className)&&(E=E.replace(/^ *(\$|>) /gm,"")),await p(E),t<=0)return;A.classList.add("copied"),clearTimeout(_.get(A));const V=setTimeout(()=>{A.classList.remove("copied"),A.blur(),_.delete(A)},t);_.set(A,V)};ft("click",y=>{const b=y.target;if(l.value&&b.matches('div[class*="language-"] > button.vp-copy-code-button')){const A=b.parentElement,m=b.nextElementSibling;if(!A||!m)return;v(A,m,b)}})};var x_=[],k_={"/":{copy:"Copy code",copied:"Copied"}},P_=['[vp-content] div[class*="language-"] pre'];const I_=un({setup:()=>{O_({selector:P_,ignoreSelector:x_,locales:k_,duration:2e3,delay:500,showInMobile:!1})}}),R_=Object.freeze(Object.defineProperty({__proto__:null,default:I_},Symbol.toStringTag,{value:"Module"})),L_=un({setup(){ft("beforeprint",()=>{document.querySelectorAll("details").forEach(e=>{e.open=!0})})}}),D_=Object.freeze(Object.defineProperty({__proto__:null,default:L_},Symbol.toStringTag,{value:"Module"}));/*! medium-zoom 1.1.0 | MIT License | https://github.com/francoischalifour/medium-zoom */var gn=Object.assign||function(e){for(var t=1;t1&&arguments[1]!==void 0?arguments[1]:{},r=window.Promise||function(w){function L(){}w(L,L)},o=function(w){var L=w.target;if(L===U){_();return}m.indexOf(L)!==-1&&v({target:L})},s=function(){if(!(V||!C.original)){var w=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;Math.abs(W-w)>M.scrollOffset&&setTimeout(_,150)}},i=function(w){var L=w.key||w.keyCode;(L==="Escape"||L==="Esc"||L===27)&&_()},a=function(){var w=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},L=w;if(w.background&&(U.style.background=w.background),w.container&&w.container instanceof Object&&(L.container=gn({},M.container,w.container)),w.template){var Z=lo(w.template)?w.template:document.querySelector(w.template);L.template=Z}return M=gn({},M,L),m.forEach(function(ee){ee.dispatchEvent(kn("medium-zoom:update",{detail:{zoom:O}}))}),O},l=function(){var w=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};return e(gn({},M,w))},u=function(){for(var w=arguments.length,L=Array(w),Z=0;Z0?L.reduce(function(I,D){return[].concat(I,qa(D))},[]):m;return ee.forEach(function(I){I.classList.remove("medium-zoom-image"),I.dispatchEvent(kn("medium-zoom:detach",{detail:{zoom:O}}))}),m=m.filter(function(I){return ee.indexOf(I)===-1}),O},c=function(w,L){var Z=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{};return m.forEach(function(ee){ee.addEventListener("medium-zoom:"+w,L,Z)}),E.push({type:"medium-zoom:"+w,listener:L,options:Z}),O},d=function(w,L){var Z=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{};return m.forEach(function(ee){ee.removeEventListener("medium-zoom:"+w,L,Z)}),E=E.filter(function(ee){return!(ee.type==="medium-zoom:"+w&&ee.listener.toString()===L.toString())}),O},p=function(){var w=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},L=w.target,Z=function(){var I={width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,left:0,top:0,right:0,bottom:0},D=void 0,z=void 0;if(M.container)if(M.container instanceof Object)I=gn({},I,M.container),D=I.width-I.left-I.right-M.margin*2,z=I.height-I.top-I.bottom-M.margin*2;else{var le=lo(M.container)?M.container:document.querySelector(M.container),ye=le.getBoundingClientRect(),xe=ye.width,be=ye.height,Qe=ye.left,_t=ye.top;I=gn({},I,{width:xe,height:be,left:Qe,top:_t})}D=D||I.width-M.margin*2,z=z||I.height-M.margin*2;var et=C.zoomedHd||C.original,tt=Wa(et)?D:et.naturalWidth||D,x=Wa(et)?z:et.naturalHeight||z,q=et.getBoundingClientRect(),j=q.top,J=q.left,ce=q.width,Ee=q.height,h=Math.min(Math.max(ce,tt),D)/ce,g=Math.min(Math.max(Ee,x),z)/Ee,S=Math.min(h,g),k=(-J+(D-ce)/2+M.margin+I.left)/S,T=(-j+(z-Ee)/2+M.margin+I.top)/S,R="scale("+S+") translate3d("+k+"px, "+T+"px, 0)";C.zoomed.style.transform=R,C.zoomedHd&&(C.zoomedHd.style.transform=R)};return new r(function(ee){if(L&&m.indexOf(L)===-1){ee(O);return}var I=function xe(){V=!1,C.zoomed.removeEventListener("transitionend",xe),C.original.dispatchEvent(kn("medium-zoom:opened",{detail:{zoom:O}})),ee(O)};if(C.zoomed){ee(O);return}if(L)C.original=L;else if(m.length>0){var D=m;C.original=D[0]}else{ee(O);return}if(C.original.dispatchEvent(kn("medium-zoom:open",{detail:{zoom:O}})),W=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,V=!0,C.zoomed=M_(C.original),document.body.appendChild(U),M.template){var z=lo(M.template)?M.template:document.querySelector(M.template);C.template=document.createElement("div"),C.template.appendChild(z.content.cloneNode(!0)),document.body.appendChild(C.template)}if(C.original.parentElement&&C.original.parentElement.tagName==="PICTURE"&&C.original.currentSrc&&(C.zoomed.src=C.original.currentSrc),document.body.appendChild(C.zoomed),window.requestAnimationFrame(function(){document.body.classList.add("medium-zoom--opened")}),C.original.classList.add("medium-zoom-image--hidden"),C.zoomed.classList.add("medium-zoom-image--opened"),C.zoomed.addEventListener("click",_),C.zoomed.addEventListener("transitionend",I),C.original.getAttribute("data-zoom-src")){C.zoomedHd=C.zoomed.cloneNode(),C.zoomedHd.removeAttribute("srcset"),C.zoomedHd.removeAttribute("sizes"),C.zoomedHd.removeAttribute("loading"),C.zoomedHd.src=C.zoomed.getAttribute("data-zoom-src"),C.zoomedHd.onerror=function(){clearInterval(le),console.warn("Unable to reach the zoom image target "+C.zoomedHd.src),C.zoomedHd=null,Z()};var le=setInterval(function(){C.zoomedHd.complete&&(clearInterval(le),C.zoomedHd.classList.add("medium-zoom-image--opened"),C.zoomedHd.addEventListener("click",_),document.body.appendChild(C.zoomedHd),Z())},10)}else if(C.original.hasAttribute("srcset")){C.zoomedHd=C.zoomed.cloneNode(),C.zoomedHd.removeAttribute("sizes"),C.zoomedHd.removeAttribute("loading");var ye=C.zoomedHd.addEventListener("load",function(){C.zoomedHd.removeEventListener("load",ye),C.zoomedHd.classList.add("medium-zoom-image--opened"),C.zoomedHd.addEventListener("click",_),document.body.appendChild(C.zoomedHd),Z()})}else Z()})},_=function(){return new r(function(w){if(V||!C.original){w(O);return}var L=function Z(){C.original.classList.remove("medium-zoom-image--hidden"),document.body.removeChild(C.zoomed),C.zoomedHd&&document.body.removeChild(C.zoomedHd),document.body.removeChild(U),C.zoomed.classList.remove("medium-zoom-image--opened"),C.template&&document.body.removeChild(C.template),V=!1,C.zoomed.removeEventListener("transitionend",Z),C.original.dispatchEvent(kn("medium-zoom:closed",{detail:{zoom:O}})),C.original=null,C.zoomed=null,C.zoomedHd=null,C.template=null,w(O)};V=!0,document.body.classList.remove("medium-zoom--opened"),C.zoomed.style.transform="",C.zoomedHd&&(C.zoomedHd.style.transform=""),C.template&&(C.template.style.transition="opacity 150ms",C.template.style.opacity=0),C.original.dispatchEvent(kn("medium-zoom:close",{detail:{zoom:O}})),C.zoomed.addEventListener("transitionend",L)})},v=function(){var w=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},L=w.target;return C.original?_():p({target:L})},y=function(){return M},b=function(){return m},A=function(){return C.original},m=[],E=[],V=!1,W=0,M=n,C={original:null,zoomed:null,zoomedHd:null,template:null};Object.prototype.toString.call(t)==="[object Object]"?M=t:(t||typeof t=="string")&&u(t),M=gn({margin:0,background:"#fff",scrollOffset:40,container:null,template:null},M);var U=V_(M.background);document.addEventListener("click",o),document.addEventListener("keyup",i),document.addEventListener("scroll",s),window.addEventListener("resize",_);var O={open:p,close:_,toggle:v,update:a,clone:l,attach:u,detach:f,on:c,off:d,getOptions:y,getImages:b,getZoomedImage:A};return O};function F_(e,t){t===void 0&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",n==="top"&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}var B_=".medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;will-change:opacity}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform .3s cubic-bezier(.2,0,.2,1)!important}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}";F_(B_);const $_=Symbol("mediumZoom");var U_={};const j_="[vp-content] > img, [vp-content] :not(a) > img",z_=U_,K_=300,W_=un({enhance({app:e,router:t}){const n=H_(z_);n.refresh=(r=j_)=>{n.detach(),n.attach(r)},e.provide($_,n),t.afterEach(()=>{Zc(K_).then(()=>{n.refresh()})})}}),q_=Object.freeze(Object.defineProperty({__proto__:null,default:W_},Symbol.toStringTag,{value:"Module"}));/** + * NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress + * @license MIT + */const Ga=(e,t)=>{e.classList.add(t)},Ya=(e,t)=>{e.classList.remove(t)},G_=e=>{var t;(t=e==null?void 0:e.parentNode)==null||t.removeChild(e)},fs=(e,t,n)=>en?n:e,Xa=e=>(-1+e)*100,Y_=(()=>{const e=[],t=()=>{const n=e.shift();n&&n(t)};return n=>{e.push(n),e.length===1&&t()}})(),X_=e=>e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(t,n)=>n.toUpperCase()),no=(()=>{const e=["Webkit","O","Moz","ms"],t={},n=s=>{const{style:i}=document.body;if(s in i)return s;const a=s.charAt(0).toUpperCase()+s.slice(1);let l=e.length;for(;l--;){const u=`${e[l]}${a}`;if(u in i)return u}return s},r=s=>{const i=X_(s);return t[i]??(t[i]=n(i))},o=(s,i,a)=>{s.style[r(i)]=a};return(s,i)=>{for(const a in i){const l=i[a];Object.hasOwn(i,a)&&b_(l)&&o(s,a,l)}}})(),Dt={minimum:.08,easing:"ease",speed:200,trickleRate:.02,trickleSpeed:800,barSelector:'[role="bar"]',parent:"body",template:'
'},Pe={percent:null,isRendered:()=>!!document.getElementById("nprogress"),set:e=>{const{speed:t,easing:n}=Dt,r=Pe.isStarted(),o=fs(e,Dt.minimum,1);Pe.percent=o===1?null:o;const s=Pe.render(!r),i=s.querySelector(Dt.barSelector);return s.offsetWidth,Y_(a=>{no(i,{transform:`translate3d(${Xa(o)}%,0,0)`,transition:`all ${t}ms ${n}`}),o===1?(no(s,{transition:"none",opacity:"1"}),s.offsetWidth,setTimeout(()=>{no(s,{transition:`all ${t}ms linear`,opacity:"0"}),setTimeout(()=>{Pe.remove(),a()},t)},t)):setTimeout(()=>{a()},t)}),Pe},isStarted:()=>typeof Pe.percent=="number",start:()=>{Pe.percent||Pe.set(0);const e=()=>{setTimeout(()=>{Pe.percent&&(Pe.trickle(),e())},Dt.trickleSpeed)};return e(),Pe},done:e=>!e&&!Pe.percent?Pe:Pe.increase(.3+.5*Math.random()).set(1),increase:e=>{let{percent:t}=Pe;return t?(t=fs(t+(typeof e=="number"?e:(1-t)*fs(Math.random()*t,.1,.95)),0,.994),Pe.set(t)):Pe.start()},trickle:()=>Pe.increase(Math.random()*Dt.trickleRate),render:e=>{if(Pe.isRendered())return document.getElementById("nprogress");Ga(document.documentElement,"nprogress-busy");const t=document.createElement("div");t.id="nprogress",t.innerHTML=Dt.template;const n=t.querySelector(Dt.barSelector),r=document.querySelector(Dt.parent),o=e?"-100":Xa(Pe.percent??0);return no(n,{transition:"all 0 linear",transform:`translate3d(${o}%,0,0)`}),r&&(r!==document.body&&Ga(r,"nprogress-custom-parent"),r.appendChild(t)),t},remove:()=>{Ya(document.documentElement,"nprogress-busy"),Ya(document.querySelector(Dt.parent),"nprogress-custom-parent"),G_(document.getElementById("nprogress"))}},Z_=()=>{Je(()=>{const e=Tn(),t=new Set;t.add(e.currentRoute.value.path),e.beforeEach(n=>{t.has(n.path)||Pe.start()}),e.afterEach(n=>{t.add(n.path),Pe.done()})})},J_=un({setup(){Z_()}}),Q_=Object.freeze(Object.defineProperty({__proto__:null,default:J_},Symbol.toStringTag,{value:"Module"})),ev=({selector:e='div[class*="language-"].has-collapsed-lines > .collapsed-lines'}={})=>{ft("click",t=>{const n=t.target;if(n.matches(e)){const r=n.parentElement;r!=null&&r.classList.toggle("collapsed")&&r.scrollIntoView({block:"center",behavior:"instant"})}})},tv={setup(){ev()}},nv=Object.freeze(Object.defineProperty({__proto__:null,default:tv},Symbol.toStringTag,{value:"Module"})),rv="VUEPRESS_CODE_TAB_STORE",ro=Ai(rv,{}),ov=me({name:"CodeTabs",props:{active:{type:Number,default:0},data:{type:Array,required:!0},id:{type:String,required:!0},tabId:{type:String,default:""}},slots:Object,setup(e,{slots:t}){const n=de(e.active),r=Pt([]),o=()=>{e.tabId&&(ro.value[e.tabId]=e.data[n.value].id)},s=(u=n.value)=>{n.value=u{n.value=u>0?u-1:r.value.length-1,r.value[n.value].focus()},a=(u,f)=>{u.key===" "||u.key==="Enter"?(u.preventDefault(),n.value=f):u.key==="ArrowRight"?(u.preventDefault(),s()):u.key==="ArrowLeft"&&(u.preventDefault(),i()),e.tabId&&(ro.value[e.tabId]=e.data[n.value].id)},l=()=>{if(e.tabId){const u=e.data.findIndex(({id:f})=>ro.value[e.tabId]===f);if(u!==-1)return u}return e.active};return Je(()=>{n.value=l(),Ue(()=>ro.value[e.tabId],(u,f)=>{if(e.tabId&&u!==f){const c=e.data.findIndex(({id:d})=>d===u);c!==-1&&(n.value=c)}})}),()=>e.data.length?ve("div",{class:"vp-code-tabs"},[ve("div",{class:"vp-code-tabs-nav",role:"tablist"},e.data.map(({id:u},f)=>{const c=f===n.value;return ve("button",{type:"button",ref:d=>{d&&(r.value[f]=d)},class:["vp-code-tab-nav",{active:c}],role:"tab","aria-controls":`codetab-${e.id}-${f}`,"aria-selected":c,onClick:()=>{n.value=f,o()},onKeydown:d=>{a(d,f)}},t[`title${f}`]({value:u,isActive:c}))})),e.data.map(({id:u},f)=>{const c=f===n.value;return ve("div",{class:["vp-code-tab",{active:c}],id:`codetab-${e.id}-${f}`,role:"tabpanel","aria-expanded":c},[ve("div",{class:"vp-code-tab-title"},t[`title${f}`]({value:u,isActive:c})),t[`tab${f}`]({value:u,isActive:c})])})]):null}}),sv="VUEPRESS_TAB_STORE",ds=Ai(sv,{}),iv=me({name:"Tabs",props:{active:{type:Number,default:0},data:{type:Array,required:!0},id:{type:String,required:!0},tabId:{type:String,default:""}},slots:Object,setup(e,{slots:t}){const n=de(e.active),r=Pt([]),o=()=>{e.tabId&&(ds.value[e.tabId]=e.data[n.value].id)},s=(u=n.value)=>{n.value=u{n.value=u>0?u-1:r.value.length-1,r.value[n.value].focus()},a=(u,f)=>{u.key===" "||u.key==="Enter"?(u.preventDefault(),n.value=f):u.key==="ArrowRight"?(u.preventDefault(),s()):u.key==="ArrowLeft"&&(u.preventDefault(),i()),o()},l=()=>{if(e.tabId){const u=e.data.findIndex(({id:f})=>ds.value[e.tabId]===f);if(u!==-1)return u}return e.active};return Je(()=>{n.value=l(),Ue(()=>ds.value[e.tabId],(u,f)=>{if(e.tabId&&u!==f){const c=e.data.findIndex(({id:d})=>d===u);c!==-1&&(n.value=c)}})}),()=>e.data.length?ve("div",{class:"vp-tabs"},[ve("div",{class:"vp-tabs-nav",role:"tablist"},e.data.map(({id:u},f)=>{const c=f===n.value;return ve("button",{type:"button",ref:d=>{d&&(r.value[f]=d)},class:["vp-tab-nav",{active:c}],role:"tab","aria-controls":`tab-${e.id}-${f}`,"aria-selected":c,onClick:()=>{n.value=f,o()},onKeydown:d=>{a(d,f)}},t[`title${f}`]({value:u,isActive:c}))})),e.data.map(({id:u},f)=>{const c=f===n.value;return ve("div",{class:["vp-tab",{active:c}],id:`tab-${e.id}-${f}`,role:"tabpanel","aria-expanded":c},[ve("div",{class:"vp-tab-title"},t[`title${f}`]({value:u,isActive:c})),t[`tab${f}`]({value:u,isActive:c})])})]):null}}),av={enhance:({app:e})=>{e.component("CodeTabs",ov),e.component("Tabs",iv)}},lv=Object.freeze(Object.defineProperty({__proto__:null,default:av},Symbol.toStringTag,{value:"Module"}));var uv=Object.create,tf=Object.defineProperty,cv=Object.getOwnPropertyDescriptor,Ci=Object.getOwnPropertyNames,fv=Object.getPrototypeOf,dv=Object.prototype.hasOwnProperty,pv=(e,t)=>function(){return e&&(t=(0,e[Ci(e)[0]])(e=0)),t},hv=(e,t)=>function(){return t||(0,e[Ci(e)[0]])((t={exports:{}}).exports,t),t.exports},mv=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of Ci(t))!dv.call(e,o)&&o!==n&&tf(e,o,{get:()=>t[o],enumerable:!(r=cv(t,o))||r.enumerable});return e},gv=(e,t,n)=>(n=e!=null?uv(fv(e)):{},mv(tf(n,"default",{value:e,enumerable:!0}),e)),Wr=pv({"../../node_modules/.pnpm/tsup@8.3.5_@microsoft+api-extractor@7.43.0_@types+node@22.9.0__@swc+core@1.5.29_jiti@2.0.0_po_lnt5yfvawfblpk67opvcdwbq7u/node_modules/tsup/assets/esm_shims.js"(){}}),_v=hv({"../../node_modules/.pnpm/rfdc@1.4.1/node_modules/rfdc/index.js"(e,t){Wr(),t.exports=r;function n(s){return s instanceof Buffer?Buffer.from(s):new s.constructor(s.buffer.slice(),s.byteOffset,s.length)}function r(s){if(s=s||{},s.circles)return o(s);const i=new Map;if(i.set(Date,c=>new Date(c)),i.set(Map,(c,d)=>new Map(l(Array.from(c),d))),i.set(Set,(c,d)=>new Set(l(Array.from(c),d))),s.constructorHandlers)for(const c of s.constructorHandlers)i.set(c[0],c[1]);let a=null;return s.proto?f:u;function l(c,d){const p=Object.keys(c),_=new Array(p.length);for(let v=0;vnew Date(p)),l.set(Map,(p,_)=>new Map(f(Array.from(p),_))),l.set(Set,(p,_)=>new Set(f(Array.from(p),_))),s.constructorHandlers)for(const p of s.constructorHandlers)l.set(p[0],p[1]);let u=null;return s.proto?d:c;function f(p,_){const v=Object.keys(p),y=new Array(v.length);for(let b=0;b(i=Cv(e,u,f),i.finally(()=>{if(i=null,n.trailing&&a&&!o){const c=l(u,a);return a=null,c}}),i);return function(...u){return i?(n.trailing&&(a=u),i):new Promise(f=>{const c=!o&&n.leading;clearTimeout(o),o=setTimeout(()=>{o=null;const d=n.leading?r:l(this,u);for(const p of s)p(d);s=[]},t),c?(r=l(this,u),f(r)):s.push(f)})}}async function Cv(e,t,n){return await e.apply(t,n)}function Vs(e,t={},n){for(const r in e){const o=e[r],s=n?`${n}:${r}`:r;typeof o=="object"&&o!==null?Vs(o,t,s):typeof o=="function"&&(t[s]=o)}return t}const wv={run:e=>e()},Tv=()=>wv,rf=typeof console.createTask<"u"?console.createTask:Tv;function Ov(e,t){const n=t.shift(),r=rf(n);return e.reduce((o,s)=>o.then(()=>r.run(()=>s(...t))),Promise.resolve())}function xv(e,t){const n=t.shift(),r=rf(n);return Promise.all(e.map(o=>r.run(()=>o(...t))))}function ps(e,t){for(const n of[...e])n(t)}class kv{constructor(){this._hooks={},this._before=void 0,this._after=void 0,this._deprecatedMessages=void 0,this._deprecatedHooks={},this.hook=this.hook.bind(this),this.callHook=this.callHook.bind(this),this.callHookWith=this.callHookWith.bind(this)}hook(t,n,r={}){if(!t||typeof n!="function")return()=>{};const o=t;let s;for(;this._deprecatedHooks[t];)s=this._deprecatedHooks[t],t=s.to;if(s&&!r.allowDeprecated){let i=s.message;i||(i=`${o} hook has been deprecated`+(s.to?`, please use ${s.to}`:"")),this._deprecatedMessages||(this._deprecatedMessages=new Set),this._deprecatedMessages.has(i)||(console.warn(i),this._deprecatedMessages.add(i))}if(!n.name)try{Object.defineProperty(n,"name",{get:()=>"_"+t.replace(/\W+/g,"_")+"_hook_cb",configurable:!0})}catch{}return this._hooks[t]=this._hooks[t]||[],this._hooks[t].push(n),()=>{n&&(this.removeHook(t,n),n=void 0)}}hookOnce(t,n){let r,o=(...s)=>(typeof r=="function"&&r(),r=void 0,o=void 0,n(...s));return r=this.hook(t,o),r}removeHook(t,n){if(this._hooks[t]){const r=this._hooks[t].indexOf(n);r!==-1&&this._hooks[t].splice(r,1),this._hooks[t].length===0&&delete this._hooks[t]}}deprecateHook(t,n){this._deprecatedHooks[t]=typeof n=="string"?{to:n}:n;const r=this._hooks[t]||[];delete this._hooks[t];for(const o of r)this.hook(t,o)}deprecateHooks(t){Object.assign(this._deprecatedHooks,t);for(const n in t)this.deprecateHook(n,t[n])}addHooks(t){const n=Vs(t),r=Object.keys(n).map(o=>this.hook(o,n[o]));return()=>{for(const o of r.splice(0,r.length))o()}}removeHooks(t){const n=Vs(t);for(const r in n)this.removeHook(r,n[r])}removeAllHooks(){for(const t in this._hooks)delete this._hooks[t]}callHook(t,...n){return n.unshift(t),this.callHookWith(Ov,t,...n)}callHookParallel(t,...n){return n.unshift(t),this.callHookWith(xv,t,...n)}callHookWith(t,n,...r){const o=this._before||this._after?{name:n,args:r,context:{}}:void 0;this._before&&ps(this._before,o);const s=t(n in this._hooks?[...this._hooks[n]]:[],r);return s instanceof Promise?s.finally(()=>{this._after&&o&&ps(this._after,o)}):(this._after&&o&&ps(this._after,o),s)}beforeEach(t){return this._before=this._before||[],this._before.push(t),()=>{if(this._before!==void 0){const n=this._before.indexOf(t);n!==-1&&this._before.splice(n,1)}}}afterEach(t){return this._after=this._after||[],this._after.push(t),()=>{if(this._after!==void 0){const n=this._after.indexOf(t);n!==-1&&this._after.splice(n,1)}}}}function of(){return new kv}var Pv=Object.create,sf=Object.defineProperty,Iv=Object.getOwnPropertyDescriptor,wi=Object.getOwnPropertyNames,Rv=Object.getPrototypeOf,Lv=Object.prototype.hasOwnProperty,Dv=(e,t)=>function(){return e&&(t=(0,e[wi(e)[0]])(e=0)),t},af=(e,t)=>function(){return t||(0,e[wi(e)[0]])((t={exports:{}}).exports,t),t.exports},Nv=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of wi(t))!Lv.call(e,o)&&o!==n&&sf(e,o,{get:()=>t[o],enumerable:!(r=Iv(t,o))||r.enumerable});return e},Vv=(e,t,n)=>(n=e!=null?Pv(Rv(e)):{},Nv(sf(n,"default",{value:e,enumerable:!0}),e)),P=Dv({"../../node_modules/.pnpm/tsup@8.3.5_@microsoft+api-extractor@7.43.0_@types+node@22.9.0__@swc+core@1.5.29_jiti@2.0.0_po_lnt5yfvawfblpk67opvcdwbq7u/node_modules/tsup/assets/esm_shims.js"(){}}),Mv=af({"../../node_modules/.pnpm/speakingurl@14.0.1/node_modules/speakingurl/lib/speakingurl.js"(e,t){P(),function(n){var r={À:"A",Á:"A",Â:"A",Ã:"A",Ä:"Ae",Å:"A",Æ:"AE",Ç:"C",È:"E",É:"E",Ê:"E",Ë:"E",Ì:"I",Í:"I",Î:"I",Ï:"I",Ð:"D",Ñ:"N",Ò:"O",Ó:"O",Ô:"O",Õ:"O",Ö:"Oe",Ő:"O",Ø:"O",Ù:"U",Ú:"U",Û:"U",Ü:"Ue",Ű:"U",Ý:"Y",Þ:"TH",ß:"ss",à:"a",á:"a",â:"a",ã:"a",ä:"ae",å:"a",æ:"ae",ç:"c",è:"e",é:"e",ê:"e",ë:"e",ì:"i",í:"i",î:"i",ï:"i",ð:"d",ñ:"n",ò:"o",ó:"o",ô:"o",õ:"o",ö:"oe",ő:"o",ø:"o",ù:"u",ú:"u",û:"u",ü:"ue",ű:"u",ý:"y",þ:"th",ÿ:"y","ẞ":"SS",ا:"a",أ:"a",إ:"i",آ:"aa",ؤ:"u",ئ:"e",ء:"a",ب:"b",ت:"t",ث:"th",ج:"j",ح:"h",خ:"kh",د:"d",ذ:"th",ر:"r",ز:"z",س:"s",ش:"sh",ص:"s",ض:"dh",ط:"t",ظ:"z",ع:"a",غ:"gh",ف:"f",ق:"q",ك:"k",ل:"l",م:"m",ن:"n",ه:"h",و:"w",ي:"y",ى:"a",ة:"h",ﻻ:"la",ﻷ:"laa",ﻹ:"lai",ﻵ:"laa",گ:"g",چ:"ch",پ:"p",ژ:"zh",ک:"k",ی:"y","َ":"a","ً":"an","ِ":"e","ٍ":"en","ُ":"u","ٌ":"on","ْ":"","٠":"0","١":"1","٢":"2","٣":"3","٤":"4","٥":"5","٦":"6","٧":"7","٨":"8","٩":"9","۰":"0","۱":"1","۲":"2","۳":"3","۴":"4","۵":"5","۶":"6","۷":"7","۸":"8","۹":"9",က:"k",ခ:"kh",ဂ:"g",ဃ:"ga",င:"ng",စ:"s",ဆ:"sa",ဇ:"z","စျ":"za",ည:"ny",ဋ:"t",ဌ:"ta",ဍ:"d",ဎ:"da",ဏ:"na",တ:"t",ထ:"ta",ဒ:"d",ဓ:"da",န:"n",ပ:"p",ဖ:"pa",ဗ:"b",ဘ:"ba",မ:"m",ယ:"y",ရ:"ya",လ:"l",ဝ:"w",သ:"th",ဟ:"h",ဠ:"la",အ:"a","ြ":"y","ျ":"ya","ွ":"w","ြွ":"yw","ျွ":"ywa","ှ":"h",ဧ:"e","၏":"-e",ဣ:"i",ဤ:"-i",ဉ:"u",ဦ:"-u",ဩ:"aw","သြော":"aw",ဪ:"aw","၀":"0","၁":"1","၂":"2","၃":"3","၄":"4","၅":"5","၆":"6","၇":"7","၈":"8","၉":"9","္":"","့":"","း":"",č:"c",ď:"d",ě:"e",ň:"n",ř:"r",š:"s",ť:"t",ů:"u",ž:"z",Č:"C",Ď:"D",Ě:"E",Ň:"N",Ř:"R",Š:"S",Ť:"T",Ů:"U",Ž:"Z",ހ:"h",ށ:"sh",ނ:"n",ރ:"r",ބ:"b",ޅ:"lh",ކ:"k",އ:"a",ވ:"v",މ:"m",ފ:"f",ދ:"dh",ތ:"th",ލ:"l",ގ:"g",ޏ:"gn",ސ:"s",ޑ:"d",ޒ:"z",ޓ:"t",ޔ:"y",ޕ:"p",ޖ:"j",ޗ:"ch",ޘ:"tt",ޙ:"hh",ޚ:"kh",ޛ:"th",ޜ:"z",ޝ:"sh",ޞ:"s",ޟ:"d",ޠ:"t",ޡ:"z",ޢ:"a",ޣ:"gh",ޤ:"q",ޥ:"w","ަ":"a","ާ":"aa","ި":"i","ީ":"ee","ު":"u","ޫ":"oo","ެ":"e","ޭ":"ey","ޮ":"o","ޯ":"oa","ް":"",ა:"a",ბ:"b",გ:"g",დ:"d",ე:"e",ვ:"v",ზ:"z",თ:"t",ი:"i",კ:"k",ლ:"l",მ:"m",ნ:"n",ო:"o",პ:"p",ჟ:"zh",რ:"r",ს:"s",ტ:"t",უ:"u",ფ:"p",ქ:"k",ღ:"gh",ყ:"q",შ:"sh",ჩ:"ch",ც:"ts",ძ:"dz",წ:"ts",ჭ:"ch",ხ:"kh",ჯ:"j",ჰ:"h",α:"a",β:"v",γ:"g",δ:"d",ε:"e",ζ:"z",η:"i",θ:"th",ι:"i",κ:"k",λ:"l",μ:"m",ν:"n",ξ:"ks",ο:"o",π:"p",ρ:"r",σ:"s",τ:"t",υ:"y",φ:"f",χ:"x",ψ:"ps",ω:"o",ά:"a",έ:"e",ί:"i",ό:"o",ύ:"y",ή:"i",ώ:"o",ς:"s",ϊ:"i",ΰ:"y",ϋ:"y",ΐ:"i",Α:"A",Β:"B",Γ:"G",Δ:"D",Ε:"E",Ζ:"Z",Η:"I",Θ:"TH",Ι:"I",Κ:"K",Λ:"L",Μ:"M",Ν:"N",Ξ:"KS",Ο:"O",Π:"P",Ρ:"R",Σ:"S",Τ:"T",Υ:"Y",Φ:"F",Χ:"X",Ψ:"PS",Ω:"O",Ά:"A",Έ:"E",Ί:"I",Ό:"O",Ύ:"Y",Ή:"I",Ώ:"O",Ϊ:"I",Ϋ:"Y",ā:"a",ē:"e",ģ:"g",ī:"i",ķ:"k",ļ:"l",ņ:"n",ū:"u",Ā:"A",Ē:"E",Ģ:"G",Ī:"I",Ķ:"k",Ļ:"L",Ņ:"N",Ū:"U",Ќ:"Kj",ќ:"kj",Љ:"Lj",љ:"lj",Њ:"Nj",њ:"nj",Тс:"Ts",тс:"ts",ą:"a",ć:"c",ę:"e",ł:"l",ń:"n",ś:"s",ź:"z",ż:"z",Ą:"A",Ć:"C",Ę:"E",Ł:"L",Ń:"N",Ś:"S",Ź:"Z",Ż:"Z",Є:"Ye",І:"I",Ї:"Yi",Ґ:"G",є:"ye",і:"i",ї:"yi",ґ:"g",ă:"a",Ă:"A",ș:"s",Ș:"S",ț:"t",Ț:"T",ţ:"t",Ţ:"T",а:"a",б:"b",в:"v",г:"g",д:"d",е:"e",ё:"yo",ж:"zh",з:"z",и:"i",й:"i",к:"k",л:"l",м:"m",н:"n",о:"o",п:"p",р:"r",с:"s",т:"t",у:"u",ф:"f",х:"kh",ц:"c",ч:"ch",ш:"sh",щ:"sh",ъ:"",ы:"y",ь:"",э:"e",ю:"yu",я:"ya",А:"A",Б:"B",В:"V",Г:"G",Д:"D",Е:"E",Ё:"Yo",Ж:"Zh",З:"Z",И:"I",Й:"I",К:"K",Л:"L",М:"M",Н:"N",О:"O",П:"P",Р:"R",С:"S",Т:"T",У:"U",Ф:"F",Х:"Kh",Ц:"C",Ч:"Ch",Ш:"Sh",Щ:"Sh",Ъ:"",Ы:"Y",Ь:"",Э:"E",Ю:"Yu",Я:"Ya",ђ:"dj",ј:"j",ћ:"c",џ:"dz",Ђ:"Dj",Ј:"j",Ћ:"C",Џ:"Dz",ľ:"l",ĺ:"l",ŕ:"r",Ľ:"L",Ĺ:"L",Ŕ:"R",ş:"s",Ş:"S",ı:"i",İ:"I",ğ:"g",Ğ:"G",ả:"a",Ả:"A",ẳ:"a",Ẳ:"A",ẩ:"a",Ẩ:"A",đ:"d",Đ:"D",ẹ:"e",Ẹ:"E",ẽ:"e",Ẽ:"E",ẻ:"e",Ẻ:"E",ế:"e",Ế:"E",ề:"e",Ề:"E",ệ:"e",Ệ:"E",ễ:"e",Ễ:"E",ể:"e",Ể:"E",ỏ:"o",ọ:"o",Ọ:"o",ố:"o",Ố:"O",ồ:"o",Ồ:"O",ổ:"o",Ổ:"O",ộ:"o",Ộ:"O",ỗ:"o",Ỗ:"O",ơ:"o",Ơ:"O",ớ:"o",Ớ:"O",ờ:"o",Ờ:"O",ợ:"o",Ợ:"O",ỡ:"o",Ỡ:"O",Ở:"o",ở:"o",ị:"i",Ị:"I",ĩ:"i",Ĩ:"I",ỉ:"i",Ỉ:"i",ủ:"u",Ủ:"U",ụ:"u",Ụ:"U",ũ:"u",Ũ:"U",ư:"u",Ư:"U",ứ:"u",Ứ:"U",ừ:"u",Ừ:"U",ự:"u",Ự:"U",ữ:"u",Ữ:"U",ử:"u",Ử:"ư",ỷ:"y",Ỷ:"y",ỳ:"y",Ỳ:"Y",ỵ:"y",Ỵ:"Y",ỹ:"y",Ỹ:"Y",ạ:"a",Ạ:"A",ấ:"a",Ấ:"A",ầ:"a",Ầ:"A",ậ:"a",Ậ:"A",ẫ:"a",Ẫ:"A",ắ:"a",Ắ:"A",ằ:"a",Ằ:"A",ặ:"a",Ặ:"A",ẵ:"a",Ẵ:"A","⓪":"0","①":"1","②":"2","③":"3","④":"4","⑤":"5","⑥":"6","⑦":"7","⑧":"8","⑨":"9","⑩":"10","⑪":"11","⑫":"12","⑬":"13","⑭":"14","⑮":"15","⑯":"16","⑰":"17","⑱":"18","⑲":"18","⑳":"18","⓵":"1","⓶":"2","⓷":"3","⓸":"4","⓹":"5","⓺":"6","⓻":"7","⓼":"8","⓽":"9","⓾":"10","⓿":"0","⓫":"11","⓬":"12","⓭":"13","⓮":"14","⓯":"15","⓰":"16","⓱":"17","⓲":"18","⓳":"19","⓴":"20","Ⓐ":"A","Ⓑ":"B","Ⓒ":"C","Ⓓ":"D","Ⓔ":"E","Ⓕ":"F","Ⓖ":"G","Ⓗ":"H","Ⓘ":"I","Ⓙ":"J","Ⓚ":"K","Ⓛ":"L","Ⓜ":"M","Ⓝ":"N","Ⓞ":"O","Ⓟ":"P","Ⓠ":"Q","Ⓡ":"R","Ⓢ":"S","Ⓣ":"T","Ⓤ":"U","Ⓥ":"V","Ⓦ":"W","Ⓧ":"X","Ⓨ":"Y","Ⓩ":"Z","ⓐ":"a","ⓑ":"b","ⓒ":"c","ⓓ":"d","ⓔ":"e","ⓕ":"f","ⓖ":"g","ⓗ":"h","ⓘ":"i","ⓙ":"j","ⓚ":"k","ⓛ":"l","ⓜ":"m","ⓝ":"n","ⓞ":"o","ⓟ":"p","ⓠ":"q","ⓡ":"r","ⓢ":"s","ⓣ":"t","ⓤ":"u","ⓦ":"v","ⓥ":"w","ⓧ":"x","ⓨ":"y","ⓩ":"z","“":'"',"”":'"',"‘":"'","’":"'","∂":"d",ƒ:"f","™":"(TM)","©":"(C)",œ:"oe",Œ:"OE","®":"(R)","†":"+","℠":"(SM)","…":"...","˚":"o",º:"o",ª:"a","•":"*","၊":",","။":".",$:"USD","€":"EUR","₢":"BRN","₣":"FRF","£":"GBP","₤":"ITL","₦":"NGN","₧":"ESP","₩":"KRW","₪":"ILS","₫":"VND","₭":"LAK","₮":"MNT","₯":"GRD","₱":"ARS","₲":"PYG","₳":"ARA","₴":"UAH","₵":"GHS","¢":"cent","¥":"CNY",元:"CNY",円:"YEN","﷼":"IRR","₠":"EWE","฿":"THB","₨":"INR","₹":"INR","₰":"PF","₺":"TRY","؋":"AFN","₼":"AZN",лв:"BGN","៛":"KHR","₡":"CRC","₸":"KZT",ден:"MKD",zł:"PLN","₽":"RUB","₾":"GEL"},o=["်","ް"],s={"ာ":"a","ါ":"a","ေ":"e","ဲ":"e","ိ":"i","ီ":"i","ို":"o","ု":"u","ူ":"u","ေါင်":"aung","ော":"aw","ော်":"aw","ေါ":"aw","ေါ်":"aw","်":"်","က်":"et","ိုက်":"aik","ောက်":"auk","င်":"in","ိုင်":"aing","ောင်":"aung","စ်":"it","ည်":"i","တ်":"at","ိတ်":"eik","ုတ်":"ok","ွတ်":"ut","ေတ်":"it","ဒ်":"d","ိုဒ်":"ok","ုဒ်":"ait","န်":"an","ာန်":"an","ိန်":"ein","ုန်":"on","ွန်":"un","ပ်":"at","ိပ်":"eik","ုပ်":"ok","ွပ်":"ut","န်ုပ်":"nub","မ်":"an","ိမ်":"ein","ုမ်":"on","ွမ်":"un","ယ်":"e","ိုလ်":"ol","ဉ်":"in","ံ":"an","ိံ":"ein","ုံ":"on","ައް":"ah","ަށް":"ah"},i={en:{},az:{ç:"c",ə:"e",ğ:"g",ı:"i",ö:"o",ş:"s",ü:"u",Ç:"C",Ə:"E",Ğ:"G",İ:"I",Ö:"O",Ş:"S",Ü:"U"},cs:{č:"c",ď:"d",ě:"e",ň:"n",ř:"r",š:"s",ť:"t",ů:"u",ž:"z",Č:"C",Ď:"D",Ě:"E",Ň:"N",Ř:"R",Š:"S",Ť:"T",Ů:"U",Ž:"Z"},fi:{ä:"a",Ä:"A",ö:"o",Ö:"O"},hu:{ä:"a",Ä:"A",ö:"o",Ö:"O",ü:"u",Ü:"U",ű:"u",Ű:"U"},lt:{ą:"a",č:"c",ę:"e",ė:"e",į:"i",š:"s",ų:"u",ū:"u",ž:"z",Ą:"A",Č:"C",Ę:"E",Ė:"E",Į:"I",Š:"S",Ų:"U",Ū:"U"},lv:{ā:"a",č:"c",ē:"e",ģ:"g",ī:"i",ķ:"k",ļ:"l",ņ:"n",š:"s",ū:"u",ž:"z",Ā:"A",Č:"C",Ē:"E",Ģ:"G",Ī:"i",Ķ:"k",Ļ:"L",Ņ:"N",Š:"S",Ū:"u",Ž:"Z"},pl:{ą:"a",ć:"c",ę:"e",ł:"l",ń:"n",ó:"o",ś:"s",ź:"z",ż:"z",Ą:"A",Ć:"C",Ę:"e",Ł:"L",Ń:"N",Ó:"O",Ś:"S",Ź:"Z",Ż:"Z"},sv:{ä:"a",Ä:"A",ö:"o",Ö:"O"},sk:{ä:"a",Ä:"A"},sr:{љ:"lj",њ:"nj",Љ:"Lj",Њ:"Nj",đ:"dj",Đ:"Dj"},tr:{Ü:"U",Ö:"O",ü:"u",ö:"o"}},a={ar:{"∆":"delta","∞":"la-nihaya","♥":"hob","&":"wa","|":"aw","<":"aqal-men",">":"akbar-men","∑":"majmou","¤":"omla"},az:{},ca:{"∆":"delta","∞":"infinit","♥":"amor","&":"i","|":"o","<":"menys que",">":"mes que","∑":"suma dels","¤":"moneda"},cs:{"∆":"delta","∞":"nekonecno","♥":"laska","&":"a","|":"nebo","<":"mensi nez",">":"vetsi nez","∑":"soucet","¤":"mena"},de:{"∆":"delta","∞":"unendlich","♥":"Liebe","&":"und","|":"oder","<":"kleiner als",">":"groesser als","∑":"Summe von","¤":"Waehrung"},dv:{"∆":"delta","∞":"kolunulaa","♥":"loabi","&":"aai","|":"noonee","<":"ah vure kuda",">":"ah vure bodu","∑":"jumula","¤":"faisaa"},en:{"∆":"delta","∞":"infinity","♥":"love","&":"and","|":"or","<":"less than",">":"greater than","∑":"sum","¤":"currency"},es:{"∆":"delta","∞":"infinito","♥":"amor","&":"y","|":"u","<":"menos que",">":"mas que","∑":"suma de los","¤":"moneda"},fa:{"∆":"delta","∞":"bi-nahayat","♥":"eshgh","&":"va","|":"ya","<":"kamtar-az",">":"bishtar-az","∑":"majmooe","¤":"vahed"},fi:{"∆":"delta","∞":"aarettomyys","♥":"rakkaus","&":"ja","|":"tai","<":"pienempi kuin",">":"suurempi kuin","∑":"summa","¤":"valuutta"},fr:{"∆":"delta","∞":"infiniment","♥":"Amour","&":"et","|":"ou","<":"moins que",">":"superieure a","∑":"somme des","¤":"monnaie"},ge:{"∆":"delta","∞":"usasruloba","♥":"siqvaruli","&":"da","|":"an","<":"naklebi",">":"meti","∑":"jami","¤":"valuta"},gr:{},hu:{"∆":"delta","∞":"vegtelen","♥":"szerelem","&":"es","|":"vagy","<":"kisebb mint",">":"nagyobb mint","∑":"szumma","¤":"penznem"},it:{"∆":"delta","∞":"infinito","♥":"amore","&":"e","|":"o","<":"minore di",">":"maggiore di","∑":"somma","¤":"moneta"},lt:{"∆":"delta","∞":"begalybe","♥":"meile","&":"ir","|":"ar","<":"maziau nei",">":"daugiau nei","∑":"suma","¤":"valiuta"},lv:{"∆":"delta","∞":"bezgaliba","♥":"milestiba","&":"un","|":"vai","<":"mazak neka",">":"lielaks neka","∑":"summa","¤":"valuta"},my:{"∆":"kwahkhyaet","∞":"asaonasme","♥":"akhyait","&":"nhin","|":"tho","<":"ngethaw",">":"kyithaw","∑":"paungld","¤":"ngwekye"},mk:{},nl:{"∆":"delta","∞":"oneindig","♥":"liefde","&":"en","|":"of","<":"kleiner dan",">":"groter dan","∑":"som","¤":"valuta"},pl:{"∆":"delta","∞":"nieskonczonosc","♥":"milosc","&":"i","|":"lub","<":"mniejsze niz",">":"wieksze niz","∑":"suma","¤":"waluta"},pt:{"∆":"delta","∞":"infinito","♥":"amor","&":"e","|":"ou","<":"menor que",">":"maior que","∑":"soma","¤":"moeda"},ro:{"∆":"delta","∞":"infinit","♥":"dragoste","&":"si","|":"sau","<":"mai mic ca",">":"mai mare ca","∑":"suma","¤":"valuta"},ru:{"∆":"delta","∞":"beskonechno","♥":"lubov","&":"i","|":"ili","<":"menshe",">":"bolshe","∑":"summa","¤":"valjuta"},sk:{"∆":"delta","∞":"nekonecno","♥":"laska","&":"a","|":"alebo","<":"menej ako",">":"viac ako","∑":"sucet","¤":"mena"},sr:{},tr:{"∆":"delta","∞":"sonsuzluk","♥":"ask","&":"ve","|":"veya","<":"kucuktur",">":"buyuktur","∑":"toplam","¤":"para birimi"},uk:{"∆":"delta","∞":"bezkinechnist","♥":"lubov","&":"i","|":"abo","<":"menshe",">":"bilshe","∑":"suma","¤":"valjuta"},vn:{"∆":"delta","∞":"vo cuc","♥":"yeu","&":"va","|":"hoac","<":"nho hon",">":"lon hon","∑":"tong","¤":"tien te"}},l=[";","?",":","@","&","=","+","$",",","/"].join(""),u=[";","?",":","@","&","=","+","$",","].join(""),f=[".","!","~","*","'","(",")"].join(""),c=function(y,b){var A="-",m="",E="",V=!0,W={},M,C,U,O,B,w,L,Z,ee,I,D,z,le,ye,xe="";if(typeof y!="string")return"";if(typeof b=="string"&&(A=b),L=a.en,Z=i.en,typeof b=="object"){M=b.maintainCase||!1,W=b.custom&&typeof b.custom=="object"?b.custom:W,U=+b.truncate>1&&b.truncate||!1,O=b.uric||!1,B=b.uricNoSlash||!1,w=b.mark||!1,V=!(b.symbols===!1||b.lang===!1),A=b.separator||A,O&&(xe+=l),B&&(xe+=u),w&&(xe+=f),L=b.lang&&a[b.lang]&&V?a[b.lang]:V?a.en:{},Z=b.lang&&i[b.lang]?i[b.lang]:b.lang===!1||b.lang===!0?{}:i.en,b.titleCase&&typeof b.titleCase.length=="number"&&Array.prototype.toString.call(b.titleCase)?(b.titleCase.forEach(function(be){W[be+""]=be+""}),C=!0):C=!!b.titleCase,b.custom&&typeof b.custom.length=="number"&&Array.prototype.toString.call(b.custom)&&b.custom.forEach(function(be){W[be+""]=be+""}),Object.keys(W).forEach(function(be){var Qe;be.length>1?Qe=new RegExp("\\b"+p(be)+"\\b","gi"):Qe=new RegExp(p(be),"gi"),y=y.replace(Qe,W[be])});for(D in W)xe+=D}for(xe+=A,xe=p(xe),y=y.replace(/(^\s+|\s+$)/g,""),le=!1,ye=!1,I=0,z=y.length;I=0?(E+=D,D=""):ye===!0?(D=s[E]+r[D],E=""):D=le&&r[D].match(/[A-Za-z0-9]/)?" "+r[D]:r[D],le=!1,ye=!1):D in s?(E+=D,D="",I===z-1&&(D=s[E]),ye=!0):L[D]&&!(O&&l.indexOf(D)!==-1)&&!(B&&u.indexOf(D)!==-1)?(D=le||m.substr(-1).match(/[A-Za-z0-9]/)?A+L[D]:L[D],D+=y[I+1]!==void 0&&y[I+1].match(/[A-Za-z0-9]/)?A:"",le=!0):(ye===!0?(D=s[E]+D,E="",ye=!1):le&&(/[A-Za-z0-9]/.test(D)||m.substr(-1).match(/A-Za-z0-9]/))&&(D=" "+D),le=!1),m+=D.replace(new RegExp("[^\\w\\s"+xe+"_-]","g"),A);return C&&(m=m.replace(/(\w)(\S*)/g,function(be,Qe,_t){var et=Qe.toUpperCase()+(_t!==null?_t:"");return Object.keys(W).indexOf(et.toLowerCase())<0?et:et.toLowerCase()})),m=m.replace(/\s+/g,A).replace(new RegExp("\\"+A+"+","g"),A).replace(new RegExp("(^\\"+A+"+|\\"+A+"+$)","g"),""),U&&m.length>U&&(ee=m.charAt(U)===A,m=m.slice(0,U),ee||(m=m.slice(0,m.lastIndexOf(A)))),!M&&!C&&(m=m.toLowerCase()),m},d=function(y){return function(A){return c(A,y)}},p=function(y){return y.replace(/[-\\^$*+?.()|[\]{}\/]/g,"\\$&")},_=function(v,y){for(var b in y)if(y[b]===v)return!0};if(typeof t<"u"&&t.exports)t.exports=c,t.exports.createSlug=d;else if(typeof define<"u"&&define.amd)define([],function(){return c});else try{if(n.getSlug||n.createSlug)throw"speakingurl: globals exists /(getSlug|createSlug)/";n.getSlug=c,n.createSlug=d}catch{}}(e)}}),Hv=af({"../../node_modules/.pnpm/speakingurl@14.0.1/node_modules/speakingurl/index.js"(e,t){P(),t.exports=Mv()}});P();P();P();P();P();P();P();function Fv(e){return!!(e&&e.__v_isReadonly)}function lf(e){return Fv(e)?lf(e.__v_raw):!!(e&&e.__v_isReactive)}function hs(e){return!!(e&&e.__v_isRef===!0)}function pr(e){const t=e&&e.__v_raw;return t?pr(t):e}P();function Bv(e){var t;const n=e.name||e._componentTag||e.__VUE_DEVTOOLS_COMPONENT_GUSSED_NAME__||e.__name;return n==="index"&&((t=e.__file)!=null&&t.endsWith("index.vue"))?"":n}function $v(e){const t=e.__file;if(t)return Ev(Sv(t,".vue"))}function Qa(e,t){return e.type.__VUE_DEVTOOLS_COMPONENT_GUSSED_NAME__=t,t}function Uo(e){if(e.__VUE_DEVTOOLS_NEXT_APP_RECORD__)return e.__VUE_DEVTOOLS_NEXT_APP_RECORD__;if(e.root)return e.appContext.app.__VUE_DEVTOOLS_NEXT_APP_RECORD__}async function Uv(e){const{app:t,uid:n,instance:r}=e;try{if(r.__VUE_DEVTOOLS_NEXT_UID__)return r.__VUE_DEVTOOLS_NEXT_UID__;const o=await Uo(t);if(!o)return null;const s=o.rootInstance===r;return`${o.id}:${s?"root":n}`}catch{}}function uf(e){var t,n;const r=(t=e.subTree)==null?void 0:t.type,o=Uo(e);return o?((n=o==null?void 0:o.types)==null?void 0:n.Fragment)===r:!1}function jo(e){var t,n,r;const o=Bv((e==null?void 0:e.type)||{});if(o)return o;if((e==null?void 0:e.root)===e)return"Root";for(const i in(n=(t=e.parent)==null?void 0:t.type)==null?void 0:n.components)if(e.parent.type.components[i]===(e==null?void 0:e.type))return Qa(e,i);for(const i in(r=e.appContext)==null?void 0:r.components)if(e.appContext.components[i]===(e==null?void 0:e.type))return Qa(e,i);const s=$v((e==null?void 0:e.type)||{});return s||"Anonymous Component"}function Ms(e,t){return t=t||`${e.id}:root`,e.instanceMap.get(t)||e.instanceMap.get(":root")}var jv=class{constructor(){this.refEditor=new zv}set(e,t,n,r){const o=Array.isArray(t)?t:t.split(".");for(;o.length>1;){const a=o.shift();e instanceof Map&&(e=e.get(a)),e instanceof Set?e=Array.from(e.values())[a]:e=e[a],this.refEditor.isRef(e)&&(e=this.refEditor.get(e))}const s=o[0],i=this.refEditor.get(e)[s];r?r(e,s,n):this.refEditor.isRef(i)?this.refEditor.set(i,n):e[s]=n}get(e,t){const n=Array.isArray(t)?t:t.split(".");for(let r=0;r"u")return!1;const r=Array.isArray(t)?t.slice():t.split("."),o=n?2:1;for(;e&&r.length>o;){const s=r.shift();e=e[s],this.refEditor.isRef(e)&&(e=this.refEditor.get(e))}return e!=null&&Object.prototype.hasOwnProperty.call(e,r[0])}createDefaultSetCallback(e){return(t,n,r)=>{if((e.remove||e.newKey)&&(Array.isArray(t)?t.splice(n,1):pr(t)instanceof Map?t.delete(n):pr(t)instanceof Set?t.delete(Array.from(t.values())[n]):Reflect.deleteProperty(t,n)),!e.remove){const o=t[e.newKey||n];this.refEditor.isRef(o)?this.refEditor.set(o,r):pr(t)instanceof Map?t.set(e.newKey||n,r):pr(t)instanceof Set?t.add(r):t[e.newKey||n]=r}}}},zv=class{set(e,t){if(hs(e))e.value=t;else{if(e instanceof Set&&Array.isArray(t)){e.clear(),t.forEach(o=>e.add(o));return}const n=Object.keys(t);if(e instanceof Map){const o=new Set(e.keys());n.forEach(s=>{e.set(s,Reflect.get(t,s)),o.delete(s)}),o.forEach(s=>e.delete(s));return}const r=new Set(Object.keys(e));n.forEach(o=>{Reflect.set(e,o,Reflect.get(t,o)),r.delete(o)}),r.forEach(o=>Reflect.deleteProperty(e,o))}}get(e){return hs(e)?e.value:e}isRef(e){return hs(e)||lf(e)}};P();function Ti(e){return uf(e)?Kv(e.subTree):e.subTree?[e.subTree.el]:[]}function Kv(e){if(!e.children)return[];const t=[];return e.children.forEach(n=>{n.component?t.push(...Ti(n.component)):n!=null&&n.el&&t.push(n.el)}),t}P();P();function Wv(){const e={top:0,bottom:0,left:0,right:0,get width(){return e.right-e.left},get height(){return e.bottom-e.top}};return e}var oo;function qv(e){return oo||(oo=document.createRange()),oo.selectNode(e),oo.getBoundingClientRect()}function Gv(e){const t=Wv();if(!e.children)return t;for(let n=0,r=e.children.length;ne.bottom)&&(e.bottom=t.bottom),(!e.left||t.lefte.right)&&(e.right=t.right),e}var el={top:0,left:0,right:0,bottom:0,width:0,height:0};function wn(e){const t=e.subTree.el;return typeof window>"u"?el:uf(e)?Gv(e.subTree):(t==null?void 0:t.nodeType)===1?t==null?void 0:t.getBoundingClientRect():e.subTree.component?wn(e.subTree.component):el}var cf="__vue-devtools-component-inspector__",ff="__vue-devtools-component-inspector__card__",df="__vue-devtools-component-inspector__name__",pf="__vue-devtools-component-inspector__indicator__",hf={display:"block",zIndex:2147483640,position:"fixed",backgroundColor:"#42b88325",border:"1px solid #42b88350",borderRadius:"5px",transition:"all 0.1s ease-in",pointerEvents:"none"},Xv={fontFamily:"Arial, Helvetica, sans-serif",padding:"5px 8px",borderRadius:"4px",textAlign:"left",position:"absolute",left:0,color:"#e9e9e9",fontSize:"14px",fontWeight:600,lineHeight:"24px",backgroundColor:"#42b883",boxShadow:"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)"},Zv={display:"inline-block",fontWeight:400,fontStyle:"normal",fontSize:"12px",opacity:.7};function tr(){return document.getElementById(cf)}function Jv(){return document.getElementById(ff)}function Qv(){return document.getElementById(pf)}function e0(){return document.getElementById(df)}function Oi(e){return{left:`${Math.round(e.left*100)/100}px`,top:`${Math.round(e.top*100)/100}px`,width:`${Math.round(e.width*100)/100}px`,height:`${Math.round(e.height*100)/100}px`}}function xi(e){var t;const n=document.createElement("div");n.id=(t=e.elementId)!=null?t:cf,Object.assign(n.style,{...hf,...Oi(e.bounds),...e.style});const r=document.createElement("span");r.id=ff,Object.assign(r.style,{...Xv,top:e.bounds.top<35?0:"-35px"});const o=document.createElement("span");o.id=df,o.innerHTML=`<${e.name}>  `;const s=document.createElement("i");return s.id=pf,s.innerHTML=`${Math.round(e.bounds.width*100)/100} x ${Math.round(e.bounds.height*100)/100}`,Object.assign(s.style,Zv),r.appendChild(o),r.appendChild(s),n.appendChild(r),document.body.appendChild(n),n}function ki(e){const t=tr(),n=Jv(),r=e0(),o=Qv();t&&(Object.assign(t.style,{...hf,...Oi(e.bounds)}),Object.assign(n.style,{top:e.bounds.top<35?0:"-35px"}),r.innerHTML=`<${e.name}>  `,o.innerHTML=`${Math.round(e.bounds.width*100)/100} x ${Math.round(e.bounds.height*100)/100}`)}function t0(e){const t=wn(e);if(!t.width&&!t.height)return;const n=jo(e);tr()?ki({bounds:t,name:n}):xi({bounds:t,name:n})}function mf(){const e=tr();e&&(e.style.display="none")}var Hs=null;function Fs(e){const t=e.target;if(t){const n=t.__vueParentComponent;if(n&&(Hs=n,n.vnode.el)){const o=wn(n),s=jo(n);tr()?ki({bounds:o,name:s}):xi({bounds:o,name:s})}}}function n0(e,t){var n;if(e.preventDefault(),e.stopPropagation(),Hs){const r=(n=qe.value)==null?void 0:n.app;Uv({app:r,uid:r.uid,instance:Hs}).then(o=>{t(o)})}}var Co=null;function r0(){mf(),window.removeEventListener("mouseover",Fs),window.removeEventListener("click",Co,!0),Co=null}function o0(){return window.addEventListener("mouseover",Fs),new Promise(e=>{function t(n){n.preventDefault(),n.stopPropagation(),n0(n,r=>{window.removeEventListener("click",t,!0),Co=null,window.removeEventListener("mouseover",Fs);const o=tr();o&&(o.style.display="none"),e(JSON.stringify({id:r}))})}Co=t,window.addEventListener("click",t,!0)})}function s0(e){const t=Ms(qe.value,e.id);if(t){const[n]=Ti(t);if(typeof n.scrollIntoView=="function")n.scrollIntoView({behavior:"smooth"});else{const r=wn(t),o=document.createElement("div"),s={...Oi(r),position:"absolute"};Object.assign(o.style,s),document.body.appendChild(o),o.scrollIntoView({behavior:"smooth"}),setTimeout(()=>{document.body.removeChild(o)},2e3)}setTimeout(()=>{const r=wn(t);if(r.width||r.height){const o=jo(t),s=tr();s?ki({name:o,bounds:r}):xi({...e,name:o,bounds:r}),setTimeout(()=>{s&&(s.style.display="none")},1500)}},1200)}}P();var tl,nl;(nl=(tl=X).__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__)!=null||(tl.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__=!0);function i0(e){let t=0;const n=setInterval(()=>{X.__VUE_INSPECTOR__&&(clearInterval(n),t+=30,e()),t>=5e3&&clearInterval(n)},30)}function a0(){const e=X.__VUE_INSPECTOR__,t=e.openInEditor;e.openInEditor=async(...n)=>{e.disable(),t(...n)}}function l0(){return new Promise(e=>{function t(){a0(),e(X.__VUE_INSPECTOR__)}X.__VUE_INSPECTOR__?t():i0(()=>{t()})})}P();P();P();var u0="__VUE_DEVTOOLS_KIT_TIMELINE_LAYERS_STATE__";function c0(){if(!nf||typeof localStorage>"u"||localStorage===null)return{recordingState:!1,mouseEventEnabled:!1,keyboardEventEnabled:!1,componentEventEnabled:!1,performanceEventEnabled:!1,selected:""};const e=localStorage.getItem(u0);return e?JSON.parse(e):{recordingState:!1,mouseEventEnabled:!1,keyboardEventEnabled:!1,componentEventEnabled:!1,performanceEventEnabled:!1,selected:""}}P();P();P();var rl,ol;(ol=(rl=X).__VUE_DEVTOOLS_KIT_TIMELINE_LAYERS)!=null||(rl.__VUE_DEVTOOLS_KIT_TIMELINE_LAYERS=[]);var f0=new Proxy(X.__VUE_DEVTOOLS_KIT_TIMELINE_LAYERS,{get(e,t,n){return Reflect.get(e,t,n)}});function d0(e,t){Me.timelineLayersState[t.id]=!1,f0.push({...e,descriptorId:t.id,appRecord:Uo(t.app)})}var sl,il;(il=(sl=X).__VUE_DEVTOOLS_KIT_INSPECTOR__)!=null||(sl.__VUE_DEVTOOLS_KIT_INSPECTOR__=[]);var Pi=new Proxy(X.__VUE_DEVTOOLS_KIT_INSPECTOR__,{get(e,t,n){return Reflect.get(e,t,n)}}),gf=Kn(()=>{nr.hooks.callHook("sendInspectorToClient",_f())});function p0(e,t){var n,r;Pi.push({options:e,descriptor:t,treeFilterPlaceholder:(n=e.treeFilterPlaceholder)!=null?n:"Search tree...",stateFilterPlaceholder:(r=e.stateFilterPlaceholder)!=null?r:"Search state...",treeFilter:"",selectedNodeId:"",appRecord:Uo(t.app)}),gf()}function _f(){return Pi.filter(e=>e.descriptor.app===qe.value.app).filter(e=>e.descriptor.id!=="components").map(e=>{var t;const n=e.descriptor,r=e.options;return{id:r.id,label:r.label,logo:n.logo,icon:`custom-ic-baseline-${(t=r==null?void 0:r.icon)==null?void 0:t.replace(/_/g,"-")}`,packageName:n.packageName,homepage:n.homepage,pluginId:n.id}})}function uo(e,t){return Pi.find(n=>n.options.id===e&&(t?n.descriptor.app===t:!0))}function h0(){const e=of();e.hook("addInspector",({inspector:r,plugin:o})=>{p0(r,o.descriptor)});const t=Kn(async({inspectorId:r,plugin:o})=>{var s;if(!r||!((s=o==null?void 0:o.descriptor)!=null&&s.app)||Me.highPerfModeEnabled)return;const i=uo(r,o.descriptor.app),a={app:o.descriptor.app,inspectorId:r,filter:(i==null?void 0:i.treeFilter)||"",rootNodes:[]};await new Promise(l=>{e.callHookWith(async u=>{await Promise.all(u.map(f=>f(a))),l()},"getInspectorTree")}),e.callHookWith(async l=>{await Promise.all(l.map(u=>u({inspectorId:r,rootNodes:a.rootNodes})))},"sendInspectorTreeToClient")},120);e.hook("sendInspectorTree",t);const n=Kn(async({inspectorId:r,plugin:o})=>{var s;if(!r||!((s=o==null?void 0:o.descriptor)!=null&&s.app)||Me.highPerfModeEnabled)return;const i=uo(r,o.descriptor.app),a={app:o.descriptor.app,inspectorId:r,nodeId:(i==null?void 0:i.selectedNodeId)||"",state:null},l={currentTab:`custom-inspector:${r}`};a.nodeId&&await new Promise(u=>{e.callHookWith(async f=>{await Promise.all(f.map(c=>c(a,l))),u()},"getInspectorState")}),e.callHookWith(async u=>{await Promise.all(u.map(f=>f({inspectorId:r,nodeId:a.nodeId,state:a.state})))},"sendInspectorStateToClient")},120);return e.hook("sendInspectorState",n),e.hook("customInspectorSelectNode",({inspectorId:r,nodeId:o,plugin:s})=>{const i=uo(r,s.descriptor.app);i&&(i.selectedNodeId=o)}),e.hook("timelineLayerAdded",({options:r,plugin:o})=>{d0(r,o.descriptor)}),e.hook("timelineEventAdded",({options:r,plugin:o})=>{var s;const i=["performance","component-event","keyboard","mouse"];Me.highPerfModeEnabled||!((s=Me.timelineLayersState)!=null&&s[o.descriptor.id])&&!i.includes(r.layerId)||e.callHookWith(async a=>{await Promise.all(a.map(l=>l(r)))},"sendTimelineEventToClient")}),e.hook("getComponentInstances",async({app:r})=>{const o=r.__VUE_DEVTOOLS_NEXT_APP_RECORD__;if(!o)return null;const s=o.id.toString();return[...o.instanceMap].filter(([a])=>a.split(":")[0]===s).map(([,a])=>a)}),e.hook("getComponentBounds",async({instance:r})=>wn(r)),e.hook("getComponentName",({instance:r})=>jo(r)),e.hook("componentHighlight",({uid:r})=>{const o=qe.value.instanceMap.get(r);o&&t0(o)}),e.hook("componentUnhighlight",()=>{mf()}),e}var al,ll;(ll=(al=X).__VUE_DEVTOOLS_KIT_APP_RECORDS__)!=null||(al.__VUE_DEVTOOLS_KIT_APP_RECORDS__=[]);var ul,cl;(cl=(ul=X).__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__)!=null||(ul.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__={});var fl,dl;(dl=(fl=X).__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__)!=null||(fl.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__="");var pl,hl;(hl=(pl=X).__VUE_DEVTOOLS_KIT_CUSTOM_TABS__)!=null||(pl.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__=[]);var ml,gl;(gl=(ml=X).__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__)!=null||(ml.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__=[]);var bn="__VUE_DEVTOOLS_KIT_GLOBAL_STATE__";function m0(){return{connected:!1,clientConnected:!1,vitePluginDetected:!0,appRecords:[],activeAppRecordId:"",tabs:[],commands:[],highPerfModeEnabled:!0,devtoolsClientDetected:{},perfUniqueGroupId:0,timelineLayersState:c0()}}var _l,vl;(vl=(_l=X)[bn])!=null||(_l[bn]=m0());var g0=Kn(e=>{nr.hooks.callHook("devtoolsStateUpdated",{state:e})});Kn((e,t)=>{nr.hooks.callHook("devtoolsConnectedUpdated",{state:e,oldState:t})});var zo=new Proxy(X.__VUE_DEVTOOLS_KIT_APP_RECORDS__,{get(e,t,n){return t==="value"?X.__VUE_DEVTOOLS_KIT_APP_RECORDS__:X.__VUE_DEVTOOLS_KIT_APP_RECORDS__[t]}}),qe=new Proxy(X.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__,{get(e,t,n){return t==="value"?X.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__:t==="id"?X.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__:X.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__[t]}});function vf(){g0({...X[bn],appRecords:zo.value,activeAppRecordId:qe.id,tabs:X.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__,commands:X.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__})}function _0(e){X.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__=e,vf()}function v0(e){X.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__=e,vf()}var Me=new Proxy(X[bn],{get(e,t){return t==="appRecords"?zo:t==="activeAppRecordId"?qe.id:t==="tabs"?X.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__:t==="commands"?X.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__:X[bn][t]},deleteProperty(e,t){return delete e[t],!0},set(e,t,n){return{...X[bn]},e[t]=n,X[bn][t]=n,!0}});function y0(e={}){var t,n,r;const{file:o,host:s,baseUrl:i=window.location.origin,line:a=0,column:l=0}=e;if(o){if(s==="chrome-extension"){const u=o.replace(/\\/g,"\\\\"),f=(n=(t=window.VUE_DEVTOOLS_CONFIG)==null?void 0:t.openInEditorHost)!=null?n:"/";fetch(`${f}__open-in-editor?file=${encodeURI(o)}`).then(c=>{if(!c.ok){const d=`Opening component ${u} failed`;console.log(`%c${d}`,"color:red")}})}else if(Me.vitePluginDetected){const u=(r=X.__VUE_DEVTOOLS_OPEN_IN_EDITOR_BASE_URL__)!=null?r:i;X.__VUE_INSPECTOR__.openInEditor(u,o,a,l)}}}P();P();P();P();P();var yl,bl;(bl=(yl=X).__VUE_DEVTOOLS_KIT_PLUGIN_BUFFER__)!=null||(yl.__VUE_DEVTOOLS_KIT_PLUGIN_BUFFER__=[]);var Ii=new Proxy(X.__VUE_DEVTOOLS_KIT_PLUGIN_BUFFER__,{get(e,t,n){return Reflect.get(e,t,n)}});function Bs(e){const t={};return Object.keys(e).forEach(n=>{t[n]=e[n].defaultValue}),t}function Ri(e){return`__VUE_DEVTOOLS_NEXT_PLUGIN_SETTINGS__${e}__`}function b0(e){var t,n,r;const o=(n=(t=Ii.find(s=>{var i;return s[0].id===e&&!!((i=s[0])!=null&&i.settings)}))==null?void 0:t[0])!=null?n:null;return(r=o==null?void 0:o.settings)!=null?r:null}function yf(e,t){var n,r,o;const s=Ri(e);if(s){const i=localStorage.getItem(s);if(i)return JSON.parse(i)}if(e){const i=(r=(n=Ii.find(a=>a[0].id===e))==null?void 0:n[0])!=null?r:null;return Bs((o=i==null?void 0:i.settings)!=null?o:{})}return Bs(t)}function E0(e,t){const n=Ri(e);localStorage.getItem(n)||localStorage.setItem(n,JSON.stringify(Bs(t)))}function S0(e,t,n){const r=Ri(e),o=localStorage.getItem(r),s=JSON.parse(o||"{}"),i={...s,[t]:n};localStorage.setItem(r,JSON.stringify(i)),nr.hooks.callHookWith(a=>{a.forEach(l=>l({pluginId:e,key:t,oldValue:s[t],newValue:n,settings:i}))},"setPluginSettings")}P();P();P();P();P();P();P();P();P();P();P();var El,Sl,lt=(Sl=(El=X).__VUE_DEVTOOLS_HOOK)!=null?Sl:El.__VUE_DEVTOOLS_HOOK=of(),A0={vueAppInit(e){lt.hook("app:init",e)},vueAppUnmount(e){lt.hook("app:unmount",e)},vueAppConnected(e){lt.hook("app:connected",e)},componentAdded(e){return lt.hook("component:added",e)},componentEmit(e){return lt.hook("component:emit",e)},componentUpdated(e){return lt.hook("component:updated",e)},componentRemoved(e){return lt.hook("component:removed",e)},setupDevtoolsPlugin(e){lt.hook("devtools-plugin:setup",e)},perfStart(e){return lt.hook("perf:start",e)},perfEnd(e){return lt.hook("perf:end",e)}},bf={on:A0,setupDevToolsPlugin(e,t){return lt.callHook("devtools-plugin:setup",e,t)}},C0=class{constructor({plugin:e,ctx:t}){this.hooks=t.hooks,this.plugin=e}get on(){return{visitComponentTree:e=>{this.hooks.hook("visitComponentTree",e)},inspectComponent:e=>{this.hooks.hook("inspectComponent",e)},editComponentState:e=>{this.hooks.hook("editComponentState",e)},getInspectorTree:e=>{this.hooks.hook("getInspectorTree",e)},getInspectorState:e=>{this.hooks.hook("getInspectorState",e)},editInspectorState:e=>{this.hooks.hook("editInspectorState",e)},inspectTimelineEvent:e=>{this.hooks.hook("inspectTimelineEvent",e)},timelineCleared:e=>{this.hooks.hook("timelineCleared",e)},setPluginSettings:e=>{this.hooks.hook("setPluginSettings",e)}}}notifyComponentUpdate(e){var t;if(Me.highPerfModeEnabled)return;const n=_f().find(r=>r.packageName===this.plugin.descriptor.packageName);if(n!=null&&n.id){if(e){const r=[e.appContext.app,e.uid,(t=e.parent)==null?void 0:t.uid,e];lt.callHook("component:updated",...r)}else lt.callHook("component:updated");this.hooks.callHook("sendInspectorState",{inspectorId:n.id,plugin:this.plugin})}}addInspector(e){this.hooks.callHook("addInspector",{inspector:e,plugin:this.plugin}),this.plugin.descriptor.settings&&E0(e.id,this.plugin.descriptor.settings)}sendInspectorTree(e){Me.highPerfModeEnabled||this.hooks.callHook("sendInspectorTree",{inspectorId:e,plugin:this.plugin})}sendInspectorState(e){Me.highPerfModeEnabled||this.hooks.callHook("sendInspectorState",{inspectorId:e,plugin:this.plugin})}selectInspectorNode(e,t){this.hooks.callHook("customInspectorSelectNode",{inspectorId:e,nodeId:t,plugin:this.plugin})}visitComponentTree(e){return this.hooks.callHook("visitComponentTree",e)}now(){return Me.highPerfModeEnabled?0:Date.now()}addTimelineLayer(e){this.hooks.callHook("timelineLayerAdded",{options:e,plugin:this.plugin})}addTimelineEvent(e){Me.highPerfModeEnabled||this.hooks.callHook("timelineEventAdded",{options:e,plugin:this.plugin})}getSettings(e){return yf(e??this.plugin.descriptor.id,this.plugin.descriptor.settings)}getComponentInstances(e){return this.hooks.callHook("getComponentInstances",{app:e})}getComponentBounds(e){return this.hooks.callHook("getComponentBounds",{instance:e})}getComponentName(e){return this.hooks.callHook("getComponentName",{instance:e})}highlightElement(e){const t=e.__VUE_DEVTOOLS_NEXT_UID__;return this.hooks.callHook("componentHighlight",{uid:t})}unhighlightElement(){return this.hooks.callHook("componentUnhighlight")}},w0=C0;P();P();P();P();var T0="__vue_devtool_undefined__",O0="__vue_devtool_infinity__",x0="__vue_devtool_negative_infinity__",k0="__vue_devtool_nan__";P();P();var P0={[T0]:"undefined",[k0]:"NaN",[O0]:"Infinity",[x0]:"-Infinity"};Object.entries(P0).reduce((e,[t,n])=>(e[n]=t,e),{});P();P();P();P();P();var Al,Cl;(Cl=(Al=X).__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__)!=null||(Al.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__=new Set);function I0(e,t){return bf.setupDevToolsPlugin(e,t)}function R0(e,t){const[n,r]=e;if(n.app!==t)return;const o=new w0({plugin:{setupFn:r,descriptor:n},ctx:nr});n.packageName==="vuex"&&o.on.editInspectorState(s=>{o.sendInspectorState(s.inspectorId)}),r(o)}function Ef(e){X.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__.has(e)||Me.highPerfModeEnabled||(X.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__.add(e),Ii.forEach(t=>{R0(t,e)}))}P();P();var Rr="__VUE_DEVTOOLS_ROUTER__",Wn="__VUE_DEVTOOLS_ROUTER_INFO__",wl,Tl;(Tl=(wl=X)[Wn])!=null||(wl[Wn]={currentRoute:null,routes:[]});var Ol,xl;(xl=(Ol=X)[Rr])!=null||(Ol[Rr]={});new Proxy(X[Wn],{get(e,t){return X[Wn][t]}});new Proxy(X[Rr],{get(e,t){if(t==="value")return X[Rr]}});function L0(e){const t=new Map;return((e==null?void 0:e.getRoutes())||[]).filter(n=>!t.has(n.path)&&t.set(n.path,1))}function Li(e){return e.map(t=>{let{path:n,name:r,children:o,meta:s}=t;return o!=null&&o.length&&(o=Li(o)),{path:n,name:r,children:o,meta:s}})}function D0(e){if(e){const{fullPath:t,hash:n,href:r,path:o,name:s,matched:i,params:a,query:l}=e;return{fullPath:t,hash:n,href:r,path:o,name:s,params:a,query:l,matched:Li(i)}}return e}function N0(e,t){function n(){var r;const o=(r=e.app)==null?void 0:r.config.globalProperties.$router,s=D0(o==null?void 0:o.currentRoute.value),i=Li(L0(o)),a=console.warn;console.warn=()=>{},X[Wn]={currentRoute:s?Ja(s):{},routes:Ja(i)},X[Rr]=o,console.warn=a}n(),bf.on.componentUpdated(Kn(()=>{var r;((r=t.value)==null?void 0:r.app)===e.app&&(n(),!Me.highPerfModeEnabled&&nr.hooks.callHook("routerInfoUpdated",{state:X[Wn]}))},200))}function V0(e){return{async getInspectorTree(t){const n={...t,app:qe.value.app,rootNodes:[]};return await new Promise(r=>{e.callHookWith(async o=>{await Promise.all(o.map(s=>s(n))),r()},"getInspectorTree")}),n.rootNodes},async getInspectorState(t){const n={...t,app:qe.value.app,state:null},r={currentTab:`custom-inspector:${t.inspectorId}`};return await new Promise(o=>{e.callHookWith(async s=>{await Promise.all(s.map(i=>i(n,r))),o()},"getInspectorState")}),n.state},editInspectorState(t){const n=new jv,r={...t,app:qe.value.app,set:(o,s=t.path,i=t.state.value,a)=>{n.set(o,s,i,a||n.createDefaultSetCallback(t.state))}};e.callHookWith(o=>{o.forEach(s=>s(r))},"editInspectorState")},sendInspectorState(t){const n=uo(t);e.callHook("sendInspectorState",{inspectorId:t,plugin:{descriptor:n.descriptor,setupFn:()=>({})}})},inspectComponentInspector(){return o0()},cancelInspectComponentInspector(){return r0()},getComponentRenderCode(t){const n=Ms(qe.value,t);if(n)return(n==null?void 0:n.type)instanceof Function?n.type.toString():n.render.toString()},scrollToComponent(t){return s0({id:t})},openInEditor:y0,getVueInspector:l0,toggleApp(t){const n=zo.value.find(r=>r.id===t);n&&(v0(t),_0(n),N0(n,qe),gf(),Ef(n.app))},inspectDOM(t){const n=Ms(qe.value,t);if(n){const[r]=Ti(n);r&&(X.__VUE_DEVTOOLS_INSPECT_DOM_TARGET__=r)}},updatePluginSettings(t,n,r){S0(t,n,r)},getPluginSettings(t){return{options:b0(t),values:yf(t)}}}}P();var kl,Pl;(Pl=(kl=X).__VUE_DEVTOOLS_ENV__)!=null||(kl.__VUE_DEVTOOLS_ENV__={vitePluginDetected:!1});var Il=h0(),Rl,Ll;(Ll=(Rl=X).__VUE_DEVTOOLS_KIT_CONTEXT__)!=null||(Rl.__VUE_DEVTOOLS_KIT_CONTEXT__={hooks:Il,get state(){return{...Me,activeAppRecordId:qe.id,activeAppRecord:qe.value,appRecords:zo.value}},api:V0(Il)});var nr=X.__VUE_DEVTOOLS_KIT_CONTEXT__;P();Vv(Hv());var Dl,Nl;(Nl=(Dl=X).__VUE_DEVTOOLS_NEXT_APP_RECORD_INFO__)!=null||(Dl.__VUE_DEVTOOLS_NEXT_APP_RECORD_INFO__={id:0,appIds:new Set});P();function M0(e){Me.highPerfModeEnabled=e??!Me.highPerfModeEnabled,!e&&qe.value&&Ef(qe.value.app)}P();P();P();function H0(e){Me.devtoolsClientDetected={...Me.devtoolsClientDetected,...e};const t=Object.values(Me.devtoolsClientDetected).some(Boolean);M0(!t)}var Vl,Ml;(Ml=(Vl=X).__VUE_DEVTOOLS_UPDATE_CLIENT_DETECTED__)!=null||(Vl.__VUE_DEVTOOLS_UPDATE_CLIENT_DETECTED__=H0);P();P();P();P();P();P();P();var F0=class{constructor(){this.keyToValue=new Map,this.valueToKey=new Map}set(e,t){this.keyToValue.set(e,t),this.valueToKey.set(t,e)}getByKey(e){return this.keyToValue.get(e)}getByValue(e){return this.valueToKey.get(e)}clear(){this.keyToValue.clear(),this.valueToKey.clear()}},Sf=class{constructor(e){this.generateIdentifier=e,this.kv=new F0}register(e,t){this.kv.getByValue(e)||(t||(t=this.generateIdentifier(e)),this.kv.set(t,e))}clear(){this.kv.clear()}getIdentifier(e){return this.kv.getByValue(e)}getValue(e){return this.kv.getByKey(e)}},B0=class extends Sf{constructor(){super(e=>e.name),this.classToAllowedProps=new Map}register(e,t){typeof t=="object"?(t.allowProps&&this.classToAllowedProps.set(e,t.allowProps),super.register(e,t.identifier)):super.register(e,t)}getAllowedProps(e){return this.classToAllowedProps.get(e)}};P();P();function $0(e){if("values"in Object)return Object.values(e);const t=[];for(const n in e)e.hasOwnProperty(n)&&t.push(e[n]);return t}function U0(e,t){const n=$0(e);if("find"in n)return n.find(t);const r=n;for(let o=0;ot(r,n))}function co(e,t){return e.indexOf(t)!==-1}function Hl(e,t){for(let n=0;nt.isApplicable(e))}findByName(e){return this.transfomers[e]}};P();P();var z0=e=>Object.prototype.toString.call(e).slice(8,-1),Af=e=>typeof e>"u",K0=e=>e===null,Lr=e=>typeof e!="object"||e===null||e===Object.prototype?!1:Object.getPrototypeOf(e)===null?!0:Object.getPrototypeOf(e)===Object.prototype,$s=e=>Lr(e)&&Object.keys(e).length===0,ln=e=>Array.isArray(e),W0=e=>typeof e=="string",q0=e=>typeof e=="number"&&!isNaN(e),G0=e=>typeof e=="boolean",Y0=e=>e instanceof RegExp,Dr=e=>e instanceof Map,Nr=e=>e instanceof Set,Cf=e=>z0(e)==="Symbol",X0=e=>e instanceof Date&&!isNaN(e.valueOf()),Z0=e=>e instanceof Error,Fl=e=>typeof e=="number"&&isNaN(e),J0=e=>G0(e)||K0(e)||Af(e)||q0(e)||W0(e)||Cf(e),Q0=e=>typeof e=="bigint",e1=e=>e===1/0||e===-1/0,t1=e=>ArrayBuffer.isView(e)&&!(e instanceof DataView),n1=e=>e instanceof URL;P();var wf=e=>e.replace(/\./g,"\\."),ms=e=>e.map(String).map(wf).join("."),Sr=e=>{const t=[];let n="";for(let o=0;onull,()=>{}),wt(Q0,"bigint",e=>e.toString(),e=>typeof BigInt<"u"?BigInt(e):(console.error("Please add a BigInt polyfill."),e)),wt(X0,"Date",e=>e.toISOString(),e=>new Date(e)),wt(Z0,"Error",(e,t)=>{const n={name:e.name,message:e.message};return t.allowedErrorProps.forEach(r=>{n[r]=e[r]}),n},(e,t)=>{const n=new Error(e.message);return n.name=e.name,n.stack=e.stack,t.allowedErrorProps.forEach(r=>{n[r]=e[r]}),n}),wt(Y0,"regexp",e=>""+e,e=>{const t=e.slice(1,e.lastIndexOf("/")),n=e.slice(e.lastIndexOf("/")+1);return new RegExp(t,n)}),wt(Nr,"set",e=>[...e.values()],e=>new Set(e)),wt(Dr,"map",e=>[...e.entries()],e=>new Map(e)),wt(e=>Fl(e)||e1(e),"number",e=>Fl(e)?"NaN":e>0?"Infinity":"-Infinity",Number),wt(e=>e===0&&1/e===-1/0,"number",()=>"-0",Number),wt(n1,"URL",e=>e.toString(),e=>new URL(e))];function Ko(e,t,n,r){return{isApplicable:e,annotation:t,transform:n,untransform:r}}var Of=Ko((e,t)=>Cf(e)?!!t.symbolRegistry.getIdentifier(e):!1,(e,t)=>["symbol",t.symbolRegistry.getIdentifier(e)],e=>e.description,(e,t,n)=>{const r=n.symbolRegistry.getValue(t[1]);if(!r)throw new Error("Trying to deserialize unknown symbol");return r}),r1=[Int8Array,Uint8Array,Int16Array,Uint16Array,Int32Array,Uint32Array,Float32Array,Float64Array,Uint8ClampedArray].reduce((e,t)=>(e[t.name]=t,e),{}),xf=Ko(t1,e=>["typed-array",e.constructor.name],e=>[...e],(e,t)=>{const n=r1[t[1]];if(!n)throw new Error("Trying to deserialize unknown typed array");return new n(e)});function kf(e,t){return e!=null&&e.constructor?!!t.classRegistry.getIdentifier(e.constructor):!1}var Pf=Ko(kf,(e,t)=>["class",t.classRegistry.getIdentifier(e.constructor)],(e,t)=>{const n=t.classRegistry.getAllowedProps(e.constructor);if(!n)return{...e};const r={};return n.forEach(o=>{r[o]=e[o]}),r},(e,t,n)=>{const r=n.classRegistry.getValue(t[1]);if(!r)throw new Error("Trying to deserialize unknown class - check https://github.com/blitz-js/superjson/issues/116#issuecomment-773996564");return Object.assign(Object.create(r.prototype),e)}),If=Ko((e,t)=>!!t.customTransformerRegistry.findApplicable(e),(e,t)=>["custom",t.customTransformerRegistry.findApplicable(e).name],(e,t)=>t.customTransformerRegistry.findApplicable(e).serialize(e),(e,t,n)=>{const r=n.customTransformerRegistry.findByName(t[1]);if(!r)throw new Error("Trying to deserialize unknown custom value");return r.deserialize(e)}),o1=[Pf,Of,If,xf],Bl=(e,t)=>{const n=Hl(o1,o=>o.isApplicable(e,t));if(n)return{value:n.transform(e,t),type:n.annotation(e,t)};const r=Hl(Tf,o=>o.isApplicable(e,t));if(r)return{value:r.transform(e,t),type:r.annotation}},Rf={};Tf.forEach(e=>{Rf[e.annotation]=e});var s1=(e,t,n)=>{if(ln(t))switch(t[0]){case"symbol":return Of.untransform(e,t,n);case"class":return Pf.untransform(e,t,n);case"custom":return If.untransform(e,t,n);case"typed-array":return xf.untransform(e,t,n);default:throw new Error("Unknown transformation: "+t)}else{const r=Rf[t];if(!r)throw new Error("Unknown transformation: "+t);return r.untransform(e,n)}};P();var In=(e,t)=>{const n=e.keys();for(;t>0;)n.next(),t--;return n.next().value};function Lf(e){if(co(e,"__proto__"))throw new Error("__proto__ is not allowed as a property");if(co(e,"prototype"))throw new Error("prototype is not allowed as a property");if(co(e,"constructor"))throw new Error("constructor is not allowed as a property")}var i1=(e,t)=>{Lf(t);for(let n=0;n{if(Lf(t),t.length===0)return n(e);let r=e;for(let s=0;sjs(s,t,[...n,...Sr(i)]));return}const[r,o]=e;o&&qn(o,(s,i)=>{js(s,t,[...n,...Sr(i)])}),t(r,n)}function a1(e,t,n){return js(t,(r,o)=>{e=Us(e,o,s=>s1(s,r,n))}),e}function l1(e,t){function n(r,o){const s=i1(e,Sr(o));r.map(Sr).forEach(i=>{e=Us(e,i,()=>s)})}if(ln(t)){const[r,o]=t;r.forEach(s=>{e=Us(e,Sr(s),()=>e)}),o&&qn(o,n)}else qn(t,n);return e}var u1=(e,t)=>Lr(e)||ln(e)||Dr(e)||Nr(e)||kf(e,t);function c1(e,t,n){const r=n.get(e);r?r.push(t):n.set(e,[t])}function f1(e,t){const n={};let r;return e.forEach(o=>{if(o.length<=1)return;t||(o=o.map(a=>a.map(String)).sort((a,l)=>a.length-l.length));const[s,...i]=o;s.length===0?r=i.map(ms):n[ms(s)]=i.map(ms)}),r?$s(n)?[r]:[r,n]:$s(n)?void 0:n}var Df=(e,t,n,r,o=[],s=[],i=new Map)=>{var a;const l=J0(e);if(!l){c1(e,o,t);const _=i.get(e);if(_)return r?{transformedValue:null}:_}if(!u1(e,n)){const _=Bl(e,n),v=_?{transformedValue:_.value,annotations:[_.type]}:{transformedValue:e};return l||i.set(e,v),v}if(co(s,e))return{transformedValue:null};const u=Bl(e,n),f=(a=u==null?void 0:u.value)!=null?a:e,c=ln(f)?[]:{},d={};qn(f,(_,v)=>{if(v==="__proto__"||v==="constructor"||v==="prototype")throw new Error(`Detected property ${v}. This is a prototype pollution risk, please remove it from your object.`);const y=Df(_,t,n,r,[...o,v],[...s,e],i);c[v]=y.transformedValue,ln(y.annotations)?d[v]=y.annotations:Lr(y.annotations)&&qn(y.annotations,(b,A)=>{d[wf(v)+"."+A]=b})});const p=$s(d)?{transformedValue:c,annotations:u?[u.type]:void 0}:{transformedValue:c,annotations:u?[u.type,d]:d};return l||i.set(e,p),p};P();P();function Nf(e){return Object.prototype.toString.call(e).slice(8,-1)}function $l(e){return Nf(e)==="Array"}function d1(e){if(Nf(e)!=="Object")return!1;const t=Object.getPrototypeOf(e);return!!t&&t.constructor===Object&&t===Object.prototype}function p1(e,t,n,r,o){const s={}.propertyIsEnumerable.call(r,t)?"enumerable":"nonenumerable";s==="enumerable"&&(e[t]=n),o&&s==="nonenumerable"&&Object.defineProperty(e,t,{value:n,enumerable:!1,writable:!0,configurable:!0})}function zs(e,t={}){if($l(e))return e.map(o=>zs(o,t));if(!d1(e))return e;const n=Object.getOwnPropertyNames(e),r=Object.getOwnPropertySymbols(e);return[...n,...r].reduce((o,s)=>{if($l(t.props)&&!t.props.includes(s))return o;const i=e[s],a=zs(i,t);return p1(o,s,a,e,t.nonenumerable),o},{})}var we=class{constructor({dedupe:e=!1}={}){this.classRegistry=new B0,this.symbolRegistry=new Sf(t=>{var n;return(n=t.description)!=null?n:""}),this.customTransformerRegistry=new j0,this.allowedErrorProps=[],this.dedupe=e}serialize(e){const t=new Map,n=Df(e,t,this,this.dedupe),r={json:n.transformedValue};n.annotations&&(r.meta={...r.meta,values:n.annotations});const o=f1(t,this.dedupe);return o&&(r.meta={...r.meta,referentialEqualities:o}),r}deserialize(e){const{json:t,meta:n}=e;let r=zs(t);return n!=null&&n.values&&(r=a1(r,n.values,this)),n!=null&&n.referentialEqualities&&(r=l1(r,n.referentialEqualities)),r}stringify(e){return JSON.stringify(this.serialize(e))}parse(e){return this.deserialize(JSON.parse(e))}registerClass(e,t){this.classRegistry.register(e,t)}registerSymbol(e,t){this.symbolRegistry.register(e,t)}registerCustom(e,t){this.customTransformerRegistry.register({name:t,...e})}allowErrorProps(...e){this.allowedErrorProps.push(...e)}};we.defaultInstance=new we;we.serialize=we.defaultInstance.serialize.bind(we.defaultInstance);we.deserialize=we.defaultInstance.deserialize.bind(we.defaultInstance);we.stringify=we.defaultInstance.stringify.bind(we.defaultInstance);we.parse=we.defaultInstance.parse.bind(we.defaultInstance);we.registerClass=we.defaultInstance.registerClass.bind(we.defaultInstance);we.registerSymbol=we.defaultInstance.registerSymbol.bind(we.defaultInstance);we.registerCustom=we.defaultInstance.registerCustom.bind(we.defaultInstance);we.allowErrorProps=we.defaultInstance.allowErrorProps.bind(we.defaultInstance);P();P();P();P();P();P();P();P();P();P();P();P();P();P();P();P();P();P();P();P();P();P();P();var Ul,jl;(jl=(Ul=X).__VUE_DEVTOOLS_KIT_MESSAGE_CHANNELS__)!=null||(Ul.__VUE_DEVTOOLS_KIT_MESSAGE_CHANNELS__=[]);var zl,Kl;(Kl=(zl=X).__VUE_DEVTOOLS_KIT_RPC_CLIENT__)!=null||(zl.__VUE_DEVTOOLS_KIT_RPC_CLIENT__=null);var Wl,ql;(ql=(Wl=X).__VUE_DEVTOOLS_KIT_RPC_SERVER__)!=null||(Wl.__VUE_DEVTOOLS_KIT_RPC_SERVER__=null);var Gl,Yl;(Yl=(Gl=X).__VUE_DEVTOOLS_KIT_VITE_RPC_CLIENT__)!=null||(Gl.__VUE_DEVTOOLS_KIT_VITE_RPC_CLIENT__=null);var Xl,Zl;(Zl=(Xl=X).__VUE_DEVTOOLS_KIT_VITE_RPC_SERVER__)!=null||(Xl.__VUE_DEVTOOLS_KIT_VITE_RPC_SERVER__=null);var Jl,Ql;(Ql=(Jl=X).__VUE_DEVTOOLS_KIT_BROADCAST_RPC_SERVER__)!=null||(Jl.__VUE_DEVTOOLS_KIT_BROADCAST_RPC_SERVER__=null);P();P();P();P();P();P();P();const h1=JSON.parse(`{"logo":"logo_worldline.png","sidebar":[{"text":"Home","link":"/"},"/overview/","/configure/","/ui/","/nav/","/res/","/arch/","/network/","/preferences/","/database/"],"locales":{"/":{"selectLanguageName":"English"}},"colorMode":"auto","colorModeSwitch":true,"navbar":[],"repo":null,"selectLanguageText":"Languages","selectLanguageAriaLabel":"Select language","sidebarDepth":2,"editLink":true,"editLinkText":"Edit this page","lastUpdated":true,"lastUpdatedText":"Last Updated","contributors":true,"contributorsText":"Contributors","notFound":["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],"backToHome":"Take me home","openInNewWindow":"open in new window","toggleColorMode":"toggle color mode","toggleSidebar":"toggle sidebar"}`),m1=de(h1),Vf=()=>m1,Mf=Symbol(""),g1=()=>{const e=Ze(Mf);if(!e)throw new Error("useThemeLocaleData() is called without provider.");return e},_1=(e,t)=>{const{locales:n,...r}=e;return{...r,...n==null?void 0:n[t]}},v1=un({enhance({app:e}){const t=Vf(),n=e._context.provides[mi],r=H(()=>_1(t.value,n.routeLocale.value));e.provide(Mf,r),Object.defineProperties(e.config.globalProperties,{$theme:{get(){return t.value}},$themeLocale:{get(){return r.value}}}),I0({app:e,id:"org.vuejs.vuepress.plugin-theme-data",label:"VuePress Theme Data Plugin",packageName:"@vuepress/plugin-theme-data",homepage:"https://v2.vuepress.vuejs.org",logo:"https://v2.vuepress.vuejs.org/images/hero.png",componentStateTypes:["VuePress"]},o=>{o.on.inspectComponent(s=>{s.instanceData.state.push({type:"VuePress",key:"themeData",editable:!1,value:t.value},{type:"VuePress",key:"themeLocaleData",editable:!1,value:r.value})})})}}),y1=Object.freeze(Object.defineProperty({__proto__:null,default:v1},Symbol.toStringTag,{value:"Module"})),b1=()=>Vf(),Fe=()=>g1(),Hf=Symbol(""),E1=e=>{const t=(n=e.value)=>{const r=window.document.documentElement;r.dataset.theme=n?"dark":"light"};Je(()=>{Ue(e,t,{immediate:!0})}),Lo(()=>{t()})},Di=()=>{const e=Ze(Hf);if(!e)throw new Error("useDarkMode() is called without provider.");return e},S1=()=>{const e=Fe(),t=n_(),n=Ai("vuepress-color-scheme",e.value.colorMode),r=H({get(){return e.value.colorModeSwitch?n.value==="auto"?t.value:n.value==="dark":e.value.colorMode==="dark"},set(o){o===t.value?n.value="auto":n.value=o?"dark":"light"}});An(Hf,r),E1(r)};let gs=null,ur=null;const A1={wait:()=>gs,pending:()=>{gs=new Promise(e=>{ur=e})},resolve:()=>{ur==null||ur(),gs=null,ur=null}},Ff=()=>A1,Gn=(e,t)=>{const{notFound:n,meta:r,path:o}=Ir(e,t);return n?{text:o,link:o}:{text:r.title||o,link:o}},eu=e=>decodeURI(e).replace(/#.*$/,"").replace(/(index)?\.(md|html)$/,""),C1=(e,t)=>{if(t.hash===e)return!0;const n=eu(t.path),r=eu(e);return n===r},Bf=(e,t)=>e.link&&C1(e.link,t)?!0:"children"in e?e.children.some(n=>Bf(n,t)):!1,$f=e=>!Qh(e)&&!zr(e),Uf=e=>!Vo(e)||e.includes("github.com")?"GitHub":e.includes("bitbucket.org")?"Bitbucket":e.includes("gitlab.com")?"GitLab":e.includes("gitee.com")?"Gitee":null,w1={GitHub:":repo/edit/:branch/:path",GitLab:":repo/-/edit/:branch/:path",Gitee:":repo/edit/:branch/:path",Bitbucket:":repo/src/:branch/:path?mode=edit&spa=0&at=:branch&fileviewer=file-view-default"},T1=({docsRepo:e,editLinkPattern:t})=>{if(t)return t;const n=Uf(e);return n!==null?w1[n]:null},O1=({docsRepo:e,docsBranch:t,docsDir:n,filePathRelative:r,editLinkPattern:o})=>{if(!r)return null;const s=T1({docsRepo:e,editLinkPattern:o});return s?s.replace(/:repo/,Vo(e)?e:`https://github.com/${e}`).replace(/:branch/,t).replace(/:path/,Sc(`${Ec(n)}/${r}`)):null},Bn=(e="",t="")=>ef(t)||zr(t)?t:`${lm(e)}${t}`,fo=de([]),x1=()=>{const e=Tn(),t=Fe(),n=At(),r=H(()=>n.value.sidebarDepth??t.value.sidebarDepth??2);e.beforeEach((s,i)=>{s.path!==i.path&&(fo.value=[])});const o=()=>{if(r.value<=0){fo.value=[];return}fo.value=v_({levels:[2,r.value+1],ignore:[".vp-badge"]})};Ue(r,o),Je(o)},k1=()=>fo,P1=e=>({text:e.title,link:e.link,children:Ni(e.children)}),Ni=e=>e?e.map(t=>P1(t)):[],jf=(e,t)=>[{text:e.title,children:Ni(t)}],zf=(e,t,n,r="")=>{const o=(s,i)=>{var l;const a=bt(s)?Gn(Bn(i,s)):bt(s.link)?{...s,link:$f(s.link)?Gn(Bn(i,s.link)).link:s.link}:s;if("children"in a)return{...a,children:a.children.map(u=>o(u,Bn(i,a.prefix)))};if(a.link===n){const u=((l=t[0])==null?void 0:l.level)===1?t[0].children:t;return{...a,children:Ni(u)}}return a};return e.map(s=>o(s,r))},I1=(e,t,n,r)=>{const o=E_(e).sort((s,i)=>i.length-s.length);for(const s of o)if(Qc(decodeURI(r),s)){const i=e[s];return i?i==="heading"?jf(t,n):zf(i,n,r,s):[]}return console.warn(`${decodeURI(r)} is missing sidebar config.`),[]},Kf=Symbol("sidebarItems"),Vi=()=>{const e=Ze(Kf);if(!e)throw new Error("useSidebarItems() is called without provider.");return e},R1=(e,t,n,r,o)=>e===!1?[]:e==="heading"?jf(t,o):Array.isArray(e)?zf(e,o,n,r):di(e)?I1(e,t,o,n):[],L1=()=>{const e=Fe(),t=At(),n=Qn(),r=Kt(),o=Kr(),s=k1(),i=H(()=>t.value.home?!1:t.value.sidebar??e.value.sidebar??"heading"),a=H(()=>R1(i.value,n.value,r.path,o.value,s.value));An(Kf,a)},D1=me({__name:"Badge",props:{type:{default:"tip"},text:{default:""},vertical:{default:void 0}},setup(e,{expose:t}){t();const n={};return Object.defineProperty(n,"__isScriptSetup",{enumerable:!1,value:!0}),n}}),ke=(e,t)=>{const n=e.__vccOpts||e;for(const[r,o]of t)n[r]=o;return n};function N1(e,t,n,r,o,s){return Y(),ne("span",{class:nt(["vp-badge",n.type]),style:Xn({verticalAlign:n.vertical})},[Re(e.$slots,"default",{},()=>[on(Ie(n.text),1)])],6)}const V1=ke(D1,[["render",N1],["__file","Badge.vue"]]),M1=me({__name:"VPHomeFeatures",setup(e,{expose:t}){t();const n=At(),r=H(()=>n.value.features??[]),o={frontmatter:n,features:r};return Object.defineProperty(o,"__isScriptSetup",{enumerable:!1,value:!0}),o}}),H1={key:0,class:"vp-features"};function F1(e,t,n,r,o,s){return r.features.length?(Y(),ne("div",H1,[(Y(!0),ne(_e,null,nn(r.features,i=>(Y(),ne("div",{key:i.title,class:"vp-feature"},[ie("h2",null,Ie(i.title),1),ie("p",null,Ie(i.details),1)]))),128))])):He("",!0)}const B1=ke(M1,[["render",F1],["__file","VPHomeFeatures.vue"]]),$1=me({__name:"VPHomeFooter",setup(e,{expose:t}){t();const n=At(),r=H(()=>n.value.footer),o=H(()=>n.value.footerHtml),s={frontmatter:n,footer:r,footerHtml:o};return Object.defineProperty(s,"__isScriptSetup",{enumerable:!1,value:!0}),s}}),U1=["innerHTML"],j1=["textContent"];function z1(e,t,n,r,o,s){return r.footer?(Y(),ne(_e,{key:0},[r.footerHtml?(Y(),ne("div",{key:0,class:"vp-footer","vp-footer":"",innerHTML:r.footer},null,8,U1)):(Y(),ne("div",{key:1,class:"vp-footer","vp-footer":"",textContent:Ie(r.footer)},null,8,j1))],64)):He("",!0)}const K1=ke($1,[["render",z1],["__file","VPHomeFooter.vue"]]),W1=me({__name:"VPHomeHero",setup(e,{expose:t}){t();const n=At(),r=gi(),o=Di(),s=H(()=>n.value.heroText===null?null:n.value.heroText||r.value.title||"Hello"),i=H(()=>n.value.tagline===null?null:n.value.tagline||r.value.description||"Welcome to your VuePress site"),a=H(()=>o.value&&n.value.heroImageDark!==void 0?n.value.heroImageDark:n.value.heroImage),l=H(()=>n.value.heroAlt||s.value||"hero"),u=H(()=>n.value.heroHeight??280),f=H(()=>Array.isArray(n.value.actions)?n.value.actions.map(({text:p,link:_,type:v="primary"})=>({text:p,link:_,type:v})):[]),d={frontmatter:n,siteLocale:r,isDarkMode:o,heroText:s,tagline:i,heroImage:a,heroAlt:l,heroHeight:u,actions:f,HomeHeroImage:()=>{if(!a.value)return null;const p=ve("img",{class:"vp-hero-image",src:yi(a.value),alt:l.value,height:u.value});return n.value.heroImageDark===void 0?p:ve(_i,()=>p)},get AutoLink(){return er}};return Object.defineProperty(d,"__isScriptSetup",{enumerable:!1,value:!0}),d}}),q1={class:"vp-hero"},G1={key:0,id:"main-title"},Y1={key:1,class:"vp-hero-description"},X1={key:2,class:"vp-hero-actions"};function Z1(e,t,n,r,o,s){return Y(),ne("header",q1,[ae(r.HomeHeroImage),r.heroText?(Y(),ne("h1",G1,Ie(r.heroText),1)):He("",!0),r.tagline?(Y(),ne("p",Y1,Ie(r.tagline),1)):He("",!0),r.actions.length?(Y(),ne("p",X1,[(Y(!0),ne(_e,null,nn(r.actions,i=>(Y(),Le(r.AutoLink,{key:i.text,class:nt(["vp-hero-action-button",[i.type]]),config:i},null,8,["class","config"]))),128))])):He("",!0)])}const J1=ke(W1,[["render",Z1],["__file","VPHomeHero.vue"]]),Q1=me({__name:"VPHome",setup(e,{expose:t}){t();const n={VPHomeFeatures:B1,VPHomeFooter:K1,VPHomeHero:J1,get Content(){return vi}};return Object.defineProperty(n,"__isScriptSetup",{enumerable:!1,value:!0}),n}}),ey={class:"vp-home"},ty={class:"theme-default-content","vp-content":""};function ny(e,t,n,r,o,s){return Y(),ne("main",ey,[ae(r.VPHomeHero),ae(r.VPHomeFeatures),ie("div",ty,[ae(r.Content)]),ae(r.VPHomeFooter)])}const ry=ke(Q1,[["render",ny],["__file","VPHome.vue"]]),oy=me({__name:"VPNavbarBrand",setup(e,{expose:t}){t();const n=Kr(),r=gi(),o=Fe(),s=Di(),i=H(()=>o.value.home||n.value),a=H(()=>r.value.title),l=H(()=>s.value&&o.value.logoDark!==void 0?o.value.logoDark:o.value.logo),u=H(()=>o.value.logoAlt??a.value),f=H(()=>a.value.toLocaleUpperCase().trim()===u.value.toLocaleUpperCase().trim()),d={routeLocale:n,siteLocale:r,themeLocale:o,isDarkMode:s,navbarBrandLink:i,navbarBrandTitle:a,navbarBrandLogo:l,navbarBrandLogoAlt:u,navBarLogoAltMatchesTitle:f,NavbarBrandLogo:()=>{if(!l.value)return null;const p=ve("img",{class:"vp-site-logo",src:yi(l.value),alt:u.value});return o.value.logoDark===void 0?p:ve(_i,()=>p)},get RouteLink(){return Fo}};return Object.defineProperty(d,"__isScriptSetup",{enumerable:!1,value:!0}),d}}),sy=["aria-hidden"];function iy(e,t,n,r,o,s){return Y(),Le(r.RouteLink,{to:r.navbarBrandLink},{default:Ve(()=>[ae(r.NavbarBrandLogo),r.navbarBrandTitle?(Y(),ne("span",{key:0,class:nt(["vp-site-name",{"vp-hide-mobile":r.navbarBrandLogo}]),"aria-hidden":r.navBarLogoAltMatchesTitle},Ie(r.navbarBrandTitle),11,sy)):He("",!0)]),_:1},8,["to"])}const ay=ke(oy,[["render",iy],["__file","VPNavbarBrand.vue"]]),ly=me({__name:"VPDropdownTransition",setup(e,{expose:t}){t();const o={setHeight:s=>{s.style.height=`${s.scrollHeight}px`},unsetHeight:s=>{s.style.height=""}};return Object.defineProperty(o,"__isScriptSetup",{enumerable:!1,value:!0}),o}});function uy(e,t,n,r,o,s){return Y(),Le(fi,{name:"vp-dropdown",onEnter:r.setHeight,onAfterEnter:r.unsetHeight,onBeforeLeave:r.setHeight},{default:Ve(()=>[Re(e.$slots,"default")]),_:3})}const Wf=ke(ly,[["render",uy],["__file","VPDropdownTransition.vue"]]),cy=me({__name:"VPNavbarDropdown",props:{config:{}},setup(e,{expose:t}){t();const n=e,{config:r}=Ou(n),o=Kt(),[s,i]=Gc(!1),a=H(()=>r.value.ariaLabel||r.value.text),l=(c,d)=>d[d.length-1]===c,u=c=>{c.detail===0?i():i(!1)};Ue(()=>o.path,()=>{i(!1)});const f={props:n,config:r,route:o,open:s,toggleOpen:i,dropdownAriaLabel:a,isLastItemOfArray:l,handleDropdown:u,VPDropdownTransition:Wf,get AutoLink(){return er}};return Object.defineProperty(f,"__isScriptSetup",{enumerable:!1,value:!0}),f}}),fy=["aria-label"],dy={class:"title"},py=["aria-label"],hy={class:"title"},my={class:"vp-navbar-dropdown"},gy={class:"vp-navbar-dropdown-subtitle"},_y={key:1},vy={class:"vp-navbar-dropdown-subitem-wrapper"};function yy(e,t,n,r,o,s){return Y(),ne("div",{class:nt(["vp-navbar-dropdown-wrapper",{open:r.open}])},[ie("button",{class:"vp-navbar-dropdown-title",type:"button","aria-label":r.dropdownAriaLabel,onClick:r.handleDropdown},[ie("span",dy,Ie(r.config.text),1),t[1]||(t[1]=ie("span",{class:"arrow down"},null,-1))],8,fy),ie("button",{class:"vp-navbar-dropdown-title-mobile",type:"button","aria-label":r.dropdownAriaLabel,onClick:t[0]||(t[0]=()=>r.toggleOpen())},[ie("span",hy,Ie(r.config.text),1),ie("span",{class:nt(["arrow",r.open?"down":"right"])},null,2)],8,py),ae(r.VPDropdownTransition,null,{default:Ve(()=>[vo(ie("ul",my,[(Y(!0),ne(_e,null,nn(r.config.children,i=>(Y(),ne("li",{key:i.text,class:"vp-navbar-dropdown-item"},["children"in i?(Y(),ne(_e,{key:0},[ie("h4",gy,[i.link?(Y(),Le(r.AutoLink,{key:0,config:i,onFocusout:()=>{r.isLastItemOfArray(i,r.config.children)&&i.children.length===0&&(r.open=!1)}},null,8,["config","onFocusout"])):(Y(),ne("span",_y,Ie(i.text),1))]),ie("ul",vy,[(Y(!0),ne(_e,null,nn(i.children,a=>(Y(),ne("li",{key:a.link,class:"vp-navbar-dropdown-subitem"},[ae(r.AutoLink,{config:a,onFocusout:()=>{r.isLastItemOfArray(a,i.children)&&r.isLastItemOfArray(i,r.config.children)&&r.toggleOpen(!1)}},null,8,["config","onFocusout"])]))),128))])],64)):(Y(),Le(r.AutoLink,{key:1,config:i,onFocusout:()=>{r.isLastItemOfArray(i,r.config.children)&&r.toggleOpen(!1)}},null,8,["config","onFocusout"]))]))),128))],512),[[Ao,r.open]])]),_:1})],2)}const by=ke(cy,[["render",yy],["__file","VPNavbarDropdown.vue"]]),qf=(e,t="")=>bt(e)?Gn(Bn(t,e)):"children"in e?{...e,children:e.children.map(n=>qf(n,Bn(t,e.prefix)))}:{...e,link:$f(e.link)?Gn(Bn(t,e.link)).link:e.link},Ey=()=>{const e=Fe();return H(()=>(e.value.navbar||[]).map(t=>qf(t)))},Sy=()=>{const e=Fe(),t=H(()=>e.value.repo),n=H(()=>t.value?Uf(t.value):null),r=H(()=>t.value&&!Vo(t.value)?`https://github.com/${t.value}`:t.value),o=H(()=>r.value?e.value.repoLabel?e.value.repoLabel:n.value===null?"Source":n.value:null);return H(()=>!r.value||!o.value?[]:[{text:o.value,link:r.value}])},Ay=()=>{const e=Kt(),t=y_(),n=Kr(),r=zc(),o=gi(),s=b1(),i=Fe();return H(()=>{const a=Object.keys(r.value.locales);if(a.length<2)return[];const l=e.path,u=e.fullPath;return[{text:`${i.value.selectLanguageText}`,ariaLabel:`${i.value.selectLanguageAriaLabel??i.value.selectLanguageText}`,children:a.map(c=>{var b,A;const d=((b=r.value.locales)==null?void 0:b[c])??{},p=((A=s.value.locales)==null?void 0:A[c])??{},_=`${d.lang}`,v=p.selectLanguageName??_;if(_===o.value.lang)return{text:v,activeMatch:".",link:e.fullPath};const y=l.replace(n.value,c);return{text:v,link:t.value.some(m=>m===y)?u.replace(l,y):p.home??c}})}]})},Cy="719px",wy={mobile:Cy};var Vr;(function(e){e.Mobile="mobile"})(Vr||(Vr={}));const Ty={[Vr.Mobile]:Number.parseInt(wy.mobile.replace("px",""),10)},Gf=(e,t)=>{const n=Ty[e];Number.isInteger(n)&&(ft("orientationchange",()=>{t(n)},!1),ft("resize",()=>{t(n)},!1),Je(()=>{t(n)}))},Oy=me({__name:"VPNavbarItems",setup(e,{expose:t}){t();const n=Ey(),r=Ay(),o=Sy(),s=de(!1),i=H(()=>Fe().value.navbarLabel??"site navigation"),a=H(()=>[...n.value,...r.value,...o.value]);Gf(Vr.Mobile,u=>{s.value=window.innerWidth(Y(),ne("div",{key:i.text,class:"vp-navbar-item"},["children"in i?(Y(),Le(r.VPNavbarDropdown,{key:0,class:nt({mobile:r.isMobile}),config:i},null,8,["class","config"])):(Y(),Le(r.AutoLink,{key:1,config:i},null,8,["config"]))]))),128))],8,xy)):He("",!0)}const Yf=ke(Oy,[["render",ky],["__file","VPNavbarItems.vue"]]),Py={},Iy={class:"dark-icon",viewBox:"0 0 32 32"};function Ry(e,t){return Y(),ne("svg",Iy,t[0]||(t[0]=[ie("path",{d:"M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z",fill:"currentColor"},null,-1)]))}const Ly=ke(Py,[["render",Ry],["__file","VPDarkIcon.vue"]]),Dy={},Ny={class:"light-icon",viewBox:"0 0 32 32"};function Vy(e,t){return Y(),ne("svg",Ny,t[0]||(t[0]=[lh('',9)]))}const My=ke(Dy,[["render",Vy],["__file","VPLightIcon.vue"]]),Hy=me({__name:"VPToggleColorModeButton",setup(e,{expose:t}){t();const n=Fe(),r=Di(),s={themeLocale:n,isDarkMode:r,toggleColorMode:()=>{r.value=!r.value},VPDarkIcon:Ly,VPLightIcon:My};return Object.defineProperty(s,"__isScriptSetup",{enumerable:!1,value:!0}),s}}),Fy=["title"];function By(e,t,n,r,o,s){return Y(),ne("button",{type:"button",class:"vp-toggle-color-mode-button",title:r.themeLocale.toggleColorMode,onClick:r.toggleColorMode},[vo(ae(r.VPLightIcon,null,null,512),[[Ao,!r.isDarkMode]]),vo(ae(r.VPDarkIcon,null,null,512),[[Ao,r.isDarkMode]])],8,Fy)}const $y=ke(Hy,[["render",By],["__file","VPToggleColorModeButton.vue"]]),Uy=me({__name:"VPToggleSidebarButton",emits:["toggle"],setup(e,{expose:t}){t();const r={themeLocale:Fe()};return Object.defineProperty(r,"__isScriptSetup",{enumerable:!1,value:!0}),r}}),jy=["title"];function zy(e,t,n,r,o,s){return Y(),ne("div",{class:"vp-toggle-sidebar-button",title:r.themeLocale.toggleSidebar,"aria-expanded":"false",role:"button",tabindex:"0",onClick:t[0]||(t[0]=i=>e.$emit("toggle"))},t[1]||(t[1]=[ie("div",{class:"icon","aria-hidden":"true"},[ie("span"),ie("span"),ie("span")],-1)]),8,jy)}const Ky=ke(Uy,[["render",zy],["__file","VPToggleSidebarButton.vue"]]),Wy=me({__name:"VPNavbar",emits:["toggleSidebar"],setup(e,{expose:t}){t();const n=Xc("SearchBox")?ii("SearchBox"):()=>null,r=Fe(),o=de(null),s=de(null),i=de(0),a=H(()=>i.value?{maxWidth:`${i.value}px`}:{}),l=(f,c)=>{var _;const d=(_=f==null?void 0:f.ownerDocument.defaultView)==null?void 0:_.getComputedStyle(f,null)[c],p=Number.parseInt(d,10);return Number.isNaN(p)?0:p};Gf(Vr.Mobile,f=>{var d;const c=l(o.value,"paddingLeft")+l(o.value,"paddingRight");window.innerWidthe.$emit("toggleSidebar"))}),ie("span",Gy,[ae(r.VPNavbarBrand)],512),ie("div",{class:"vp-navbar-items-wrapper",style:Xn(r.linksWrapperStyle)},[Re(e.$slots,"before"),ae(r.VPNavbarItems,{class:"vp-hide-mobile"}),Re(e.$slots,"after"),r.themeLocale.colorModeSwitch?(Y(),Le(r.VPToggleColorModeButton,{key:0})):He("",!0),ae(r.SearchBox)],4)],512)}const Xy=ke(Wy,[["render",Yy],["__file","VPNavbar.vue"]]),Zy={},Jy={class:"edit-icon",viewBox:"0 0 1024 1024"};function Qy(e,t){return Y(),ne("svg",Jy,t[0]||(t[0]=[ie("g",{fill:"currentColor"},[ie("path",{d:"M430.818 653.65a60.46 60.46 0 0 1-50.96-93.281l71.69-114.012 7.773-10.365L816.038 80.138A60.46 60.46 0 0 1 859.225 62a60.46 60.46 0 0 1 43.186 18.138l43.186 43.186a60.46 60.46 0 0 1 0 86.373L588.879 565.55l-8.637 8.637-117.466 68.234a60.46 60.46 0 0 1-31.958 11.229z"}),ie("path",{d:"M728.802 962H252.891A190.883 190.883 0 0 1 62.008 771.98V296.934a190.883 190.883 0 0 1 190.883-192.61h267.754a60.46 60.46 0 0 1 0 120.92H252.891a69.962 69.962 0 0 0-69.098 69.099V771.98a69.962 69.962 0 0 0 69.098 69.098h475.911A69.962 69.962 0 0 0 797.9 771.98V503.363a60.46 60.46 0 1 1 120.922 0V771.98A190.883 190.883 0 0 1 728.802 962z"})],-1)]))}const eb=ke(Zy,[["render",Qy],["__file","VPEditIcon.vue"]]),tb=()=>{const e=Fe(),t=Qn(),n=At();return H(()=>{var o;return n.value.contributors??e.value.contributors??!0?((o=t.value.git)==null?void 0:o.contributors)??null:null})},nb=()=>{const e=Fe(),t=Qn(),n=At();return H(()=>{if(!(n.value.editLink??e.value.editLink??!0))return null;const{repo:o,docsRepo:s=o,docsBranch:i="main",docsDir:a="",editLinkText:l}=e.value;if(!s)return null;const u=O1({docsRepo:s,docsBranch:i,docsDir:a,filePathRelative:t.value.filePathRelative,editLinkPattern:n.value.editLinkPattern??e.value.editLinkPattern});return u?{text:l??"Edit this page",link:u}:null})},rb=()=>{const e=Fe(),t=Qn(),n=At();return H(()=>{var s;return!(n.value.lastUpdated??e.value.lastUpdated??!0)||!((s=t.value.git)!=null&&s.updatedTime)?null:new Date(t.value.git.updatedTime).toLocaleString()})},ob=me({__name:"VPPageMeta",setup(e,{expose:t}){t();const n=Fe(),r=nb(),o=rb(),s=tb(),i={themeLocale:n,editLink:r,lastUpdated:o,contributors:s,VPEditIcon:eb,get AutoLink(){return er}};return Object.defineProperty(i,"__isScriptSetup",{enumerable:!1,value:!0}),i}}),sb={class:"vp-page-meta"},ib={key:0,class:"vp-meta-item edit-link"},ab={class:"vp-meta-item git-info"},lb={key:0,class:"vp-meta-item last-updated"},ub={class:"meta-item-label"},cb={class:"meta-item-info"},fb={key:1,class:"vp-meta-item contributors"},db={class:"meta-item-label"},pb={class:"meta-item-info"},hb=["title"];function mb(e,t,n,r,o,s){const i=ii("ClientOnly");return Y(),ne("footer",sb,[r.editLink?(Y(),ne("div",ib,[ae(r.AutoLink,{class:"label",config:r.editLink},{before:Ve(()=>[ae(r.VPEditIcon)]),_:1},8,["config"])])):He("",!0),ie("div",ab,[r.lastUpdated?(Y(),ne("div",lb,[ie("span",ub,Ie(r.themeLocale.lastUpdatedText)+": ",1),ae(i,null,{default:Ve(()=>[ie("span",cb,Ie(r.lastUpdated),1)]),_:1})])):He("",!0),r.contributors&&r.contributors.length?(Y(),ne("div",fb,[ie("span",db,Ie(r.themeLocale.contributorsText)+": ",1),ie("span",pb,[(Y(!0),ne(_e,null,nn(r.contributors,(a,l)=>(Y(),ne(_e,{key:l},[ie("span",{class:"contributor",title:`email: ${a.email}`},Ie(a.name),9,hb),l!==r.contributors.length-1?(Y(),ne(_e,{key:0},[on(", ")],64)):He("",!0)],64))),128))])])):He("",!0)])])}const gb=ke(ob,[["render",mb],["__file","VPPageMeta.vue"]]),_b=()=>{const e=Tn(),t=Kt();return n=>{n&&(ef(n)?t.path!==n&&e.push(n):zr(n)?window.open(n):e.push(encodeURI(n)))}},tu=(e,t)=>e===!1?!1:bt(e)?Gn(e,t):di(e)?{...e,link:Gn(e.link,t).link}:null,Ks=(e,t,n)=>{const r=e.findIndex(s=>s.link===t);if(r!==-1){const s=e[r+n];return s?s.link?s:"prefix"in s&&!Ir(s.prefix).notFound?{...s,link:s.prefix}:null:null}for(const s of e)if("children"in s){const i=Ks(s.children,t,n);if(i)return i}const o=e.findIndex(s=>"prefix"in s&&s.prefix===t);if(o!==-1){const s=e[o+n];return s?s.link?s:"prefix"in s&&!Ir(s.prefix).notFound?{...s,link:s.prefix}:null:null}return null},vb=()=>{const e=At(),t=Fe(),n=Vi(),r=Kt(),o=H(()=>{const i=tu(e.value.prev,r.path);return i===!1?null:i??(t.value.prev===!1?null:Ks(n.value,r.path,-1))}),s=H(()=>{const i=tu(e.value.next,r.path);return i===!1?null:i??(t.value.next===!1?null:Ks(n.value,r.path,1))});return{prevLink:o,nextLink:s}},yb=me({__name:"VPPageNav",setup(e,{expose:t}){t();const n=Fe(),r=_b(),{prevLink:o,nextLink:s}=vb(),i=H(()=>n.value.pageNavbarLabel??"page navigation");ft("keydown",l=>{l.altKey&&(l.key==="ArrowRight"?s.value&&(r(s.value.link),l.preventDefault()):l.key==="ArrowLeft"&&o.value&&(r(o.value.link),l.preventDefault()))});const a={themeLocale:n,navigate:r,prevLink:o,nextLink:s,navbarLabel:i,get AutoLink(){return er}};return Object.defineProperty(a,"__isScriptSetup",{enumerable:!1,value:!0}),a}}),bb=["aria-label"],Eb={class:"hint"},Sb={class:"link"},Ab={class:"hint"},Cb={class:"link"};function wb(e,t,n,r,o,s){return r.prevLink||r.nextLink?(Y(),ne("nav",{key:0,class:"vp-page-nav","aria-label":r.navbarLabel},[r.prevLink?(Y(),Le(r.AutoLink,{key:0,class:"prev",config:r.prevLink},{default:Ve(()=>[ie("div",Eb,[t[0]||(t[0]=ie("span",{class:"arrow left"},null,-1)),on(" "+Ie(r.themeLocale.prev??"Prev"),1)]),ie("div",Sb,[ie("span",null,Ie(r.prevLink.text),1)])]),_:1},8,["config"])):He("",!0),r.nextLink?(Y(),Le(r.AutoLink,{key:1,class:"next",config:r.nextLink},{default:Ve(()=>[ie("div",Ab,[on(Ie(r.themeLocale.next??"Next")+" ",1),t[1]||(t[1]=ie("span",{class:"arrow right"},null,-1))]),ie("div",Cb,[ie("span",null,Ie(r.nextLink.text),1)])]),_:1},8,["config"])):He("",!0)],8,bb)):He("",!0)}const Tb=ke(yb,[["render",wb],["__file","VPPageNav.vue"]]),Ob=me({__name:"VPPage",setup(e,{expose:t}){t(),x1();const n={VPPageMeta:gb,VPPageNav:Tb,get Content(){return vi}};return Object.defineProperty(n,"__isScriptSetup",{enumerable:!1,value:!0}),n}}),xb={class:"vp-page"},kb={class:"theme-default-content","vp-content":""};function Pb(e,t,n,r,o,s){return Y(),ne("main",xb,[Re(e.$slots,"top"),ie("div",kb,[Re(e.$slots,"content-top"),ae(r.Content),Re(e.$slots,"content-bottom")]),ae(r.VPPageMeta),ae(r.VPPageNav),Re(e.$slots,"bottom")])}const Ib=ke(Ob,[["render",Pb],["__file","VPPage.vue"]]),Rb=me({__name:"VPSidebarItem",props:{item:{},depth:{default:0}},setup(e,{expose:t}){t();const n=e,{item:r,depth:o}=Ou(n),s=Kt(),i=Tn(),a=H(()=>"collapsible"in r.value&&r.value.collapsible),l=H(()=>Bf(r.value,s)),u=H(()=>({"vp-sidebar-item":!0,"vp-sidebar-heading":o.value===0,active:l.value,collapsible:a.value})),f=H(()=>a.value?l.value:!0),[c,d]=Gc(f.value),p=y=>{a.value&&(y.preventDefault(),d())},_=i.afterEach(()=>{Jn(()=>{c.value=f.value})});si(()=>{_()});const v={props:n,item:r,depth:o,route:s,router:i,collapsible:a,isActive:l,itemClass:u,isOpenDefault:f,isOpen:c,toggleIsOpen:d,onClick:p,unregisterRouterHook:_,VPDropdownTransition:Wf,get AutoLink(){return er}};return Object.defineProperty(v,"__isScriptSetup",{enumerable:!1,value:!0}),v}}),Lb={class:"vp-sidebar-children"};function Db(e,t,n,r,o,s){const i=ii("VPSidebarItem",!0);return Y(),ne("li",null,[r.item.link?(Y(),Le(r.AutoLink,{key:0,class:nt(r.itemClass),config:r.item},null,8,["class","config"])):(Y(),ne("p",{key:1,tabindex:"0",class:nt(r.itemClass),onClick:r.onClick,onKeydown:Wh(r.onClick,["enter"])},[on(Ie(r.item.text)+" ",1),r.collapsible?(Y(),ne("span",{key:0,class:nt(["arrow",r.isOpen?"down":"right"])},null,2)):He("",!0)],34)),"children"in r.item&&r.item.children.length?(Y(),Le(r.VPDropdownTransition,{key:2},{default:Ve(()=>[vo(ie("ul",Lb,[(Y(!0),ne(_e,null,nn(r.item.children,a=>(Y(),Le(i,{key:`${r.depth}${a.text}${a.link}`,item:a,depth:r.depth+1},null,8,["item","depth"]))),128))],512),[[Ao,r.isOpen]])]),_:1})):He("",!0)])}const Nb=ke(Rb,[["render",Db],["__file","VPSidebarItem.vue"]]),Vb=me({__name:"VPSidebarItems",setup(e,{expose:t}){t();const n=Kt(),r=Vi();Je(()=>{Ue(()=>n.hash,s=>{const i=document.querySelector(".vp-sidebar");if(!i)return;const a=document.querySelector(`.vp-sidebar a.vp-sidebar-item[href="${n.path}${s}"]`);if(!a)return;const{top:l,height:u}=i.getBoundingClientRect(),{top:f,height:c}=a.getBoundingClientRect();fl+u&&a.scrollIntoView(!1)})});const o={route:n,sidebarItems:r,VPSidebarItem:Nb};return Object.defineProperty(o,"__isScriptSetup",{enumerable:!1,value:!0}),o}}),Mb={key:0,class:"vp-sidebar-items"};function Hb(e,t,n,r,o,s){return r.sidebarItems.length?(Y(),ne("ul",Mb,[(Y(!0),ne(_e,null,nn(r.sidebarItems,i=>(Y(),Le(r.VPSidebarItem,{key:`${i.text}${i.link}`,item:i},null,8,["item"]))),128))])):He("",!0)}const Fb=ke(Vb,[["render",Hb],["__file","VPSidebarItems.vue"]]),Bb=me({__name:"VPSidebar",setup(e,{expose:t}){t();const n={VPNavbarItems:Yf,VPSidebarItems:Fb};return Object.defineProperty(n,"__isScriptSetup",{enumerable:!1,value:!0}),n}}),$b={class:"vp-sidebar","vp-sidebar":""};function Ub(e,t,n,r,o,s){return Y(),ne("aside",$b,[ae(r.VPNavbarItems),Re(e.$slots,"top"),ae(r.VPSidebarItems),Re(e.$slots,"bottom")])}const jb=ke(Bb,[["render",Ub],["__file","VPSidebar.vue"]]),zb=me({__name:"Layout",setup(e,{expose:t}){t();const n=Qn(),r=At(),o=Fe(),s=H(()=>r.value.navbar!==!1&&o.value.navbar!==!1),i=Vi(),a=de(!1),l=m=>{a.value=typeof m=="boolean"?m:!a.value},u={x:0,y:0},f=m=>{u.x=m.changedTouches[0].clientX,u.y=m.changedTouches[0].clientY},c=m=>{const E=m.changedTouches[0].clientX-u.x,V=m.changedTouches[0].clientY-u.y;Math.abs(E)>Math.abs(V)&&Math.abs(E)>40&&(E>0&&u.x<=80?l(!0):l(!1))},d=H(()=>r.value.externalLinkIcon??o.value.externalLinkIcon??!0),p=H(()=>[{"no-navbar":!s.value,"no-sidebar":!i.value.length,"sidebar-open":a.value,"external-link-icon":d.value},r.value.pageClass]);let _;Je(()=>{_=Tn().afterEach(()=>{l(!1)})}),Lo(()=>{_()});const v=Ff(),y=v.resolve,b=v.pending,A={page:n,frontmatter:r,themeLocale:o,shouldShowNavbar:s,sidebarItems:i,isSidebarOpen:a,toggleSidebar:l,touchStart:u,onTouchStart:f,onTouchEnd:c,enableExternalLinkIcon:d,containerClass:p,get unregisterRouterHook(){return _},set unregisterRouterHook(m){_=m},scrollPromise:v,onBeforeEnter:y,onBeforeLeave:b,VPHome:ry,VPNavbar:Xy,VPPage:Ib,VPSidebar:jb};return Object.defineProperty(A,"__isScriptSetup",{enumerable:!1,value:!0}),A}});function Kb(e,t,n,r,o,s){return Y(),ne("div",{class:nt(["vp-theme-container",r.containerClass]),"vp-container":"",onTouchstart:r.onTouchStart,onTouchend:r.onTouchEnd},[Re(e.$slots,"navbar",{},()=>[r.shouldShowNavbar?(Y(),Le(r.VPNavbar,{key:0,onToggleSidebar:r.toggleSidebar},{before:Ve(()=>[Re(e.$slots,"navbar-before")]),after:Ve(()=>[Re(e.$slots,"navbar-after")]),_:3})):He("",!0)]),ie("div",{class:"vp-sidebar-mask",onClick:t[0]||(t[0]=i=>r.toggleSidebar(!1))}),Re(e.$slots,"sidebar",{},()=>[ae(r.VPSidebar,null,{top:Ve(()=>[Re(e.$slots,"sidebar-top")]),bottom:Ve(()=>[Re(e.$slots,"sidebar-bottom")]),_:3})]),Re(e.$slots,"page",{},()=>[r.frontmatter.home?(Y(),Le(r.VPHome,{key:0})):(Y(),Le(fi,{key:1,name:"fade-slide-y",mode:"out-in",onBeforeEnter:r.onBeforeEnter,onBeforeLeave:r.onBeforeLeave},{default:Ve(()=>[(Y(),Le(r.VPPage,{key:r.page.path},{top:Ve(()=>[Re(e.$slots,"page-top")]),"content-top":Ve(()=>[Re(e.$slots,"page-content-top")]),"content-bottom":Ve(()=>[Re(e.$slots,"page-content-bottom")]),bottom:Ve(()=>[Re(e.$slots,"page-bottom")]),_:3}))]),_:3},8,["onBeforeEnter","onBeforeLeave"]))])],34)}const Wb=ke(zb,[["render",Kb],["__file","Layout.vue"]]),qb=me({__name:"NotFound",setup(e,{expose:t}){t();const n=Kr(),r=Fe(),o=r.value.notFound??["Not Found"],s=()=>o[Math.floor(Math.random()*o.length)],i=r.value.home??n.value,a=r.value.backToHome??"Back to home",l={routeLocale:n,themeLocale:r,messages:o,getMsg:s,homeLink:i,homeText:a,get RouteLink(){return Fo}};return Object.defineProperty(l,"__isScriptSetup",{enumerable:!1,value:!0}),l}}),Gb={class:"vp-theme-container","vp-container":""},Yb={class:"page"},Xb={class:"theme-default-content","vp-content":""};function Zb(e,t,n,r,o,s){return Y(),ne("div",Gb,[ie("main",Yb,[ie("div",Xb,[t[0]||(t[0]=ie("h1",null,"404",-1)),ie("blockquote",null,Ie(r.getMsg()),1),ae(r.RouteLink,{to:r.homeLink},{default:Ve(()=>[on(Ie(r.homeText),1)]),_:1},8,["to"])])])])}const Jb=ke(qb,[["render",Zb],["__scopeId","data-v-67c08c1d"],["__file","NotFound.vue"]]),Qb=un({enhance({app:e,router:t}){Xc("Badge")||e.component("Badge",V1);const n=t.options.scrollBehavior;t.options.scrollBehavior=async(...r)=>(await Ff().wait(),n(...r))},setup(){S1(),L1()},layouts:{Layout:Wb,NotFound:Jb}}),eE=Object.freeze(Object.defineProperty({__proto__:null,default:Qb},Symbol.toStringTag,{value:"Module"})),so=[m_,w_,R_,D_,q_,Q_,nv,lv,y1,eE].map(e=>e.default).filter(Boolean),tE=JSON.parse('{"base":"/learning-kotlin-multiplatform/","lang":"en-US","title":"","description":"","head":[["link",{"rel":"icon","href":"/learning-kotlin-multiplatform/favicon.ico"}],["link",{"rel":"manifest","href":"/learning-kotlin-multiplatform/manifest.webmanifest"}],["meta",{"name":"theme-color","content":"#bf4092"}]],"locales":{}}');var hr=Pt(tE),nE=Ym,rE=()=>{const e=kg({history:nE(Ec("/learning-kotlin-multiplatform/")),routes:[{name:"vuepress-route",path:"/:catchAll(.*)",components:{}}],scrollBehavior:(t,n,r)=>r||(t.hash?{el:t.hash}:{top:0})});return e.beforeResolve(async(t,n)=>{if(t.path!==n.path||n===Nt){const r=Ir(t.fullPath);if(r.path!==t.fullPath)return r.path;const o=await r.loader();t.meta={...r.meta,_pageChunk:o}}else t.path===n.path&&(t.meta=n.meta)}),e},oE=e=>{e.component("ClientOnly",_i),e.component("Content",vi),e.component("RouteLink",Fo)},sE=(e,t,n)=>{const r=H(()=>t.currentRoute.value.path),o=$d((y,b)=>({get(){return y(),t.currentRoute.value.meta._pageChunk},set(A){t.currentRoute.value.meta._pageChunk=A,b()}})),s=H(()=>hn.resolveLayouts(n)),i=H(()=>hn.resolveRouteLocale(hr.value.locales,r.value)),a=H(()=>hn.resolveSiteLocaleData(hr.value,i.value)),l=H(()=>o.value.comp),u=H(()=>o.value.data),f=H(()=>u.value.frontmatter),c=H(()=>hn.resolvePageHeadTitle(u.value,a.value)),d=H(()=>hn.resolvePageHead(c.value,f.value,a.value)),p=H(()=>hn.resolvePageLang(u.value,a.value)),_=H(()=>hn.resolvePageLayout(u.value,s.value)),v={layouts:s,pageData:u,pageComponent:l,pageFrontmatter:f,pageHead:d,pageHeadTitle:c,pageLang:p,pageLayout:_,redirects:Ds,routeLocale:i,routePath:r,routes:Fn,siteData:hr,siteLocaleData:a};return e.provide(mi,v),Object.defineProperties(e.config.globalProperties,{$frontmatter:{get:()=>f.value},$head:{get:()=>d.value},$headTitle:{get:()=>c.value},$lang:{get:()=>p.value},$page:{get:()=>u.value},$routeLocale:{get:()=>i.value},$site:{get:()=>hr.value},$siteLocale:{get:()=>a.value},$withBase:{get:()=>yi}}),v},iE=([e,t,n=""])=>{const r=Object.entries(t).map(([a,l])=>bt(l)?`[${a}=${JSON.stringify(l)}]`:l?`[${a}]`:"").join(""),o=`head > ${e}${r}`;return Array.from(document.querySelectorAll(o)).find(a=>a.innerText===n)??null},aE=([e,t,n])=>{if(!bt(e))return null;const r=document.createElement(e);return di(t)&&Object.entries(t).forEach(([o,s])=>{bt(s)?r.setAttribute(o,s):s&&r.setAttribute(o,"")}),bt(n)&&r.appendChild(document.createTextNode(n)),r},lE=()=>{const e=Rg(),t=Lg();let n=[];const r=()=>{e.value.forEach(i=>{const a=iE(i);a&&n.push(a)})},o=()=>{const i=[];return e.value.forEach(a=>{const l=aE(a);l&&i.push(l)}),i},s=()=>{document.documentElement.lang=t.value;const i=o();n.forEach((a,l)=>{const u=i.findIndex(f=>a.isEqualNode(f));u===-1?(a.remove(),delete n[l]):i.splice(u,1)}),i.forEach(a=>document.head.appendChild(a)),n=[...n.filter(a=>!!a),...i]};An(Vg,s),Je(()=>{r(),Ue(e,s,{immediate:!1})})},uE=Yh,cE=async()=>{var r;const e=uE({name:"Vuepress",setup(){var i;lE();for(const a of so)(i=a.setup)==null||i.call(a);const o=so.flatMap(({rootComponents:a=[]})=>a.map(l=>ve(l))),s=Dg();return()=>[ve(s.value),o]}}),t=rE();oE(e);const n=sE(e,t,so);{const{setupDevtools:o}=await pt(async()=>{const{setupDevtools:s}=await import("./setupDevtools-7MC2TMWH-CzOqVNI-.js");return{setupDevtools:s}},[]);o(e,n)}for(const o of so)await((r=o.enhance)==null?void 0:r.call(o,{app:e,router:t,siteData:hr}));return e.use(t),{app:e,router:t}};cE().then(({app:e,router:t})=>{t.isReady().then(()=>{e.mount("#app")})});export{ke as _,lh as a,ie as b,ne as c,cE as createVueApp,Y as o,I0 as s,Ue as w}; diff --git a/assets/apps-BKESpmvK.png b/assets/apps-BKESpmvK.png new file mode 100644 index 0000000..22dd4c7 Binary files /dev/null and b/assets/apps-BKESpmvK.png differ diff --git a/assets/avatar-Bf9zzubu.png b/assets/avatar-Bf9zzubu.png new file mode 100644 index 0000000..9899730 Binary files /dev/null and b/assets/avatar-Bf9zzubu.png differ diff --git a/assets/data_layer-i0YTWCrI.png b/assets/data_layer-i0YTWCrI.png new file mode 100644 index 0000000..0ae2380 Binary files /dev/null and b/assets/data_layer-i0YTWCrI.png differ diff --git a/assets/diagramme_sql-CFrbOXnm.png b/assets/diagramme_sql-CFrbOXnm.png new file mode 100644 index 0000000..c63b58f Binary files /dev/null and b/assets/diagramme_sql-CFrbOXnm.png differ diff --git a/assets/hello_desktop-XdizPvgx.png b/assets/hello_desktop-XdizPvgx.png new file mode 100644 index 0000000..1319f97 Binary files /dev/null and b/assets/hello_desktop-XdizPvgx.png differ diff --git a/assets/index.html-B_ORBeHs.js b/assets/index.html-B_ORBeHs.js new file mode 100644 index 0000000..1efa9aa --- /dev/null +++ b/assets/index.html-B_ORBeHs.js @@ -0,0 +1,113 @@ +import{_ as s,o as a,c as t,a as e,b as p}from"./app-DaulDPFL.js";const o={};function i(l,n){return a(),t("div",null,n[0]||(n[0]=[e(`

Preferences

Kstore is a tiny Kotlin multiplatform library that assists in saving and restoring objects to and from disk using kotlinx.coroutines, kotlinx.serialization and kotlinx.io. Inspired by RxStore

More settings options

if you want alternate library to store simple key-value data, you can use Multiplatform-Settings or DataStore multiplatform. Be carefull, not all target web platform

Add kstore dependency to your project for each target platform

build.gradle.kts (composeMain)
  commonMain.dependencies {
+            ...
+            implementation(libs.kstore)
+        }
+        androidMain.dependencies {
+            ...
+            implementation(libs.kstore.file)
+        }
+        desktopMain.dependencies {
+            ...
+            implementation(libs.kstore.file)
+        }
+        iosMain.dependencies {
+            implementation(libs.kstore.file)
+        }
+        wasmJsMain.dependencies {
+            implementation(libs.kstore.storage)
+        }
+    ...
+

Define the native call to get the kstore instance

platform.kt (commonMain)
    expect fun getKStore(): KStore<Quiz>?
+

Define each platform call to get the kstore instance for Android, iOS, Web, Desktop

platform.kt (androidMain)
    actual fun getKStore(): KStore<Quiz>? {
+        return storeOf(QuizApp.context().dataDir.path.plus("/quiz.json").toPath())
+    }
+

Also Android needs context to instanciate the kstore. Without injection library, you can use an App context singleton.

QuizApp.kt (androidMain)
class QuizApp : Application() {
+    init {
+        app = this
+    }
+
+    companion object {
+        private lateinit var app: QuizApp
+        fun context(): Context = app.applicationContext
+    }
+} 
+

Add the QuizApp to the AndroidManifest.xml

AndroidManifest.xml (androidMain)
...
+    <application
+        android:name=".QuizApp"
+...
+
platform.kt (iosMain)
    @OptIn(ExperimentalKStoreApi::class)
+    actual fun getKStore(): KStore<Quiz>? {
+        return NSFileManager.defaultManager.DocumentDirectory?.relativePath?.plus("/quiz.json")?.toPath()?.let {
+            storeOf(
+            file= it
+        )
+        }
+    }
+
platform.kt (wasmJsMain)
    actual fun getKStore(): KStore<Quiz>? {
+        return storeOf(key = "kstore_quiz")
+     }
+
+
platform.kt (desktopMain)
    actual fun getKStore(): KStore<Quiz>? {
+        return storeOf("quiz.json".toPath())
+    }
+
+

Upgrade the Quiz object with an update timestamp

Quiz.kt (commonMain)
@Serializable
+data class Quiz(var questions: List<Question>,  val updateTime:Long=0L)
+

Create a QuizKStoreDataSource class to store the kstore data

QuizKStoreDataSource.kts (commonMain)
class QuizKStoreDataSource {
+   private val kStoreQuiz: KStore<Quiz>? = getKStore()
+   suspend fun getUpdateTimeStamp(): Long = kStoreQuiz?.get()?.updateTime ?: 0L
+
+   suspend fun setUpdateTimeStamp(timeStamp: Long) {
+       kStoreQuiz?.update { quiz: Quiz? ->
+           quiz?.copy(updateTime = timeStamp)
+       }
+   }
+
+   suspend fun getAllQuestions(): List<Question> {
+       return kStoreQuiz?.get()?.questions ?: emptyList()
+   }
+
+   suspend fun insertQuestions(newQuestions: List<Question>) {
+       kStoreQuiz?.update { quiz: Quiz? ->
+           quiz?.copy(questions = newQuestions)
+       }
+   }
+
+   suspend fun resetQuizKstore() {
+       kStoreQuiz?.delete()
+       kStoreQuiz?.set(Quiz(emptyList(), 0L))
+   }
+}
+

Update the QuizRepository class to use the kstore

QuizRepository.kts (commonMain)
class QuizRepository {
+    private val mockDataSource = MockDataSource()
+    private val quizApiDatasource = QuizApiDatasource()
+    private var quizKStoreDataSource = QuizKStoreDataSource()
+
+    private suspend fun fetchQuiz(): List<Question> = quizApiDatasource.getAllQuestions().questions
+
+    private suspend fun fetchAndStoreQuiz(): List<Question> {
+        quizKStoreDataSource.resetQuizKstore()
+        val questions = fetchQuiz()
+        quizKStoreDataSource.insertQuestions(questions)
+        quizKStoreDataSource.setUpdateTimeStamp(Clock.System.now().epochSeconds)
+        return questions
+    }
+
+    suspend fun updateQuiz(): List<Question> {
+        try {
+            val lastRequest = quizKStoreDataSource.getUpdateTimeStamp()
+            return if (lastRequest == 0L || lastRequest - Clock.System.now().epochSeconds > 300000) {
+                fetchAndStoreQuiz()
+            } else {
+                quizKStoreDataSource.getAllQuestions()
+            }
+        } catch (e: NullPointerException) {
+            return fetchAndStoreQuiz()
+        } catch (e: Exception) {
+            e.printStackTrace()
+            return mockDataSource.generateDummyQuestionsList()
+        }
+    }
+
+}
+

Sources

The full sources can be retrieved here

🎬 Summary video of the course

`,24),p("iframe",{width:"560",height:"315",src:"https://youtube.com/embed/r-wUqYZgbOo",title:"KMP Quiz App overview",frameborder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:""},null,-1)]))}const u=s(o,[["render",i],["__file","index.html.vue"]]),r=JSON.parse('{"path":"/preferences/","title":"Preferences","lang":"en-US","frontmatter":{"description":"Preferences Kstore is a tiny Kotlin multiplatform library that assists in saving and restoring objects to and from disk using kotlinx.coroutines, kotlinx.serialization and kotli...","head":[["meta",{"property":"og:url","content":"https://worldline.github.io/learning-kotlin-multiplatform/learning-kotlin-multiplatform/preferences/"}],["meta",{"property":"og:title","content":"Preferences"}],["meta",{"property":"og:description","content":"Preferences Kstore is a tiny Kotlin multiplatform library that assists in saving and restoring objects to and from disk using kotlinx.coroutines, kotlinx.serialization and kotli..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2024-10-04T21:20:21.000Z"}],["meta",{"property":"article:modified_time","content":"2024-10-04T21:20:21.000Z"}],["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Preferences\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2024-10-04T21:20:21.000Z\\",\\"author\\":[]}"]]},"headers":[{"level":2,"title":"🎬 Summary video of the course","slug":"🎬-summary-video-of-the-course","link":"#🎬-summary-video-of-the-course","children":[]}],"git":{"updatedTime":1728076821000,"contributors":[{"name":"Ibrahim Gharbi","email":"brah.gharbi@gmail.com","commits":15,"url":"https://github.com/Ibrahim Gharbi"}]},"filePathRelative":"preferences/README.md","autoDesc":true}');export{u as comp,r as data}; diff --git a/assets/index.html-Bl1WRIzJ.js b/assets/index.html-Bl1WRIzJ.js new file mode 100644 index 0000000..f8a4b4d --- /dev/null +++ b/assets/index.html-Bl1WRIzJ.js @@ -0,0 +1 @@ +import{_ as t,c as o,a as r,o as a}from"./app-DaulDPFL.js";const i="/learning-kotlin-multiplatform/assets/logo_worldline-t5KadDQv.png",n="/learning-kotlin-multiplatform/assets/avatar-Bf9zzubu.png",l={};function s(h,e){return a(),o("div",null,e[0]||(e[0]=[r('

KMP | Tech at Worldline

👍 You like the course ? Give us a star on Github ⭐

Who we are

avatar

We design payments technology that powers the growth of millions​ of businesses around the world. Engineering the next frontiers​ in payments technology​

  • Leader in payment and secured transactions. ​
  • Over 50bn transactions/year​
  • 7000+ engineers​ in over 40 countries​
  • A huge & diverse​ tech-stack

Follow trainers of this Hands-on Lab

avatar
Gharbi Ibrahim
🔗 @__brah​
🔗 cv.gharbi.org

Follow our Tech team

',10)]))}const p=t(l,[["render",s],["__file","index.html.vue"]]),d=JSON.parse('{"path":"/","title":"KMP | Tech at Worldline","lang":"en-US","frontmatter":{"home":true,"heroImage":"./logo.png","heroText":"Hands-on Lab | KMP with compose","tagline":"Discover Kotlin multiplatform features in practice (Android, iOS, desktop & web).","actions":[{"text":"Start →","link":"/overview/","type":"primary"}],"features":[{"title":"1. Configure KMP","details":"Shared library principles for Android,iOS and Desktop jvm"},{"title":"2. Composables","details":"Kotlin compose & declarative UI, state management"},{"title":"3. Navigation","details":"Compose navigation, navigation hist"},{"title":"4. Ressources","details":"Compose image, string , fonts, raw resources"},{"title":"5. Architecture","details":"ViewModel, repository, coroutines"},{"title":"6. Network connectivity","details":"Ktor client/server configuration, repository creation with flow"},{"title":"7. Preferences","details":"Shared preferences, file storage"},{"title":"8. Database","details":"SQLite with SQLDelight"}],"footer":"Worldline © 2023 | tech at Worldline","description":"KMP | Tech at Worldline 👍 You like the course ? Give us a star on Github ⭐ Who we are avatar We design payments technology that powers the growth of millions​ of businesses aro...","head":[["meta",{"property":"og:url","content":"https://worldline.github.io/learning-kotlin-multiplatform/learning-kotlin-multiplatform/"}],["meta",{"property":"og:title","content":"KMP | Tech at Worldline"}],["meta",{"property":"og:description","content":"KMP | Tech at Worldline 👍 You like the course ? Give us a star on Github ⭐ Who we are avatar We design payments technology that powers the growth of millions​ of businesses aro..."}],["meta",{"property":"og:type","content":"website"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2024-10-04T21:38:00.000Z"}],["meta",{"property":"article:modified_time","content":"2024-10-04T21:38:00.000Z"}],["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"WebPage\\",\\"name\\":\\"KMP | Tech at Worldline\\",\\"description\\":\\"KMP | Tech at Worldline 👍 You like the course ? Give us a star on Github ⭐ Who we are avatar We design payments technology that powers the growth of millions​ of businesses aro...\\"}"]]},"headers":[{"level":2,"title":"Who we are","slug":"who-we-are","link":"#who-we-are","children":[{"level":3,"title":"Follow trainers of this Hands-on Lab","slug":"follow-trainers-of-this-hands-on-lab","link":"#follow-trainers-of-this-hands-on-lab","children":[]},{"level":3,"title":"Follow our Tech team","slug":"follow-our-tech-team","link":"#follow-our-tech-team","children":[]}]}],"git":{"updatedTime":1728077880000,"contributors":[{"name":"Ibrahim Gharbi","email":"brah.gharbi@gmail.com","commits":13,"url":"https://github.com/Ibrahim Gharbi"}]},"filePathRelative":"index.md","autoDesc":true}');export{p as comp,d as data}; diff --git a/assets/index.html-C2rGOrLv.js b/assets/index.html-C2rGOrLv.js new file mode 100644 index 0000000..644a2d3 --- /dev/null +++ b/assets/index.html-C2rGOrLv.js @@ -0,0 +1,34 @@ +import{_ as s,o as a,c as e,a as t}from"./app-DaulDPFL.js";const i={};function o(p,n){return a(),e("div",null,n[0]||(n[0]=[t(`

Ressources

  • For common code, store your resource files in the resources directory of the commonMain source set.
  • For platform-specific code, store your resource files in the resources directory of the corresponding source set.

Jetbrain release his experimental API painterResource from org.jetbrains.compose.resource package

@ExperimentalResourceApi
+@Composable
+public fun painterResource(
+    res: String
+): Painter
+
  • Return a Painter from the given resource path. Can load either a BitmapPainter for rasterized images (.png, .jpg) or a VectorPainter for XML Vector Drawables (.xml).
  • XML Vector Drawables have the same format as for Android (https://developer.android.com/reference/android/graphics/drawable/VectorDrawable) except that external references to Android resources are not supported.
  • Note that XML Vector Drawables are not supported for Web target currently.

Images

Android

To make your resources accessible from the resource library, use the following configuration in your build.gradle.kts file:

android {
+    // …
+    sourceSets["main"].resources.srcDirs("src/commonMain/resources")
+}
+

iOS,

The Compose Multiplatform Gradle plugin handles resource deployment. The plugin stores resource files in the compose-resources directory of the resulting application bundle.

val commonMain by getting {
+    dependencies {
+        // Your dependencies
+        @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
+        implementation(compose.components.resources)
+    }
+}
+

Nothing to do for desktop App

Usage

Image(
+    painterResource("compose-multiplatform.xml"),
+    null // description
+)
+

Fonts and String

For more ressource management possibilities for font and String management, you can use a third party lib :

Other ressources

@OptIn(ExperimentalResourceApi::class)
+@Composable
+fun App() {
+    var text: String? by remember { mutableStateOf(null) }
+
+    LaunchedEffect(Unit) {
+        text = String(resource("welcome.txt").readBytes())
+    }
+
+    text?.let {
+        Text(it)
+    }
+}
+

✅ If everything is fine, congrats, you've just finish this codelab. You can now experiment your kotlin skills eveywhere !

📖 Further reading

`,22)]))}const l=s(i,[["render",o],["__file","index.html.vue"]]),c=JSON.parse('{"path":"/res/","title":"Ressources","lang":"en-US","frontmatter":{"description":"Ressources For common code, store your resource files in the resources directory of the commonMain source set. For platform-specific code, store your resource files in the resou...","head":[["meta",{"property":"og:url","content":"https://worldline.github.io/learning-kotlin-multiplatform/learning-kotlin-multiplatform/res/"}],["meta",{"property":"og:title","content":"Ressources"}],["meta",{"property":"og:description","content":"Ressources For common code, store your resource files in the resources directory of the commonMain source set. For platform-specific code, store your resource files in the resou..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2024-10-04T10:17:15.000Z"}],["meta",{"property":"article:modified_time","content":"2024-10-04T10:17:15.000Z"}],["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Ressources\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2024-10-04T10:17:15.000Z\\",\\"author\\":[]}"]]},"headers":[{"level":2,"title":"Images","slug":"images","link":"#images","children":[]},{"level":2,"title":"Fonts and String","slug":"fonts-and-string","link":"#fonts-and-string","children":[]},{"level":2,"title":"Other ressources","slug":"other-ressources","link":"#other-ressources","children":[]},{"level":2,"title":"📖 Further reading","slug":"📖-further-reading","link":"#📖-further-reading","children":[]}],"git":{"updatedTime":1728037035000,"contributors":[{"name":"Ibrahim Gharbi","email":"brah.gharbi@gmail.com","commits":1,"url":"https://github.com/Ibrahim Gharbi"}]},"filePathRelative":"res/README.md","autoDesc":true}');export{l as comp,c as data}; diff --git a/assets/index.html-CIZ6Tn1I.js b/assets/index.html-CIZ6Tn1I.js new file mode 100644 index 0000000..64687d9 --- /dev/null +++ b/assets/index.html-CIZ6Tn1I.js @@ -0,0 +1,131 @@ +import{_ as s,o as a,c as e,a as t}from"./app-DaulDPFL.js";const p="/learning-kotlin-multiplatform/assets/routes-BuqzzffU.png",o={};function i(l,n){return a(),e("div",null,n[0]||(n[0]=[t(`

Navigation

🧪 Create Navigation between composable screens

Compose multiplatform navigation library enable a navigation with navigation host

Add Navigation dependency to your project

gradle.build.kts (module : composeApp)
...
+ commonMain.dependencies {
+
+            plugins {
+            ...
+                alias(libs.plugins.kotlinSerialization)
+            }
+            commonMain.dependencies {
+            ...
+            implementation(libs.kotlin.navigation)
+            implementation(libs.ktor.serialization.kotlinx.json)
+
+...
+

Create your navigation host

The navigation host is the configuration class that defines routes of your application.

Routes are path between all the composable screens that you will call later on your app.

routes overview

For this Hands-on Lab we need 3 routes for :

  • At startup to the WelcomeScreen
  • from Welcome screen to the QuizScreen
  • from the final question QuizScreento the ScoreScreen
App.kt (SourceSet: commonMain)

+...
+import kotlinx.serialization.Serializable
+
+val questions = listOf(
+    Question(
+        1,
+        "Android is a great platform ?",
+        1,
+        listOf(Answer(1, "YES"), Answer(2, "NO"))
+    ),
+    Question(
+        1,
+        "Android is a bad platform ?",
+        2,
+        listOf(Answer(1, "YES"), Answer(2, "NO"))
+    )
+)
+
+@Serializable
+object WelcomeRoute
+
+@Serializable
+object QuizRoute
+
+@Serializable
+data class ScoreRoute(val score: Int, val questionSize: Int)
+
+@Composable
+fun App(
+    navController: NavHostController = rememberNavController()
+) {
+
+    MaterialTheme {
+        NavHost(
+            navController = navController,
+            startDestination = WelcomeRoute,
+        ) {
+            composable<WelcomeRoute> {
+                welcomeScreen(
+                    onStartButtonPushed = {
+                        navController.navigate(route = QuizRoute)
+                    }
+                )
+            }
+             composable<QuizRoute> {
+                    questionScreen(
+                        questions = questions,
+                        /* FOR SPEAKER TALK DEMO ON WEB APP */
+                        onFinishButtonPushed = {
+                            score: Int, questionSize: Int -> navController.navigate(route = ScoreRoute(score, questionSize))
+                        }
+                    )
+            }
+            composable<ScoreRoute> { backStackEntry ->
+                val scoreRoute: ScoreRoute = backStackEntry.toRoute<ScoreRoute>()
+                scoreScreen(
+                    score = scoreRoute.score,
+                    total = scoreRoute.questionSize,
+                    onResetButtonPushed = {
+                        navController.navigate(route = QuizRoute)
+                    }
+                )
+            }
+        }
+    }
+}
+

Warning

As you can see all composables now take as parameter a navigator. It will be needed to navigate with routes between screens.

for example, the WelcomeScreen composable is now declared as follows :

@Composable()
+fun welcomeScreen(navigator: Navigator){
+    ...
+
+

Use the navigation host

Use the callback

Use onStartButtonPushed declared on screen instantiation in the NavHost on welcome screen buttons click

WelcomeScreen.kt (SourceSet: commonMain)
fun welcomeScreen(onStartButtonPushed: () -> Unit) {
+...
+
+    Button(
+        modifier = Modifier.padding(all = 10.dp),
+        onClick = { onStartButtonPushed() }
+    ) {
+...
+

The same can be done for other screens

QuestionScreen.kt (commonMain)

fun questionScreen(questions: List<Question>, onFinishButtonPushed: (Int,Int) -> Unit) {
+..
+Button(
+                modifier = Modifier.padding(bottom = 20.dp),
+                onClick = {
+                    /* FOR SPEAKER TALK DEMO ON WEB APP */
+                    if (getPlatform().name == "WASM") {
+                        onSaveStatQuestion(
+                            questions[questionProgress].id,
+                            questions[questionProgress].label,
+                            selectedAnswer,
+                            questions[questionProgress].correctAnswerId,
+                            questions[questionProgress].answers[selectedAnswer.toInt() - 1].label
+                        )
+                    }
+
+                    if (selectedAnswer == questions[questionProgress].correctAnswerId) {
+                        score++
+                    }
+                    if (questionProgress < questions.size - 1) {
+                        questionProgress++
+                        selectedAnswer = 1
+                    } else {
+                        onFinishButtonPushed(score, questions.size)
+                    }
+                }
+}
+...
+
ScoreScreen.kt (SourceSet : commonMain)

+fun scoreScreen(score: Int,total:Int,onResetButtonPushed: () -> Unit){
+...
+ Button(
+     modifier = Modifier.padding(all = 20.dp),
+    onClick = {
+        onResetButtonPushed()
+     }
+ ) 
+...
+

🎯 Solutions

Sources

The full solution for this section is availabe here

✅ If everything is fine, congrats, you've just finish this codelab. You can now experiment your kotlin skills eveywhere !

📖 Further reading

`,23)]))}const u=s(o,[["render",i],["__file","index.html.vue"]]),r=JSON.parse('{"path":"/nav/","title":"Navigation","lang":"en-US","frontmatter":{"description":"Navigation 🧪 Create Navigation between composable screens Compose multiplatform navigation library enable a navigation with navigation host Add Navigation dependency to your pr...","head":[["meta",{"property":"og:url","content":"https://worldline.github.io/learning-kotlin-multiplatform/learning-kotlin-multiplatform/nav/"}],["meta",{"property":"og:title","content":"Navigation"}],["meta",{"property":"og:description","content":"Navigation 🧪 Create Navigation between composable screens Compose multiplatform navigation library enable a navigation with navigation host Add Navigation dependency to your pr..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2024-11-15T10:53:15.000Z"}],["meta",{"property":"article:modified_time","content":"2024-11-15T10:53:15.000Z"}],["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Navigation\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2024-11-15T10:53:15.000Z\\",\\"author\\":[]}"]]},"headers":[{"level":2,"title":"🧪 Create Navigation between composable screens","slug":"🧪-create-navigation-between-composable-screens","link":"#🧪-create-navigation-between-composable-screens","children":[]},{"level":2,"title":"🎯 Solutions","slug":"🎯-solutions","link":"#🎯-solutions","children":[]},{"level":2,"title":"📖 Further reading","slug":"📖-further-reading","link":"#📖-further-reading","children":[]}],"git":{"updatedTime":1731667995000,"contributors":[{"name":"Brah","email":"brah.gharbi@gmail.com","commits":1,"url":"https://github.com/Brah"},{"name":"Ibrahim Gharbi","email":"brah.gharbi@gmail.com","commits":14,"url":"https://github.com/Ibrahim Gharbi"},{"name":"A187839","email":"ibrahim.gharbi@worldline.com","commits":10,"url":"https://github.com/A187839"}]},"filePathRelative":"nav/README.md","autoDesc":true}');export{u as comp,r as data}; diff --git a/assets/index.html-CJwk2asI.js b/assets/index.html-CJwk2asI.js new file mode 100644 index 0000000..c77734a --- /dev/null +++ b/assets/index.html-CJwk2asI.js @@ -0,0 +1,215 @@ +import{_ as s,o as a,c as e,a as p}from"./app-DaulDPFL.js";const t="/learning-kotlin-multiplatform/assets/diagramme_sql-CFrbOXnm.png",i={};function l(o,n){return a(),e("div",null,n[0]||(n[0]=[p(`

(Local Database)

Deprecated section

SQL delight is for now no more compatible with the new default WASM template for WebApp application.

If you still want to use it you can revert to the old Js(IR) template.

Notice that for now this is the only Web target compatible database library for KMP

SQLDelight generates typesafe Kotlin APIs from your SQL statements. It verifies your schema, statements, and migrations at compile-time and provides IDE features like autocomplete and refactoring which make writing and maintaining SQL simple.

SQLDelight understands your existing SQL schema.

CREATE TABLE hockey_player (
+  id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+  name TEXT NOT NULL,
+  number INTEGER NOT NULL
+);
+

It generates typesafe code for any labeled SQL statements.

Warning

Be carefull with SQL Delight , the project and his dependancies just move from com.squareup.sqldelight.* to app.cash.sqldelight.*

Pay attention also with beta, alpha version of Android studio that could produce bugs on gradle task management for code generation of SQL Delight databases.

🧪 Add sqldelight db to your quizz

Refer to the multiplatform implementation of SQLDelight in official Github pages 👉 https://cashapp.github.io/sqldelight/2.0.0/multiplatform_sqlite/

Add the correct dependancies to the project

plugins {
+...
+    id("app.cash.sqldelight") version "2.0.0"
+}
+...
+ sourceSets {
+        val commonMain by getting {
+            dependencies {
+              ...
+                implementation("app.cash.sqldelight:runtime:2.0.0")
+                implementation("app.cash.sqldelight:coroutines-extensions:2.0.0")
+                implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.4.1")
+
+            }
+        }
+        val androidMain by getting {
+            dependencies {
+               ...
+                implementation("app.cash.sqldelight:android-driver:2.0.0")
+
+            }
+        }
+    ...
+        val iosMain by creating {
+         ...
+            dependencies {
+                ...
+                implementation("app.cash.sqldelight:native-driver:2.0.0")
+            }
+        }
+        val desktopMain by getting {
+            dependencies {
+               ...
+                implementation("app.cash.sqldelight:sqlite-driver:2.0.0")
+            }
+        }
+        ...
+

Create the native SQL driver factory and use it for creating the DB with actual/expect kotlin keywords

Read carefully the modelisation UML below

diagram SQL

Create you SQLDelight model 'QuizDatabase.sq'

Create your Database datasource by generating insert and update suspending functions

Update your repository by instanciating your database

Your repository handle the following cases :

  • If there is no network and it's the first time launch of the app : handle and error
  • if there is no network and you have db datas : return on the flow the db data
  • if there is network and db data are younger than 5 min : return on the flow the db data
  • if there is network and db data are older than 5 min : retourn on the flow the network data and reset db data

🎯 Solutions

QuizDatabase.sq (ressources of commonMain)*
CREATE TABLE update_time (
+     timestamprequest INTEGER
+);
+
+INSERT INTO update_time(timestamprequest) VALUES (0);
+
+CREATE TABLE questions (
+    id INTEGER PRIMARY KEY,
+    label TEXT NOT NULL,
+    correctAnswerId INTEGER  NOT NULL
+ );
+
+
+ CREATE TABLE answers (
+    id INTEGER NOT NULL,
+    label TEXT NOT NULL,
+    question_id INTEGER NOT NULL,
+    PRIMARY KEY (id, question_id),
+    FOREIGN KEY (question_id)
+      REFERENCES questions (id)
+          ON UPDATE CASCADE
+          ON DELETE CASCADE
+ );
+
+
+
+ selectUpdateTimestamp:
+ SELECT *
+ FROM update_time;
+
+ insertTimeStamp:
+ INSERT INTO update_time(timestamprequest)
+ VALUES (:timestamp);
+
+ deleteTimeStamp:
+ DELETE FROM update_time;
+
+ deleteQuestions:
+ DELETE FROM questions;
+
+ deleteAnswers:
+ DELETE FROM answers;
+
+
+ selectAllQuestionsWithAnswers:
+ SELECT *
+ FROM questions
+ INNER JOIN answers ON questions.id = answers.question_id;
+
+ insertQuestion:
+ INSERT INTO questions(id, label,correctAnswerId)
+ VALUES (?, ?, ?);
+
+ insertAnswer:
+ INSERT INTO answers(id, label,question_id)
+ VALUES (?, ?, ?);
+
+
network/QuizDB.kt (commonMain)
package network
+
+
+import app.cash.sqldelight.async.coroutines.awaitAsList
+import app.cash.sqldelight.async.coroutines.awaitAsOneOrNull
+import app.cash.sqldelight.db.SqlDriver
+import com.myapplication.common.cache.Database
+import kotlinx.coroutines.CoroutineScope
+import network.data.Answer
+import network.data.Question
+
+class QuizDbDataSource(private val sqlDriver: SqlDriver, private val coroutineScope: CoroutineScope) {
+
+    private  var database=Database(sqlDriver)
+    private  var quizQueries=database.quizDatabaseQueries
+
+
+    suspend fun getUpdateTimeStamp():Long = quizQueries.selectUpdateTimestamp().awaitAsOneOrNull()?.timestamprequest ?: 0L
+
+
+    suspend fun setUpdateTimeStamp(timeStamp:Long)  {
+        quizQueries.deleteTimeStamp()
+        quizQueries.insertTimeStamp(timeStamp)
+    }
+
+     suspend fun getAllQuestions(): List<Question> {
+         return quizQueries.selectAllQuestionsWithAnswers().awaitAsList()
+
+             .groupBy {it.question_id }
+             .map { (questionId, rowList) ->
+
+             Question(
+                 id = questionId,
+                 label = rowList.first().label,
+                 correctAnswerId = rowList.first().correctAnswerId,
+                 answers = rowList.map { answer ->
+                     Answer(
+                         id = answer.id_,
+                         label = answer.label_
+                     )
+                 }
+             )
+         }
+     }
+
+
+
+    suspend fun insertQuestions(questions:List<Question>) {
+        quizQueries.deleteQuestions();
+        quizQueries.deleteAnswers()
+        questions.forEach {question ->
+            quizQueries.insertQuestion(question.id, question.label, question.correctAnswerId)
+            question.answers.forEach {answer ->
+                quizQueries.insertAnswer(answer.id,answer.label,question.id)
+            }
+        }
+    }
+}
+
QuizRepository.kt
package network
+
+import app.cash.sqldelight.db.SqlDriver
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import kotlinx.datetime.Clock
+import network.data.Question
+
+
+class QuizRepository(sqlDriver: SqlDriver)  {
+
+    private val mockDataSource = MockDataSource()
+    private val quizAPI = QuizApiDatasource()
+    private val coroutineScope = CoroutineScope(Dispatchers.Main)
+    private var quizDB = QuizDbDataSource(sqlDriver,coroutineScope)
+
+    private var _questionState=  MutableStateFlow(listOf<Question>())
+    var questionState = _questionState
+
+    init {
+        updateQuiz()
+    }
+
+    private suspend fun fetchQuiz(): List<Question> = quizAPI.getAllQuestions().questions
+
+    private suspend fun fetchAndStoreQuiz(): List<Question>{
+        val questions  = fetchQuiz()
+        quizDB.insertQuestions(questions)
+        quizDB.setUpdateTimeStamp(Clock.System.now().epochSeconds)
+        return questions
+    }
+    private fun updateQuiz(){
+
+
+        coroutineScope.launch {
+            _questionState.update {
+                try {
+                    val lastRequest = quizDB.getUpdateTimeStamp()
+                    if(lastRequest == 0L || lastRequest - Clock.System.now().epochSeconds > 300000){
+                        fetchAndStoreQuiz()
+                    }else{
+                        quizDB.getAllQuestions()
+                    }
+                } catch (e: NullPointerException) {
+                    fetchAndStoreQuiz()
+                } catch (e: Exception) {
+                    e.printStackTrace()
+                    mockDataSource.generateDummyQuestionsList()
+                }
+
+            }
+        }
+    }
+}
+

More databases options

For not using SQLight ORM, you can use Realm kotlin or KStore

✅ If everything is fine, go to the next chapter →

📖 Further reading

`,27)]))}const u=s(i,[["render",l],["__file","index.html.vue"]]),r=JSON.parse('{"path":"/database/","title":"(Local Database)","lang":"en-US","frontmatter":{"description":"(Local Database) Deprecated section SQL delight is for now no more compatible with the new default WASM template for WebApp application. If you still want to use it you can reve...","head":[["meta",{"property":"og:url","content":"https://worldline.github.io/learning-kotlin-multiplatform/learning-kotlin-multiplatform/database/"}],["meta",{"property":"og:title","content":"(Local Database)"}],["meta",{"property":"og:description","content":"(Local Database) Deprecated section SQL delight is for now no more compatible with the new default WASM template for WebApp application. If you still want to use it you can reve..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2024-10-04T13:49:37.000Z"}],["meta",{"property":"article:modified_time","content":"2024-10-04T13:49:37.000Z"}],["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"(Local Database)\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2024-10-04T13:49:37.000Z\\",\\"author\\":[]}"]]},"headers":[{"level":2,"title":"🧪 Add sqldelight db to your quizz","slug":"🧪-add-sqldelight-db-to-your-quizz","link":"#🧪-add-sqldelight-db-to-your-quizz","children":[]},{"level":2,"title":"🎯 Solutions","slug":"🎯-solutions","link":"#🎯-solutions","children":[]},{"level":2,"title":"📖 Further reading","slug":"📖-further-reading","link":"#📖-further-reading","children":[]}],"git":{"updatedTime":1728049777000,"contributors":[{"name":"Ibrahim Gharbi","email":"brah.gharbi@gmail.com","commits":2,"url":"https://github.com/Ibrahim Gharbi"},{"name":"A187839","email":"ibrahim.gharbi@worldline.com","commits":5,"url":"https://github.com/A187839"}]},"filePathRelative":"database/README.md","autoDesc":true}');export{u as comp,r as data}; diff --git a/assets/index.html-CyMmZTR2.js b/assets/index.html-CyMmZTR2.js new file mode 100644 index 0000000..68e771d --- /dev/null +++ b/assets/index.html-CyMmZTR2.js @@ -0,0 +1,141 @@ +import{_ as a,o as e,c as t,b as n,a as p}from"./app-DaulDPFL.js";const i="/learning-kotlin-multiplatform/assets/data_layer-i0YTWCrI.png",l={};function o(c,s){return e(),t("div",null,s[0]||(s[0]=[n("h1",{id:"architecture",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#architecture"},[n("span",null,"Architecture")])],-1),n("p",null,"Let's connect our Quiz app to internet.",-1),n("h2",{id:"overview",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#overview"},[n("span",null,"Overview")])],-1),n("div",{class:"hint-container tip"},[n("p",{class:"hint-container-title"},"Architecture basics"),n("p",null,[n("strong",null,"Everything You NEED to Know About MVVM Architecture Patterns")]),n("iframe",{width:"560",height:"315",src:"https://www.youtube.com/embed/I5c7fBgvkNY",title:"Everything You NEED to Know About Client Architecture Patterns",frameborder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:""})],-1),p('

Data layer for KMP

Data layer in KMP is under building but largly inspired by Android Architecture pattern

data layer overview

Repository classes are responsible for the following tasks:

  • Exposing data to the rest of the app.
  • Centralizing changes to the data.
  • Resolving conflicts between multiple data sources.
  • Abstracting sources of data from the rest of the app.
  • Containing business logic.

Kotlin flow

"A flow is an asynchronous data stream that sequentially emits values and completes normally or with an exception."

There are multiple types of flow, for the Hands-on Lab, we will focus on StateFlow

A state flow is a hot flow because its active instance exists independently of the presence of collectors (our composables that consume the data)

Coroutine

"A coroutine is an instance of suspendable computation. It is conceptually similar to a thread, in the sense that it takes a block of code to run that works concurrently with the rest of the code. However, a coroutine is not bound to any particular thread. It may suspend its execution in one thread and resume in another one."

🧪 DataSource and Repository

  • Create a mock datasource, that generate a list of question
  • Use it with a repository
  • Use the repository on the root of your application ( navHost in App.kt)

🎯 Solutions

Add coroutine dependancy to your project.

build.gradle.kts (commonMain)
commonMain.dependencies {
+           ...
+            implementation(libs.kotlinx.coroutines.core)
+        }
+
MockDataSource.kt
package com.worldline.quiz.data.datasources
+
+class MockDataSource {
+
+  fun generateDummyQuestionsList():List<Question>{
+        return listOf(
+            Question(
+                1,
+                "Android is a great platform ?",
+                1,
+                listOf(
+                    Answer( 1,"YES"),
+                    Answer(2,"NO")
+                )
+            ),
+            Question(
+                1,
+                "Android is a bad platform ?",
+                2,
+                listOf(
+                    Answer( 1,"YES"),
+                    Answer(2,"NO")
+                )
+            )
+        )
+    }
+
+}
+
QuizRepository.kt
package com.worldline.quiz.data
+
+class QuizRepository()  {
+
+    private val mockDataSource = MockDataSource()
+    private val coroutineScope = CoroutineScope(Dispatchers.Main)
+    private var _questionState=  MutableStateFlow(listOf<Question>())
+    var questionState = _questionState
+
+    init {
+        updateQuiz()
+    }
+
+    private fun updateQuiz(){
+        coroutineScope.launch {
+            _questionState.update {
+                    mockDataSource.generateDummyQuestionsList()
+            }
+        }
+    }
+}
+
App.kt
...
+@Composable
+fun App(
+    navController: NavHostController = rememberNavController(),
+    quizRepository: QuizRepository = QuizRepository()
+) {
+
+    MaterialTheme {
+        NavHost(
+            navController = navController,
+            startDestination = WelcomeRoute,
+        ) {
+
+
+            composable<WelcomeRoute>() {
+                welcomeScreen(
+                    onStartButtonPushed = {
+                        navController.navigate(route = QuizRoute)
+                    }
+                )
+            }
+            composable<QuizRoute>() {
+                val questions by quizRepository.questionState.collectAsState()
+                    questionScreen(
+                        questions = questions,
+                        /* FOR SPEAKER TALK DEMO ON WEB APP */
+                        onFinishButtonPushed = {
+                            score: Int, questionSize: Int -> navController.navigate(route = ScoreRoute(score, questionSize))
+                        }
+                    )
+            }
+            composable<ScoreRoute> { backStackEntry ->
+                val scoreRoute: ScoreRoute = backStackEntry.toRoute<ScoreRoute>()
+                scoreScreen(
+                    score = scoreRoute.score,
+                    total = scoreRoute.questionSize,
+                    onResetButtonPushed = {
+                        navController.navigate(route = QuizRoute)
+                    }
+                )
+            }
+        }
+    }
+}
+

Sources

The full solution for this section is availabe here

🧪 ViewModel

  • Create a ViewModel class
  • Upgrade the repository that is no more storing the flow and move it to the ViewModel
  • Upgrade the App to use the ViewModel instead of the Repository

Third party Architecture libraries

Domain layer framework such as ViewModels are just available on KMP. But you can also use a third party library such as Moko-MVVM or KMM-ViewModel or precompose

gradle.build.kts (module : composeApp)
...
+ commonMain.dependencies {
+            ...
+            implementation(libs.androidx.lifecycle.viewmodel.compose)
+...
+
QuizViewModel.kt
package com.worldline.quiz
+
+class QuizViewModel : ViewModel() {
+    private var quizRepository: QuizRepository = QuizRepository()
+    private var _questionState = MutableStateFlow(listOf<Question>())
+    var questionState: StateFlow<List<Question>> = _questionState
+
+    /* Can be replaced with explicit backing fields
+    val questionState : StateFlow<List<Question>>
+       field =  MutableStateFlow(listOf<Question>())
+    -> in build.gradle.kts : sourceSets.all { languageSettings.enableLanguageFeature("ExplicitBackingFields") }
+    */
+
+    init {
+        getQuestionQuiz()
+    }
+
+    private fun getQuestionQuiz() {
+        viewModelScope.launch(Dispatchers.Default) {
+            _questionState.update {
+                quizRepository.updateQuiz()
+            }
+        }
+    }
+}
+
QuizRepository.kt
class QuizRepository  {
+    private val mockDataSource = MockDataSource()
+    fun updateQuiz():List<Question>{
+            return mockDataSource.generateDummyQuestionsList()
+    }
+}
+
App.kt
fun App(
+    navController: NavHostController = rememberNavController(),
+    quizViewModel: QuizViewModel = QuizViewModel()
+) {
+...
+composable(route = QuizRoute) {
+                val questions by quizViewModel.questionState.collectAsState()
+

Sources

The full solution for this section is availabe here

✅ If everything is fine, go to the next chapter →

📖 Further reading

`,30)]))}const r=a(l,[["render",o],["__file","index.html.vue"]]),d=JSON.parse(`{"path":"/arch/","title":"Architecture","lang":"en-US","frontmatter":{"description":"Architecture Let's connect our Quiz app to internet. Overview Architecture basics Everything You NEED to Know About MVVM Architecture Patterns Data layer for KMP Data layer in K...","head":[["meta",{"property":"og:url","content":"https://worldline.github.io/learning-kotlin-multiplatform/learning-kotlin-multiplatform/arch/"}],["meta",{"property":"og:title","content":"Architecture"}],["meta",{"property":"og:description","content":"Architecture Let's connect our Quiz app to internet. Overview Architecture basics Everything You NEED to Know About MVVM Architecture Patterns Data layer for KMP Data layer in K..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2024-10-07T09:29:37.000Z"}],["meta",{"property":"article:modified_time","content":"2024-10-07T09:29:37.000Z"}],["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Architecture\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2024-10-07T09:29:37.000Z\\",\\"author\\":[]}"]]},"headers":[{"level":2,"title":"Overview","slug":"overview","link":"#overview","children":[{"level":3,"title":"Data layer for KMP","slug":"data-layer-for-kmp","link":"#data-layer-for-kmp","children":[]},{"level":3,"title":"Kotlin flow","slug":"kotlin-flow","link":"#kotlin-flow","children":[]},{"level":3,"title":"Coroutine","slug":"coroutine","link":"#coroutine","children":[]}]},{"level":2,"title":"🧪 DataSource and Repository","slug":"🧪-datasource-and-repository","link":"#🧪-datasource-and-repository","children":[{"level":3,"title":"🎯 Solutions","slug":"🎯-solutions","link":"#🎯-solutions","children":[]}]},{"level":2,"title":"🧪 ViewModel","slug":"🧪-viewmodel","link":"#🧪-viewmodel","children":[]},{"level":2,"title":"📖 Further reading","slug":"📖-further-reading","link":"#📖-further-reading","children":[]}],"git":{"updatedTime":1728293377000,"contributors":[{"name":"Ibrahim Gharbi","email":"brah.gharbi@gmail.com","commits":5,"url":"https://github.com/Ibrahim Gharbi"}]},"filePathRelative":"arch/README.md","autoDesc":true}`);export{r as comp,d as data}; diff --git a/assets/index.html-DBoeKgiV.js b/assets/index.html-DBoeKgiV.js new file mode 100644 index 0000000..842ba1b --- /dev/null +++ b/assets/index.html-DBoeKgiV.js @@ -0,0 +1,14 @@ +import{_ as n,o as a,c as s,a as t}from"./app-DaulDPFL.js";const r="/learning-kotlin-multiplatform/assets/apps-BKESpmvK.png",o="/learning-kotlin-multiplatform/assets/overview2-gDQlEEdM.png",i="/learning-kotlin-multiplatform/assets/screens-p5CGXVR7.png",l={};function p(c,e){return a(),s("div",null,e[0]||(e[0]=[t(`

🚀 Let's start

Prerequisites

  • Basic knowledge of kotlin development (nullability,inline & lambda functions mainly). For more information, please refer to the Worldline kotlin training
  • Fleet IDE is the dedicated IDE to consider for KMP developpement with exclusive features such as better preview management
  • A good connectivity

Advanced installation

For more information about your DEV environment and installs please have a look to jetbrain related docs

Consider also installing Jetbrain ToolBox for managing multiple versions ( Beta , Alpha , stable) of Android Studio or Fleet

What is Functional Programming?

Definition:

  • FP uses an approach to software development that uses pure functions to create maintainable software
  • It uses immutable functions and avoids shared states.
  • It is in contrast to object-oriented programming languages which uses mutable states
  • It focuses on results and not process, while the iterations like for loops are not allowed

Advantages: Problems are easy Keeps concurrency safe

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+
+// Step 1: Filter out even numbers
+let oddNumbers = numbers. filter { $0 % 2 != 0 }
+
+// Step 2: Square each of the remaining numbers
+let squaredNumbers = oddNumbers.map { $0 * $0 }
+
+// Step 3: Sum up all the squared numbers
+let sumOfSquares =squaredNumbers.reduce(0, +)
+
+print("The sum of squares of odd numbers is \\(sumOfSquares)")
+//output: The sum of squares of odd numbers is 165
+

Filter: filters array to include only odd numbers Map: squares the numbers Reduce: sums up the squared numbers

This example demonstrates the core principles of functional programming: using functions as first-class citizens to transform and compose data in a clear and concise way.

Apps using KMP

capture

KMP roadmap

See the roadmap 2024 on official Jetbrain blog

Hands-on Lab objectives

capture

Functionnally

We will create a simple quiz application that provides :

  • a Startup screen explaining rules of the game
  • a Quiz screen looping on single choices questions
  • a final scoring screen.

Technically

  • The app can be deployed on Android , iOS and jvm Desktop.
  • We will use not only a common library but composable views shared for all platforms

Design screens

Here are expected screens at the end of this Hands-on Lab.

screens

Generate composables based on designs

You can generate composables based on designs on Figma thanks to the plugin Google Relay. A dedicated section on android developer documentation describe all the steps here

See also

',29)]))}const m=n(l,[["render",p],["__file","index.html.vue"]]),d=JSON.parse(`{"path":"/overview/","title":"🚀 Let's start","lang":"en-US","frontmatter":{"description":"🚀 Let's start Prerequisites Basic knowledge of kotlin development (nullability,inline & lambda functions mainly). For more information, please refer to the Worldline kotlin tra...","head":[["meta",{"property":"og:url","content":"https://worldline.github.io/learning-kotlin-multiplatform/learning-kotlin-multiplatform/overview/"}],["meta",{"property":"og:title","content":"🚀 Let's start"}],["meta",{"property":"og:description","content":"🚀 Let's start Prerequisites Basic knowledge of kotlin development (nullability,inline & lambda functions mainly). For more information, please refer to the Worldline kotlin tra..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2024-11-15T10:53:15.000Z"}],["meta",{"property":"article:modified_time","content":"2024-11-15T10:53:15.000Z"}],["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"🚀 Let's start\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2024-11-15T10:53:15.000Z\\",\\"author\\":[]}"]]},"headers":[{"level":2,"title":"Prerequisites","slug":"prerequisites","link":"#prerequisites","children":[{"level":3,"title":"What is Functional Programming?","slug":"what-is-functional-programming","link":"#what-is-functional-programming","children":[]},{"level":3,"title":"Apps using KMP","slug":"apps-using-kmp","link":"#apps-using-kmp","children":[]},{"level":3,"title":"KMP roadmap","slug":"kmp-roadmap","link":"#kmp-roadmap","children":[]}]},{"level":2,"title":"Hands-on Lab objectives","slug":"hands-on-lab-objectives","link":"#hands-on-lab-objectives","children":[{"level":3,"title":"Functionnally","slug":"functionnally","link":"#functionnally","children":[]},{"level":3,"title":"Technically","slug":"technically","link":"#technically","children":[]},{"level":3,"title":"Design screens","slug":"design-screens","link":"#design-screens","children":[]}]}],"git":{"updatedTime":1731667995000,"contributors":[{"name":"Brah","email":"brah.gharbi@gmail.com","commits":1,"url":"https://github.com/Brah"},{"name":"Ibrahim Gharbi","email":"brah.gharbi@gmail.com","commits":16,"url":"https://github.com/Ibrahim Gharbi"},{"name":"A187839","email":"ibrahim.gharbi@worldline.com","commits":8,"url":"https://github.com/A187839"}]},"filePathRelative":"overview/README.md","autoDesc":true}`);export{m as comp,d as data}; diff --git a/assets/index.html-IZAD4WfO.js b/assets/index.html-IZAD4WfO.js new file mode 100644 index 0000000..764b3d3 --- /dev/null +++ b/assets/index.html-IZAD4WfO.js @@ -0,0 +1,198 @@ +import{_ as s,o as a,c as t,a as e}from"./app-DaulDPFL.js";const p="/learning-kotlin-multiplatform/assets/toolbox-DbC4d27p.png",o="/learning-kotlin-multiplatform/assets/plugins_install-BKgRePQf.png",i="/learning-kotlin-multiplatform/assets/kmp_sample_src-CoII6UwA.png",l="/learning-kotlin-multiplatform/assets/template-DXB9rnv0.png",c="/learning-kotlin-multiplatform/assets/project_struct-DMA9UCBx.png",r="/learning-kotlin-multiplatform/assets/run-BxGtZnDA.png",u="/learning-kotlin-multiplatform/assets/hello_desktop-XdizPvgx.png",k={};function d(m,n){return a(),t("div",null,n[0]||(n[0]=[e('

Configure KMP

Fleet IDE is the dedicated IDE to consider for KMP developpement with exclusive features such as better preview management

Simply download it thanks to Jetbrain ToolBox Apptoolbox

Use Android Studio

It is also possible to use Android Studio IDE with latest stable version koala version or above. You can do the following to prepare it to support KMP

For macOS devs only,kdoctor command line interface (CLI) is available. It will help you to ensure that your computer is correctly configured for KMP development.

brew install kdoctor
+kdoctor
+

🧪 Download the initial project

Initial project sources

For your hand-on lab today, you can download the initial project by downloading KMP official sample for Android, iOS and Desktop & Web here: kmp.jetbrains.com

  • Select : ☑️ Android ☑️ iOS ☑️ Desktop ☑️ Web
  • Download the zip project
  • Open it with Fleet

template

📚 A Guided tour of the sample project

Project Structure

The gradle plugin of Kotlin Multiplatform ( KMP ) organize the code thanks to 2 essential notion of Gradle/Java :

  • A Module is a set of classes and packages that form a complete whole with a build description file build.gradle. Modules have been introduced to improve safety and to make the platform more modular.
  • A Source sets give us a powerful way to structure source code in our Gradle projects. A SourceSet represents a logical group of Kotlin source and resource files.

project_structure.png

1 - composeApp module : The crossplatform library module

A shared library module linked to all project platforms. It contains the source code common to all your supported platforms.

2 - commonMain sourceSet : Shared & multiplatform Kotlin source files

This is the place where you will code all your cross platform composables.

On the sample, your first composable function App() is already configured with a single button that display an image with a standard animation on click.

App.kt
@Composable
+@Preview
+fun App() {
+    MaterialTheme {
+        var showContent by remember { mutableStateOf(false) }
+        Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
+            Button(onClick = { showContent = !showContent }) {
+                Text("Click me!")
+            }
+            AnimatedVisibility(showContent) {
+                val greeting = remember { Greeting().greet() }
+                Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
+                    Image(painterResource(Res.drawable.compose_multiplatform), null)
+                    Text("Compose: $greeting")
+                }
+            }
+        }
+    }
+}
+

3 - androidMain, desktopMain, iosMain, wasmJsMain sourceSets: KMP specific library modules

One submodule per platform, linked to the common module sources. It gives the possibility to make specific implementations of functions per platform

Platform specific source file

When you need a specific implementation for Android and iOS of getPlatform() to return the platform name, KMP uses :

  • expect keyword on the KMP shared library (commonMain) before functions indicating that we need a specific implementation of this function
  • actual keywords on the KMP shared library specific modules (iosMain, androidMain) before functions to indicate the implementation.

For exemple on this specific template, a getPlatformName fuction is referenced on the common code and implemented specificly on each sourceset with the right platform name

platform.kt (SourceSet : commonMain)
expect fun getPlatform(): Platform
+
Platform.desktop.kt (SourceSet : desktopMain)
actual fun getPlatformName(): String = "Desktop"
+
Platform.android.kt (SourceSet : androidMain)
actual fun getPlatformName(): String = "Android"
+
Platform.ios.kt(SourceSet : iosMain)
actual fun getPlatformName(): String = "iOS"
+

More Information

On each platform sourceSet (androidMain, desktopMain, iosMain, wasmJsMain) , you can call native SDK function wrapped in Kotlin.

Ex: on Platform.ios.kt a UIDevice function is called :

UIDevice.currentDevice.systemName()
+

More information about platform specific functions in KMP here)

Platform specific composables

On this template a wrapper is used to use the root multiplatform composable App() on each specific sourceSet Mainclass :

  • onCreate callback of an Activity for Android
  • A ViewController class for iOS
  • ... Then you can code and declare your composables on the App() composable to code multiplatform.

For Desktop (DesktopMain)

main.desktop.kt(SourceSet : desktopMain)
fun main() = application {
+    Window(
+        onCloseRequest = ::exitApplication,
+        title = "Quiz",
+    ) {
+        App()
+    }
+}
+

For Android (AndroidMain)

The Android app declaration with ressouces, manifest and activities A MainView android composable is created from the App() composable.

main.android.kt (SourceSet : androidMain)
@Composable fun MainView() = App()
+

Then the composable is declared on the activity.

MainActivity.kt (androidApp)
class MainActivity : ComponentActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+
+        setContent {
+            App()
+        }
+    }
+}
+

4. for iOS (IosMain)

For iOSApp project you can open the .xcodeproj with Xcode for completion, build specific configurations

It's the same principles, a swift MainViewController that is created from the composable App()

main.ios.kt(SourceSet : iosMain)
fun MainViewController() = ComposeUIViewController { App() }
+

Then on the .xcodeproj, ContentView.swift convert the MainViewController into a swiftUI view.

ContentView.swift (iosApp)
...
+struct ComposeView: UIViewControllerRepresentable {
+    func makeUIViewController(context: Context) -> UIViewController {
+        MainViewControllerKt.MainViewController()
+    }
+
+    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
+}
+
+struct ContentView: View {
+    var body: some View {
+        ComposeView()
+                .ignoresSafeArea(.keyboard) // Compose has own keyboard handler
+    }
+}
+...
+

With those configuration you can now develop your composable in the commonMain SourceSet and deploy your app for Android, iOS and Destop targets

🧪 Deploy your apps

To defines gradle configuration for deploying your development apps, you need to create a running configuration for fleet by creating a run.jsonfile in .fleetfolder.

.fleet/run.json
{
+    "configurations": [
+
+        {
+            "name": "composeApp",
+            "type": "gradle",
+            "workingDir": "$PROJECT_DIR$",
+            "tasks": [":server:classes"],
+            "initScripts": {
+                "flmapper": "ext.mapPath = { path -> path }",
+                "Build learning-kotlin-multiplatform-src": "System.setProperty('org.gradle.java.compile-classpath-packaging', 'true')"
+            }
+        },
+        {
+            "name": "server",
+            "type": "jps-run",
+            "workingDir": "$PROJECT_DIR$",
+            "dependsOn": ["composeApp"],
+            "mainClass": "com.worldline.quiz.ApplicationKt",
+            "module": "Quiz.server.main",
+            "options": ["-Dfile.encoding=UTF-8"]
+        },
+        {
+            "name": "iOS",
+            "type": "xcode-app",
+            "workingDir": "$PROJECT_DIR$",
+            "allowParallelRun": true,
+            "buildTarget": {
+                "project": "iosApp",
+                "target": "iosApp"
+            },
+            "configuration": "Debug"
+        },
+        {
+            "name": "wasmJs",
+            "type": "gradle",
+            "workingDir": "$PROJECT_DIR$",
+            "tasks": ["wasmJsBrowserDevelopmentRun"],
+            "args": ["-p", "$PROJECT_DIR$/composeApp"],
+            "initScripts": {
+                "flmapper": "ext.mapPath = { path -> path }"
+            }
+        },
+        {
+            "name": "android",
+            "type": "android-app",
+            "workingDir": "$PROJECT_DIR$",
+            "allowParallelRun": true,
+            "module": "quiz.composeApp.main"
+        },
+        {
+            "name": "Desktop",
+            "type": "gradle",
+            "workingDir": "$PROJECT_DIR$",
+            "tasks": ["desktopRun"],
+            "args": ["-DmainClass=com.worldline.quiz.MainKt", "--quiet", "-p", "$PROJECT_DIR$/composeApp"],
+            "initScripts": {
+                "flmapper": "ext.mapPath = { path -> path }"
+            }
+        }
+    ]
+}
+

Instead, if you want to use gradle tasks , here are some examples :

./gradlew desktopRun #Desktop
+./gradlew wasmJsBrowserDevelopmentRun #Web
+

CORS issue for Web target

For the Web App, you can bypass CORS issue if you don't have a remote server with Chrome as below:

<google chrome path> --disable-web-security --user-data-dir=/Users/xxxx/Desktop/googlechrometmp http://localhost:8080/
+

Running configuration

run

hello desktop

Version Catalog

A version catalog is a list of dependencies, represented as dependency coordinates, that a user can pick from when declaring dependencies in a build script.

gradle/libs.versions.toml

+[versions]
+# KMP AGP/GRADLE compatibility guide
+# https://wrl.li/guideagp
+kotlin = "2.0.20"
+agp = "8.5.0"
+compose-plugin = "1.7.0-rc01"
+
+androidx-activityCompose = "1.9.2"
+navigation = "2.8.0-alpha10"
+androidx-lifecycle = "2.8.0"
+kotlinxCoroutinesCore="1.9.0"
+
+kotlinx-coroutines = "1.8.1"
+kotlinxDatetime = "0.6.1"
+ktorVersion = "3.0.0-rc-1"
+kstore = "0.8.0"
+logback = "1.5.8"
+
+android-compileSdk = "34"
+android-minSdk = "24"
+android-targetSdk = "34"
+
+[libraries]
+androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activityCompose" }
+
+androidx-lifecycle-viewmodel = { group = "org.jetbrains.androidx.lifecycle", name = "lifecycle-viewmodel", version.ref = "androidx-lifecycle" }
+androidx-lifecycle-runtime-compose = { group = "org.jetbrains.androidx.lifecycle", name = "lifecycle-runtime-compose", version.ref = "androidx-lifecycle" }
+
+kotlinx-coroutines-swing = { group = "org.jetbrains.kotlinx", name = "kotlinx-coroutines-swing", version.ref = "kotlinx-coroutines" }
+kotlinx-coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "kotlinxCoroutinesCore" }
+
+
+
+kotlin-navigation = { module = "org.jetbrains.androidx.navigation:navigation-compose", version.ref = "navigation" }
+kotlinx-datetime = { module = "org.jetbrains.kotlinx:kotlinx-datetime", version.ref = "kotlinxDatetime" }
+
+ktor-serialization-kotlinx-json = { module = "io.ktor:ktor-serialization-kotlinx-json", version.ref = "ktorVersion" }
+ktor-client-core = { module = "io.ktor:ktor-client-core", version.ref = "ktorVersion" }
+ktor-client-content-negotiation = { module = "io.ktor:ktor-client-content-negotiation", version.ref = "ktorVersion" }
+ktor-client-okhttp = { module = "io.ktor:ktor-client-okhttp", version.ref = "ktorVersion" }
+ktor-client-apache = { module = "io.ktor:ktor-client-apache", version.ref = "ktorVersion" }
+ktor-client-darwin = { module = "io.ktor:ktor-client-darwin", version.ref = "ktorVersion" }
+
+
+#kstore
+kstore = { module = "io.github.xxfast:kstore", version.ref = "kstore" }
+kstore-file = { module = "io.github.xxfast:kstore-file", version.ref = "kstore" }
+kstore-storage = { module = "io.github.xxfast:kstore-storage", version.ref = "kstore" }
+
+# Web
+#ktor-client-js = { module = "io.ktor:ktor-client-js", version.ref = "ktorVersion" }
+
+# Server
+ktor-server-core = { module = "io.ktor:ktor-server-core-jvm", version.ref = "ktorVersion" }
+ktor-server-cio = { module = "io.ktor:ktor-server-cio", version.ref = "ktorVersion" }
+ktor-server-content-negotiation = { module = "io.ktor:ktor-server-content-negotiation", version.ref = "ktorVersion" }
+ktor-server-config-yaml = { module = "io.ktor:ktor-server-config-yaml", version.ref = "ktorVersion" }
+ktor-server-cors = { module = "io.ktor:ktor-server-cors", version.ref = "ktorVersion" }
+logback = { module = "ch.qos.logback:logback-classic", version.ref = "logback" }
+
+[plugins]
+androidApplication = { id = "com.android.application", version.ref = "agp" }
+androidLibrary = { id = "com.android.library", version.ref = "agp" }
+jetbrainsCompose = { id = "org.jetbrains.compose", version.ref = "compose-plugin" }
+compose-compiler = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
+kotlinMultiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }
+kotlinSerialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }
+kotlinJvm = { id = "org.jetbrains.kotlin.jvm", version.ref = "kotlin" }
+ktor = { id = "io.ktor.plugin", version.ref = "ktorVersion" }
+
+

Basic logging

A logger is provided by [Ktor client library] (https://ktor.io/docs/logging.html) for basic logs.

More advanced logging and debugging

Use can have more advanced logging and debugging thanks to third party libs such as NSExceptionKT or CrachKiOS or Kermit or Napier

✅ If everything is fine, go to the next chapter →

📖 Further reading

`,66)]))}const g=s(k,[["render",d],["__file","index.html.vue"]]),y=JSON.parse('{"path":"/configure/","title":"Configure KMP","lang":"en-US","frontmatter":{"description":"Configure KMP Fleet IDE is the dedicated IDE to consider for KMP developpement with exclusive features such as better preview management Simply download it thanks to Jetbrain To...","head":[["meta",{"property":"og:url","content":"https://worldline.github.io/learning-kotlin-multiplatform/learning-kotlin-multiplatform/configure/"}],["meta",{"property":"og:title","content":"Configure KMP"}],["meta",{"property":"og:description","content":"Configure KMP Fleet IDE is the dedicated IDE to consider for KMP developpement with exclusive features such as better preview management Simply download it thanks to Jetbrain To..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2024-10-04T13:49:37.000Z"}],["meta",{"property":"article:modified_time","content":"2024-10-04T13:49:37.000Z"}],["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Configure KMP\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2024-10-04T13:49:37.000Z\\",\\"author\\":[]}"]]},"headers":[{"level":2,"title":"🧪 Download the initial project","slug":"🧪-download-the-initial-project","link":"#🧪-download-the-initial-project","children":[]},{"level":2,"title":"📚 A Guided tour of the sample project","slug":"📚-a-guided-tour-of-the-sample-project","link":"#📚-a-guided-tour-of-the-sample-project","children":[]},{"level":2,"title":"🧪 Deploy your apps","slug":"🧪-deploy-your-apps","link":"#🧪-deploy-your-apps","children":[]},{"level":2,"title":"Version Catalog","slug":"version-catalog","link":"#version-catalog","children":[]},{"level":2,"title":"Basic logging","slug":"basic-logging","link":"#basic-logging","children":[]},{"level":2,"title":"📖 Further reading","slug":"📖-further-reading","link":"#📖-further-reading","children":[]}],"git":{"updatedTime":1728049777000,"contributors":[{"name":"Ibrahim Gharbi","email":"brah.gharbi@gmail.com","commits":18,"url":"https://github.com/Ibrahim Gharbi"},{"name":"A187839","email":"ibrahim.gharbi@worldline.com","commits":6,"url":"https://github.com/A187839"}]},"filePathRelative":"configure/README.md","autoDesc":true}');export{g as comp,y as data}; diff --git a/assets/index.html-dJGFTDYi.js b/assets/index.html-dJGFTDYi.js new file mode 100644 index 0000000..fd8b571 --- /dev/null +++ b/assets/index.html-dJGFTDYi.js @@ -0,0 +1,263 @@ +import{_ as s,o as a,c as p,a as e}from"./app-DaulDPFL.js";const t="/learning-kotlin-multiplatform/assets/welcomescreen-fw1_MuGU.png",o="/learning-kotlin-multiplatform/assets/scorescreen-CgD5TFZC.png",i="/learning-kotlin-multiplatform/assets/uml-CgIVGHo2.png",l="/learning-kotlin-multiplatform/assets/quizscreen-BAbAaB3e.png",c={};function u(r,n){return a(),p("div",null,n[0]||(n[0]=[e(`

User interface

📚 Reminder

Compose Multiplatform

Compose Multiplatform simplifies and accelerates UI development for Desktop and Web applications, and allows extensive UI code sharing between Android, iOS, Desktop and Web. It's a modern toolkit for building native UI. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs. It is based on Android Jetpack Compose declarative UI approach ( which is similar also to SwiftUI for iOS )

How to create composables ?

Composables are UI components that can be simply declared with code as functions, properties (such as text color, fonts...) as function parameters and subviews are declared on function declaration.

  • An @Composable annotation come always before the composable function.
  • Properties of size, behaviors of components can be set thanks to Modifiers. It permit to decorate and augent composables
  • You can align components with containers composables such as Column (Vertically), Box, Row (Horizontally)
  • Also you can preview composables with the annotation @Preview before the composable annotation.

Example: 2 texts vertically aligned that fit all the width of the screen.

@Composable
+fun App() {
+    MaterialTheme {
+        Column(Modifier.fillMaxWidth()) {
+            Text( "My Text1", color = Color.Blue)
+            Text(text = "My Text2")
+        }
+    }
+}
+

Find composables available

For more information, you can have a look to Android Jetpack Compose documentation

Create composable for the Quiz

🧪 WelcomeScreen

Welcome Screen preview

You can now create your first view. For the Quiz we need a welcome screen displaying a Card centered with a button inside to start the quiz It is simply compose of the following composables :

  • a Card rounded shape container

  • a Text

  • a Button

  • Create a new composable WelcomeScreen.kt on commonMain module

  • Make sure that the App() composable is using it has below

@Composable
+fun App() {
+    MaterialTheme {
+        welcomeScreen()
+    }
+}
+
  • Run you first view on all platforms , it should work.

🎯 Solutions

WelcomeScreen.kt (SourseSet : commonMain)
package com.worldline.quiz
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Button
+import androidx.compose.material.Card
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun welcomeScreen(){
+
+    Box(
+        contentAlignment = Alignment.Center,
+        modifier = Modifier.fillMaxWidth().fillMaxHeight()
+    ) {
+        Card(
+            shape = RoundedCornerShape(8.dp),
+            modifier = Modifier.padding(10.dp),
+        ) {
+            Column(horizontalAlignment = Alignment.CenterHorizontally) {
+
+
+                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                        Text(
+                            text = "Quiz",
+                            fontSize = 30.sp,
+                            modifier = Modifier.padding(all = 10.dp)
+                        )
+                        Text(
+                            modifier = Modifier.padding(all = 10.dp),
+                            text = "A simple Quiz to discovers KMP and compose.",
+                        )
+                        Button(
+                            modifier = Modifier.padding(all = 10.dp),
+                            onClick = {  }
+
+                        ) {
+                            Text("Start the Quiz")
+                        }
+                    }
+            }
+        }
+    }
+}
+

🧪 ScoreScreen

Score Screen preview

The second view will be quite similar but able de show final scores

  • Create a new composable ScoreScreen.kt on commonMain module
  • Make sure that the App() composable is using it has below
  • The composable will have a String value as parameter
@Composable
+fun App() {
+    MaterialTheme {
+        scoreScreen("10/20")
+    }
+}
+
  • Run you first view on all platforms , it should work.

🎯 Solutions

ScoreScreen.kt (SourseSet : commonMain)
package com.worldline.quiz
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Button
+import androidx.compose.material.Card
+import androidx.compose.material.Icon
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Refresh
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun scoreScreen(score: String){
+    Box(
+        contentAlignment = Alignment.Center,
+        modifier = Modifier.fillMaxWidth().fillMaxHeight()
+    ) {
+        Card(
+            shape = RoundedCornerShape(8.dp),
+            modifier = Modifier.padding(10.dp),
+            backgroundColor = Color.Green
+        ) {
+            Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                        Text(
+                            fontSize = 15.sp,
+                            text = "score",
+                        )
+                        Text(
+                            fontSize = 30.sp,
+                            text = score,
+                        )
+                        Button(
+                            modifier = Modifier.padding(all = 20.dp),
+                            onClick = {
+                            }
+                        ) {
+                            Icon(Icons.Filled.Refresh, contentDescription = "Localized description")
+                            Text(text = "Retake the Quiz")
+                        }
+                    }
+            }
+        }
+    }
+}
+

🧪 QuestionScreen

Data classes for Quiz modeling

class_diagram

We can create classes on the package network.data

Answer.kt (commonMain)
data class Answer(val id: Int, val label: String )
+
Question.kt (commonMain)
data class Question(val id:Int, val label:String, val correctAnswerId:Int, val answers:List<Answer>)
+
Quiz.kt (commonMain)
data class Quiz(var questions: List<Question>)
+

Make the composable

Now we can make a composable with interactions.

class_diagram

The screen is composed of :

  • The question label in a Card
  • Single choice answer component with RadioButton
  • A Button to submit the answer
  • A LinearProgressIndicator indicating the quiz progress

After creating the UI view, we can pass to this composable the list of questions. When the Appcomposable will create questionScreen() composable we will generate mock questions data for now to generate the list of questions.

State management

All views of question will be one unique composable that updates with the correct question/answers data each time we are clicking on the next button.

We use MutableState value for that. It permit to keep data value and recompose the view when the data is changed. It's exactly what we need for our quiz page :

  • Keep the value of the question position on the list
  • Keep the value of the answer selected by the user each time he switch between RadioButtons
  • Keep the score to get the final one at the end of the list.

Here is an example of MutableState value declaration

    var questionProgress by remember { mutableStateOf(0) }
+    ...
+

You can declare the 2 other MutableState values and after use it on your composable ensuring that on the button click questionProgressis incrementing so the question and his answers can change on the view.

🎯 Solutions

QuestionScreen.kt (SourceSet : commonMain)
package com.worldline.quiz
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.selection.selectableGroup
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Button
+import androidx.compose.material.Card
+import androidx.compose.material.Icon
+import androidx.compose.material.LinearProgressIndicator
+import androidx.compose.material.RadioButton
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowForward
+import androidx.compose.material.icons.filled.Done
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import network.data.Question
+
+@Composable
+fun questionScreen(questions: List<Question>) {
+
+    var questionProgress by remember { mutableStateOf(0) }
+    var selectedAnswer by remember { mutableStateOf(1) }
+    var score by remember { mutableStateOf(0) }
+
+    Column(
+        modifier = Modifier.fillMaxWidth().fillMaxHeight(),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Card(
+            shape = RoundedCornerShape(5.dp),
+            modifier = Modifier.padding(60.dp)
+        ) {
+            Column(
+                horizontalAlignment = Alignment.CenterHorizontally,
+                modifier = Modifier.padding(horizontal = 10.dp)
+            ) {
+                Text(
+                    modifier = Modifier.padding(all = 10.dp),
+                    text = questions[questionProgress].label,
+                    fontSize = 25.sp,
+                    textAlign = TextAlign.Center
+                )
+            }
+        }
+        Column(modifier = Modifier.selectableGroup()) {
+            questions[questionProgress].answers.forEach { answer ->
+                Row(
+                    modifier = Modifier.padding(horizontal = 16.dp),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    RadioButton(
+                        modifier = Modifier.padding(end = 16.dp),
+                        selected = (selectedAnswer == answer.id),
+                        onClick = { selectedAnswer = answer.id },
+                    )
+                    Text(text = answer.label)
+                }
+            }
+        }
+        Column(modifier = Modifier.fillMaxHeight(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Bottom) {
+            Button(
+                modifier = Modifier.padding(bottom = 20.dp),
+                onClick = {
+                    if(selectedAnswer == questions[questionProgress].correctAnswerId) {
+                        score++
+                    }
+                    if (questionProgress < questions.size - 1) {
+                        questionProgress++
+                        selectedAnswer = 1
+                    }else{
+                        // Go to the score section
+                    }
+                }
+            ) {
+                if(questionProgress < questions.size - 1) nextOrDoneButton(Icons.AutoMirrored.Filled.ArrowForward,"Next")
+                else nextOrDoneButton(Icons.Filled.Done,"Done")
+            }
+            LinearProgressIndicator(modifier = Modifier.fillMaxWidth().height(20.dp), progress = questionProgress.div(questions.size.toFloat()).plus(1.div(questions.size.toFloat())))
+        }
+    }
+}
+
+@Composable
+fun nextOrDoneButton(iv: ImageVector, label:String){
+    Icon(
+        iv,
+        contentDescription = "Localized description",
+        Modifier.padding(end = 15.dp)
+    )
+    Text(label)
+}
+
App.kt (SourceSet : commonMain)
@Composable
+fun App() {
+    MaterialTheme {
+        val questions = listOf(
+            Question(
+                1,
+                "Android is a great platform ?",
+                1,
+                listOf(Answer(1, "YES"), Answer(2, "NO"))
+            ),
+            Question(
+                1,
+                "Android is a bad platform ?",
+                2,
+                listOf(Answer(1, "YES"), Answer(2, "NO"))
+            )
+        )
+        questionScreen(questions)
+    }
+}
+

Your Quiz have now all his composable screens made. Let's connect it to the Internet

✅ If everything is fine, go to the next chapter →

Sources

The full solution for this section is availabe here

📖 Further reading

`,55)]))}const k=s(c,[["render",u],["__file","index.html.vue"]]),m=JSON.parse('{"path":"/ui/","title":"User interface","lang":"en-US","frontmatter":{"description":"User interface 📚 Reminder Compose Multiplatform Compose Multiplatform simplifies and accelerates UI development for Desktop and Web applications, and allows extensive UI code s...","head":[["meta",{"property":"og:url","content":"https://worldline.github.io/learning-kotlin-multiplatform/learning-kotlin-multiplatform/ui/"}],["meta",{"property":"og:title","content":"User interface"}],["meta",{"property":"og:description","content":"User interface 📚 Reminder Compose Multiplatform Compose Multiplatform simplifies and accelerates UI development for Desktop and Web applications, and allows extensive UI code s..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2024-10-04T13:49:37.000Z"}],["meta",{"property":"article:modified_time","content":"2024-10-04T13:49:37.000Z"}],["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"User interface\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2024-10-04T13:49:37.000Z\\",\\"author\\":[]}"]]},"headers":[{"level":2,"title":"📚 Reminder","slug":"📚-reminder","link":"#📚-reminder","children":[{"level":3,"title":"Compose Multiplatform","slug":"compose-multiplatform","link":"#compose-multiplatform","children":[]},{"level":3,"title":"How to create composables ?","slug":"how-to-create-composables","link":"#how-to-create-composables","children":[]}]},{"level":2,"title":"Create composable for the Quiz","slug":"create-composable-for-the-quiz","link":"#create-composable-for-the-quiz","children":[{"level":3,"title":"🧪 WelcomeScreen","slug":"🧪-welcomescreen","link":"#🧪-welcomescreen","children":[]},{"level":3,"title":"🎯 Solutions","slug":"🎯-solutions","link":"#🎯-solutions","children":[]},{"level":3,"title":"🧪 ScoreScreen","slug":"🧪-scorescreen","link":"#🧪-scorescreen","children":[]},{"level":3,"title":"🎯 Solutions","slug":"🎯-solutions-1","link":"#🎯-solutions-1","children":[]},{"level":3,"title":"🧪 QuestionScreen","slug":"🧪-questionscreen","link":"#🧪-questionscreen","children":[]},{"level":3,"title":"🎯 Solutions","slug":"🎯-solutions-2","link":"#🎯-solutions-2","children":[]}]},{"level":2,"title":"📖 Further reading","slug":"📖-further-reading","link":"#📖-further-reading","children":[]}],"git":{"updatedTime":1728049777000,"contributors":[{"name":"Ibrahim Gharbi","email":"brah.gharbi@gmail.com","commits":15,"url":"https://github.com/Ibrahim Gharbi"},{"name":"A187839","email":"ibrahim.gharbi@worldline.com","commits":6,"url":"https://github.com/A187839"}]},"filePathRelative":"ui/README.md","autoDesc":true}');export{k as comp,m as data}; diff --git a/assets/index.html-pIQXzd7o.js b/assets/index.html-pIQXzd7o.js new file mode 100644 index 0000000..c081c72 --- /dev/null +++ b/assets/index.html-pIQXzd7o.js @@ -0,0 +1,277 @@ +import{_ as s,o as a,c as t,a as e}from"./app-DaulDPFL.js";const p="/learning-kotlin-multiplatform/assets/server_tree-Gse56Whh.png",i={};function l(o,n){return a(),t("div",null,n[0]||(n[0]=[e(`

Connectivity

Let's connect our Quiz app to internet.

Connect my App

For now, we will request a simple plain text json file hosted on this repo that will simulate a REST API call to be able to use our Ktor client.

The request & answers details are specified below :

Request
POST
+content-type: text/plain  
+url: https://github.com/worldline/learning-kotlin-multiplatform/raw/main/quiz.json
+
Answer
code:200
+body: 
+{
+  "questions": [
+    { 
+    "id":1, 
+    "label":"You can create an emulator to simulate the configuration of a particular type of Android device using a tool like", 
+    "correct_answer_id":3, 
+    "answers":[
+      {"id":1, "label":"Theme Editor"},
+      {"id":2, "label":"Android SDK Manager"},
+      {"id":3, "label":"AVD Manager"},
+      {"id":4, "label":"Virtual Editor"}
+     ]
+    },
+    {
+    "id":2, 
+    "label":"What parameter specifies the Android API level that Gradle should use to compile your app?", 
+    "correct_answer_id":2, 
+    "answers":[
+      {"id":1, "label":"minSdkVersion"},
+      {"id":2, "label":"compileSdkVersion"},
+      {"id":3, "label":"targetSdkVersion"},
+      {"id":4, "label":"testSdkVersion"}
+     ]
+    },
+  ]
+}
+

To not overcomplexify the app, let's assume that :

  • the QuizAPI provided by Ktor (cf below) is our data source
  • the repository will use a state flow that emit the API answer once at application startup

🧪 Ktor as a multiplatform HTTP client

Ktor includes a multiplatform asynchronous HTTP client, which allows you to make requests and handle responses, extend its functionality with plugins, such as authentication and JSON deserialization.

Add global dependencies

Shared sources need it to use ktor library on your code

build.gradle.kts (composeApp)
plugins {
+...
+    alias(libs.plugins.kotlinSerialization)
+}
+
+...
+ sourceSets {
+        val desktopMain by getting
+        commonMain.dependencies {
+            ...
+            implementation(libs.kotlinx.datetime)
+            implementation(libs.ktor.client.core)
+            implementation(libs.ktor.client.content.negotiation)
+            implementation(libs.ktor.serialization.kotlinx.json)
+
+        }
+        androidMain.dependencies {
+            ...
+            implementation(libs.ktor.client.okhttp)
+        }
+        desktopMain.dependencies {
+            ...
+            implementation(libs.ktor.client.apache)
+
+        }
+        iosMain.dependencies {
+            implementation(libs.ktor.client.darwin) //for iOS
+        }
+
+    }
+...
+
+

Enable Internet permissions ( Android Only)

You need to enable internet on Android otherwise you will not be able to use ktor client

AndroidManifest.xml( androidMain)
    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+

Create the API client in commonApp

QuizApiDataSource.kt (SourceSet : commonMain)
import com.worldline.quiz.data.dataclass.Quiz
+
+val globalHttpClient = HttpClient {
+    engine {
+
+    }
+
+    install(ContentNegotiation) {
+        json(
+            contentType = ContentType.Text.Plain, // because Github is not returning an 'application/json' header
+            json = Json {
+                ignoreUnknownKeys = true
+                useAlternativeNames = false
+            })
+    }
+}
+
+class QuizApiDatasource {
+    private val httpClient = globalHttpClient
+    suspend fun getAllQuestions(): Quiz {
+        return httpClient.get("https://raw.githubusercontent.com/worldline/learning-kotlin-multiplatform/main/quiz.json").body()
+    }
+}
+
+

Make all your dataclass become serializable

Ktor need it to transform the json string into your dataclasses

Answer.kt (module : commonMain)
@kotlinx.serialization.Serializable
+data class Answer(val id: Int, val label: String )
+
Question.kt (SourceSet : commonMain)
import kotlinx.serialization.SerialInfo
+import kotlinx.serialization.SerialName
+
+@kotlinx.serialization.Serializable
+data class Question(val id:Int, val label:String, @SerialName("correct_answer_id") val correctAnswerId:Int, val answers:List<Answer>)
+
Quiz.kt (SourceSet : commonMain)
@kotlinx.serialization.Serializable
+data class Quiz(var questions: List<Question>)
+

Create your Repository class in commonApp

QuizRepository.kt (module : commonMain)
class QuizRepository {
+
+    private val mockDataSource = MockDataSource()
+    private val quizApiDatasource = QuizApiDatasource()
+
+    private suspend fun fetchQuiz(): List<Question> = quizApiDatasource.getAllQuestions().questions
+
+    suspend fun updateQuiz(): List<Question> {
+        try {
+            return fetchQuiz()
+        } catch (e: Exception) {
+            e.printStackTrace()
+            return mockDataSource.generateDummyQuestionsList()
+        }
+    }
+}
+

🎯 Solutions

Sources

The full sources can be retrieved here

Create a server

🧪 Create a Ktor server module inside your actual project

Warning

You can create the server module from IntelliJ community or ultimate thanks to a template.

The module tree is as follow

server tree

🎯 Solutions

build.gradle.kts
plugins {
+    alias(libs.plugins.kotlinJvm)
+    alias(libs.plugins.ktor)
+    alias(libs.plugins.kotlinSerialization)
+    application
+}
+
+group = "com.worldline.quiz"
+version = "1.0.0"
+
+application {
+    mainClass.set("com.worldline.quiz.ApplicationKt")
+    applicationDefaultJvmArgs = listOf("-Dio.ktor.development=\${extra["io.ktor.development"] ?: "false"}")
+}
+
+dependencies {
+    implementation(libs.logback)
+    implementation(libs.ktor.server.core)
+    implementation(libs.ktor.server.cio)
+    implementation(libs.ktor.serialization.kotlinx.json)
+    implementation(libs.ktor.server.content.negotiation)
+    implementation(libs.ktor.server.cors)
+    implementation(libs.ktor.server.config.yaml)
+}
+
+ktor {
+    fatJar {
+        archiveFileName.set("fat.jar")
+    }
+    docker {
+        externalRegistry.set(
+            io.ktor.plugin.features.DockerImageRegistry.dockerHub(
+                appName = provider { "ktor-quiz" },
+                username = providers.environmentVariable("KTOR_IMAGE_REGISTRY_USERNAME"),
+                password = providers.environmentVariable("KTOR_IMAGE_REGISTRY_PASSWORD")
+            )
+        )
+    }
+}
+
Application.kt
ffun main(args: Array<String>) {
+    io.ktor.server.cio.EngineMain.main(args)
+}
+
+
+fun Application.module() {
+
+    install(CORS) {
+        allowMethod(HttpMethod.Options)
+        allowMethod(HttpMethod.Post)
+        allowMethod(HttpMethod.Get)
+        allowHeader(HttpHeaders.AccessControlAllowOrigin)
+        allowHeader(HttpHeaders.ContentType)
+        anyHost()
+    }
+
+    install(ContentNegotiation) {
+        json()
+    }
+    configureRouting()
+}
+
Routing.kt
fun Application.configureRouting() {
+
+    routing {
+        get("/quiz") {
+            call.respond(generateQuiz())
+        }
+        staticResources("/", "static")
+    }
+}
+
+fun generateQuiz(): Quiz {
+    val quizQuestions = mutableListOf<Question>()
+
+    val questions = listOf(
+        "What is the primary goal of Kotlin Multiplatform?",
+        "How does Kotlin Multiplatform facilitate code sharing between platforms?",
+        "Which platforms does Kotlin Multiplatform support?",
+        "What is a common use case for Kotlin Multiplatform?",
+        "Which naming of KMP is deprecated?",
+        "How does Kotlin Multiplatform handle platform-specific implementations?",
+        "At which Google I/O, Google announced first-class support for Kotlin on Android?",
+        "What is the name of the Kotlin mascot?",
+        "The international yearly Kotlin conference is called...",
+        "Where will be located the next international yearly Kotlin conference?"
+    )
+
+    val answers = listOf(
+        listOf(
+            "To share code between multiple platforms",
+            "To exclusively compile code to JavaScript",
+            "To build only Android applications",
+            "To create iOS-only applications"
+        ),
+        listOf(
+            "By sharing business logic and adapting UI",
+            "By writing separate code for each platform",
+            "By using only Java libraries",
+            "By using code translation tools"
+        ),
+        listOf(
+            "Android, iOS, desktop and web",
+            "Only Android",
+            "Only iOS",
+            "Only web applications"
+        ),
+        listOf(
+            "Developing a cross-platform app",
+            "Building a desktop-only application",
+            "Creating a server-side application",
+            "Writing a standalone mobile app"
+        ),
+        listOf(
+            "Kotlin Multiplatform Mobile (KMM)",
+            "Hadi Multiplatform",
+            "Jetpack multiplatform",
+            "Kodee multiplatform"
+        ),
+        listOf(
+            "Through expect and actual declarations",
+            "By automatically translating code",
+            "By restricting to a single platform",
+            "By excluding platform-specific features"
+        ),
+        listOf(
+            "2017",
+            "2016",
+            "2014",
+            "2020"
+        ),
+        listOf(
+            "Kodee",
+            "Hadee",
+            "Kotlinee",
+            "Kotee"
+        ),
+        listOf(
+            "KotlinConf",
+            "KodeeConf",
+            "KConf",
+            "KotlinKonf"
+        ),
+        listOf(
+            "Copenhagen, Denmark",
+            "Amsterdam, Netherlands",
+            "Tokyo, Japan",
+            "Lille, France"
+        )
+    )
+
+    for (i in questions.indices) {
+        val shuffledAnswers = answers[i].shuffled(Random.Default)
+        val correctAnswerId = shuffledAnswers.indexOfFirst { it == answers[i][0] } + 1
+        val question =
+            Question(i + 1L, questions[i], correctAnswerId.toLong(), shuffledAnswers.mapIndexed { index, answer ->
+                Answer(index + 1L, answer)
+            })
+        quizQuestions.add(question)
+    }
+
+    return Quiz(quizQuestions)
+}
+
+

Other libs

If you want well-known retrofit style lib, you can use KtorFit to separate endpoint declaration from httpclient configuration

Also for better image loading from the internet with cache, you can use the following third-party Compose Multiplatform libraries

An that's it, you quiz have now a remote list of questions.

✅ If everything is fine, go to the next chapter →

📖 Further reading

`,42)]))}const u=s(i,[["render",l],["__file","index.html.vue"]]),r=JSON.parse(`{"path":"/network/","title":"Connectivity","lang":"en-US","frontmatter":{"description":"Connectivity Let's connect our Quiz app to internet. Connect my App For now, we will request a simple plain text json file hosted on this repo that will simulate a REST API call...","head":[["meta",{"property":"og:url","content":"https://worldline.github.io/learning-kotlin-multiplatform/learning-kotlin-multiplatform/network/"}],["meta",{"property":"og:title","content":"Connectivity"}],["meta",{"property":"og:description","content":"Connectivity Let's connect our Quiz app to internet. Connect my App For now, we will request a simple plain text json file hosted on this repo that will simulate a REST API call..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2024-10-04T20:55:50.000Z"}],["meta",{"property":"article:modified_time","content":"2024-10-04T20:55:50.000Z"}],["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Connectivity\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2024-10-04T20:55:50.000Z\\",\\"author\\":[]}"]]},"headers":[{"level":2,"title":"Connect my App","slug":"connect-my-app","link":"#connect-my-app","children":[{"level":3,"title":"🧪 Ktor as a multiplatform HTTP client","slug":"🧪-ktor-as-a-multiplatform-http-client","link":"#🧪-ktor-as-a-multiplatform-http-client","children":[]},{"level":3,"title":"🎯 Solutions","slug":"🎯-solutions","link":"#🎯-solutions","children":[]}]},{"level":2,"title":"Create a server","slug":"create-a-server","link":"#create-a-server","children":[{"level":3,"title":"🧪 Create a Ktor server module inside your actual project","slug":"🧪-create-a-ktor-server-module-inside-your-actual-project","link":"#🧪-create-a-ktor-server-module-inside-your-actual-project","children":[]},{"level":3,"title":"🎯 Solutions","slug":"🎯-solutions-1","link":"#🎯-solutions-1","children":[]}]},{"level":2,"title":"📖 Further reading","slug":"📖-further-reading","link":"#📖-further-reading","children":[]}],"git":{"updatedTime":1728075350000,"contributors":[{"name":"Ibrahim Gharbi","email":"brah.gharbi@gmail.com","commits":19,"url":"https://github.com/Ibrahim Gharbi"},{"name":"A187839","email":"ibrahim.gharbi@worldline.com","commits":9,"url":"https://github.com/A187839"}]},"filePathRelative":"network/README.md","autoDesc":true}`);export{u as comp,r as data}; diff --git a/assets/kmp_sample_src-CoII6UwA.png b/assets/kmp_sample_src-CoII6UwA.png new file mode 100644 index 0000000..80c4b58 Binary files /dev/null and b/assets/kmp_sample_src-CoII6UwA.png differ diff --git a/assets/logo_worldline-t5KadDQv.png b/assets/logo_worldline-t5KadDQv.png new file mode 100644 index 0000000..6981642 Binary files /dev/null and b/assets/logo_worldline-t5KadDQv.png differ diff --git a/assets/overview2-gDQlEEdM.png b/assets/overview2-gDQlEEdM.png new file mode 100644 index 0000000..e81e317 Binary files /dev/null and b/assets/overview2-gDQlEEdM.png differ diff --git a/assets/plugins_install-BKgRePQf.png b/assets/plugins_install-BKgRePQf.png new file mode 100644 index 0000000..d49a89c Binary files /dev/null and b/assets/plugins_install-BKgRePQf.png differ diff --git a/assets/project_struct-DMA9UCBx.png b/assets/project_struct-DMA9UCBx.png new file mode 100644 index 0000000..cef216f Binary files /dev/null and b/assets/project_struct-DMA9UCBx.png differ diff --git a/assets/quizscreen-BAbAaB3e.png b/assets/quizscreen-BAbAaB3e.png new file mode 100644 index 0000000..f559f25 Binary files /dev/null and b/assets/quizscreen-BAbAaB3e.png differ diff --git a/assets/routes-BuqzzffU.png b/assets/routes-BuqzzffU.png new file mode 100644 index 0000000..50f4116 Binary files /dev/null and b/assets/routes-BuqzzffU.png differ diff --git a/assets/run-BxGtZnDA.png b/assets/run-BxGtZnDA.png new file mode 100644 index 0000000..ddbeb0d Binary files /dev/null and b/assets/run-BxGtZnDA.png differ diff --git a/assets/scorescreen-CgD5TFZC.png b/assets/scorescreen-CgD5TFZC.png new file mode 100644 index 0000000..756abeb Binary files /dev/null and b/assets/scorescreen-CgD5TFZC.png differ diff --git a/assets/screens-p5CGXVR7.png b/assets/screens-p5CGXVR7.png new file mode 100644 index 0000000..5409f06 Binary files /dev/null and b/assets/screens-p5CGXVR7.png differ diff --git a/assets/server_tree-Gse56Whh.png b/assets/server_tree-Gse56Whh.png new file mode 100644 index 0000000..1f4c4ae Binary files /dev/null and b/assets/server_tree-Gse56Whh.png differ diff --git a/assets/setupDevtools-7MC2TMWH-CzOqVNI-.js b/assets/setupDevtools-7MC2TMWH-CzOqVNI-.js new file mode 100644 index 0000000..63c4ab2 --- /dev/null +++ b/assets/setupDevtools-7MC2TMWH-CzOqVNI-.js @@ -0,0 +1 @@ +import{s as T,w as E}from"./app-DaulDPFL.js";var l="org.vuejs.vuepress",v="VuePress",I=v,r=l,N=v,i="client-data",a="Client Data",g=(p,n)=>{T({app:p,id:l,label:v,packageName:"@vuepress/client",homepage:"https://vuepress.vuejs.org",logo:"https://vuepress.vuejs.org/images/hero.png",componentStateTypes:[I]},t=>{const c=Object.entries(n),u=Object.keys(n),d=Object.values(n);t.on.inspectComponent(e=>{e.instanceData.state.push(...c.map(([s,o])=>({type:I,editable:!1,key:s,value:o.value})))}),t.addInspector({id:r,label:N,icon:"article"}),t.on.getInspectorTree(e=>{e.inspectorId===r&&(e.rootNodes=[{id:i,label:a,children:u.map(s=>({id:s,label:s}))}])}),t.on.getInspectorState(e=>{e.inspectorId===r&&(e.nodeId===i&&(e.state={[a]:c.map(([s,o])=>({key:s,value:o.value}))}),u.includes(e.nodeId)&&(e.state={[a]:[{key:e.nodeId,value:n[e.nodeId].value}]}))}),E(d,()=>{t.notifyComponentUpdate(),t.sendInspectorState(r)})})};export{g as setupDevtools}; diff --git a/assets/style-CmjR2_g8.css b/assets/style-CmjR2_g8.css new file mode 100644 index 0000000..e39dec9 --- /dev/null +++ b/assets/style-CmjR2_g8.css @@ -0,0 +1 @@ +.vp-back-to-top-button{position:fixed!important;inset-inline-end:1rem;bottom:4rem;z-index:100;width:48px;height:48px;padding:12px;border-width:0;border-radius:50%;background:var(--back-to-top-c-bg);color:var(--back-to-top-c-accent-bg);box-shadow:2px 2px 10px 4px var(--back-to-top-c-shadow);cursor:pointer}@media (max-width: 959px){.vp-back-to-top-button{transform:scale(.8);transform-origin:100% 100%}}@media print{.vp-back-to-top-button{display:none}}.vp-back-to-top-button:hover{color:var(--back-to-top-c-accent-hover)}.vp-back-to-top-button .back-to-top-icon{overflow:hidden;width:24px;height:24px;margin:0 auto;background:var(--back-to-top-c-icon);-webkit-mask-image:var(--back-to-top-icon);mask-image:var(--back-to-top-icon);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:cover;mask-size:cover}.vp-scroll-progress{position:absolute;right:-2px;bottom:-2px;width:52px;height:52px}.vp-scroll-progress svg{width:100%;height:100%}.vp-scroll-progress circle{opacity:.9;transform:rotate(-90deg);transform-origin:50% 50%}.back-to-top-enter-active,.back-to-top-leave-active{transition:opacity .3s}.back-to-top-enter-from,.back-to-top-leave-to{opacity:0}:root{--back-to-top-z-index: 5;--back-to-top-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%3e%3cpath%20fill='none'%20stroke='currentColor'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='4'%20d='M24.008%2014.1V42M12%2026l12-12l12%2012M12%206h24'%20/%3e%3c/svg%3e");--back-to-top-c-bg: var(--vp-c-bg);--back-to-top-c-accent-bg: var(--vp-c-accent-bg);--back-to-top-c-accent-hover: var(--vp-c-accent-hover);--back-to-top-c-shadow: var(--vp-c-shadow);--back-to-top-c-icon: currentcolor}.vp-copy-code-button{position:absolute;top:.5em;right:.5em;z-index:5;width:2.5rem;height:2.5rem;padding:0;border-width:0;border-radius:.5rem;background:#0000;outline:none;opacity:0;cursor:pointer;transition:opacity .4s}@media print{.vp-copy-code-button{display:none}}.vp-copy-code-button:before{content:"";display:inline-block;width:1.25rem;height:1.25rem;padding:.625rem;background:currentcolor;color:var(--copy-code-c-text);font-size:1.25rem;-webkit-mask-image:var(--code-copy-icon);mask-image:var(--code-copy-icon);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:1em;mask-size:1em;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.vp-copy-code-button:focus,.vp-copy-code-button.copied{opacity:1}.vp-copy-code-button:hover,.vp-copy-code-button.copied{background:var(--copy-code-c-hover)}.vp-copy-code-button.copied:before{-webkit-mask-image:var(--code-copied-icon);mask-image:var(--code-copied-icon)}.vp-copy-code-button.copied:after{content:attr(data-copied);position:absolute;top:0;right:calc(100% + .25rem);display:block;height:1.25rem;padding:.625rem;border-radius:.5rem;background:var(--copy-code-c-hover);color:var(--copy-code-c-text);font-weight:500;line-height:1.25rem;white-space:nowrap}.no-copy-code .vp-copy-code-button{display:none}body:not(.no-copy-code) div[class*=language-]:hover:before{display:none}body:not(.no-copy-code) div[class*=language-]:hover .vp-copy-code-button{opacity:1}:root{--code-copy-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2' /%3e%3c/svg%3e");--code-copied-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4' /%3e%3c/svg%3e");--copy-code-c-text: var(--code-c-line-number);--copy-code-c-hover: var(--code-c-highlight-bg)}.hint-container{position:relative;background:var(--hint-c-soft);transition:background var(--vp-t-color),color var(--vp-t-color)}@media print{.hint-container{page-break-inside:avoid}}.hint-container>.hint-container-title{color:var(--hint-c-title)}.hint-container :not(pre)>code{background:var(--hint-c-soft)}.hint-container .hint-container-title{position:relative;margin-block:.75em;font-weight:600;line-height:1.25}.hint-container.important,.hint-container.info,.hint-container.note,.hint-container.tip,.hint-container.warning,.hint-container.caution{margin-block:.75rem;padding:.25em 1em;border-radius:.5em;color:inherit;font-size:var(--hint-font-size)}@media print{.hint-container.important,.hint-container.info,.hint-container.note,.hint-container.tip,.hint-container.warning,.hint-container.caution{border-inline-start-width:.25em;border-inline-start-style:solid}}.hint-container.important .hint-container-title,.hint-container.info .hint-container-title,.hint-container.note .hint-container-title,.hint-container.tip .hint-container-title,.hint-container.warning .hint-container-title,.hint-container.caution .hint-container-title{padding-inline-start:1.75em}@media print{.hint-container.important .hint-container-title,.hint-container.info .hint-container-title,.hint-container.note .hint-container-title,.hint-container.tip .hint-container-title,.hint-container.warning .hint-container-title,.hint-container.caution .hint-container-title{padding-inline-start:0}}.hint-container.important .hint-container-title:before,.hint-container.info .hint-container-title:before,.hint-container.note .hint-container-title:before,.hint-container.tip .hint-container-title:before,.hint-container.warning .hint-container-title:before,.hint-container.caution .hint-container-title:before{content:" ";position:absolute;inset-inline-start:0;top:calc(50% - .6125em);width:1.25em;height:1.25em;font-size:1.25em}@media print{.hint-container.important .hint-container-title:before,.hint-container.info .hint-container-title:before,.hint-container.note .hint-container-title:before,.hint-container.tip .hint-container-title:before,.hint-container.warning .hint-container-title:before,.hint-container.caution .hint-container-title:before{display:none}}.hint-container.important p,.hint-container.info p,.hint-container.note p,.hint-container.tip p,.hint-container.warning p,.hint-container.caution p{line-height:1.5}.hint-container.important a,.hint-container.info a,.hint-container.note a,.hint-container.tip a,.hint-container.warning a,.hint-container.caution a{color:var(--vp-c-accent)}.hint-container.important{--hint-c-accent: var(--important-c-accent);--hint-c-title: var(--important-c-text);--hint-c-soft: var(--important-c-soft)}.hint-container.important>.hint-container-title:before{background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 981.333a84.992 84.992 0 0 1-84.907-84.906h169.814A84.992 84.992 0 0 1 512 981.333zm384-128H128v-42.666l85.333-85.334v-256A298.325 298.325 0 0 1 448 177.92V128a64 64 0 0 1 128 0v49.92a298.325 298.325 0 0 1 234.667 291.413v256L896 810.667v42.666zm-426.667-256v85.334h85.334v-85.334h-85.334zm0-256V512h85.334V341.333h-85.334z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 981.333a84.992 84.992 0 0 1-84.907-84.906h169.814A84.992 84.992 0 0 1 512 981.333zm384-128H128v-42.666l85.333-85.334v-256A298.325 298.325 0 0 1 448 177.92V128a64 64 0 0 1 128 0v49.92a298.325 298.325 0 0 1 234.667 291.413v256L896 810.667v42.666zm-426.667-256v85.334h85.334v-85.334h-85.334zm0-256V512h85.334V341.333h-85.334z'/%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:1em;mask-size:1em;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.hint-container.info{--hint-c-accent: var(--info-c-accent);--hint-c-title: var(--info-c-text);--hint-c-soft: var(--info-c-soft)}.hint-container.info>.hint-container-title:before{background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z'/%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:1em;mask-size:1em;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.hint-container.note{--hint-c-accent: var(--note-c-accent);--hint-c-title: var(--note-c-text);--hint-c-soft: var(--note-c-soft)}.hint-container.note>.hint-container-title:before{background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z'/%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:1em;mask-size:1em;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.hint-container.tip{--hint-c-accent: var(--tip-c-accent);--hint-c-title: var(--tip-c-text);--hint-c-soft: var(--tip-c-soft)}.hint-container.tip>.hint-container-title:before{background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.941 18c-.297-1.273-1.637-2.314-2.187-3a8 8 0 1 1 12.49.002c-.55.685-1.888 1.726-2.185 2.998H7.94zM16 20v1a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-1h8zm-3-9.995V6l-4.5 6.005H11v4l4.5-6H13z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.941 18c-.297-1.273-1.637-2.314-2.187-3a8 8 0 1 1 12.49.002c-.55.685-1.888 1.726-2.185 2.998H7.94zM16 20v1a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-1h8zm-3-9.995V6l-4.5 6.005H11v4l4.5-6H13z'/%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:1em;mask-size:1em;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.hint-container.warning{--hint-c-accent: var(--warning-c-accent);--hint-c-title: var(--warning-c-text);--hint-c-soft: var(--warning-c-soft)}.hint-container.warning>.hint-container-title:before{background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M576.286 752.57v-95.425q0-7.031-4.771-11.802t-11.3-4.772h-96.43q-6.528 0-11.3 4.772t-4.77 11.802v95.424q0 7.031 4.77 11.803t11.3 4.77h96.43q6.528 0 11.3-4.77t4.77-11.803zm-1.005-187.836 9.04-230.524q0-6.027-5.022-9.543-6.529-5.524-12.053-5.524H456.754q-5.524 0-12.053 5.524-5.022 3.516-5.022 10.547l8.538 229.52q0 5.023 5.022 8.287t12.053 3.265h92.913q7.032 0 11.803-3.265t5.273-8.287zM568.25 95.65l385.714 707.142q17.578 31.641-1.004 63.282-8.538 14.564-23.354 23.102t-31.892 8.538H126.286q-17.076 0-31.892-8.538T71.04 866.074q-18.582-31.641-1.004-63.282L455.75 95.65q8.538-15.57 23.605-24.61T512 62t32.645 9.04 23.605 24.61z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M576.286 752.57v-95.425q0-7.031-4.771-11.802t-11.3-4.772h-96.43q-6.528 0-11.3 4.772t-4.77 11.802v95.424q0 7.031 4.77 11.803t11.3 4.77h96.43q6.528 0 11.3-4.77t4.77-11.803zm-1.005-187.836 9.04-230.524q0-6.027-5.022-9.543-6.529-5.524-12.053-5.524H456.754q-5.524 0-12.053 5.524-5.022 3.516-5.022 10.547l8.538 229.52q0 5.023 5.022 8.287t12.053 3.265h92.913q7.032 0 11.803-3.265t5.273-8.287zM568.25 95.65l385.714 707.142q17.578 31.641-1.004 63.282-8.538 14.564-23.354 23.102t-31.892 8.538H126.286q-17.076 0-31.892-8.538T71.04 866.074q-18.582-31.641-1.004-63.282L455.75 95.65q8.538-15.57 23.605-24.61T512 62t32.645 9.04 23.605 24.61z'/%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:1em;mask-size:1em;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.hint-container.caution{--hint-c-accent: var(--caution-c-accent);--hint-c-title: var(--caution-c-text);--hint-c-soft: var(--caution-c-soft)}.hint-container.caution>.hint-container-title:before{background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10v3.764a2 2 0 0 1-1.106 1.789L18 19v1a3 3 0 0 1-2.824 2.995L14.95 23a2.5 2.5 0 0 0 .044-.33L15 22.5V22a2 2 0 0 0-1.85-1.995L13 20h-2a2 2 0 0 0-1.995 1.85L9 22v.5c0 .171.017.339.05.5H9a3 3 0 0 1-3-3v-1l-2.894-1.447A2 2 0 0 1 2 15.763V12C2 6.477 6.477 2 12 2zm-4 9a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10v3.764a2 2 0 0 1-1.106 1.789L18 19v1a3 3 0 0 1-2.824 2.995L14.95 23a2.5 2.5 0 0 0 .044-.33L15 22.5V22a2 2 0 0 0-1.85-1.995L13 20h-2a2 2 0 0 0-1.995 1.85L9 22v.5c0 .171.017.339.05.5H9a3 3 0 0 1-3-3v-1l-2.894-1.447A2 2 0 0 1 2 15.763V12C2 6.477 6.477 2 12 2zm-4 9a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:1em;mask-size:1em;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.hint-container.details{position:relative;display:block;margin-block:.75rem;padding:1.25rem 1rem;border-radius:.5rem;background:var(--detail-c-bg);transition:background var(--vp-t-transform),color var(--vp-t-transform)}.hint-container.details h4{margin-top:0}.hint-container.details figure:last-child,.hint-container.details p:last-child{margin-bottom:0;padding-bottom:0}.hint-container.details a{color:var(--vp-c-accent)}.hint-container.details :not(pre)>code{background:var(--detail-c-soft)}.hint-container.details summary{position:relative;margin:-1rem;padding-block:1em;padding-inline:3em 1.5em;list-style:none;font-size:var(--hint-font-size);cursor:pointer}.hint-container.details summary::-webkit-details-marker{display:none}.hint-container.details summary::marker{color:#0000;font-size:0}.hint-container.details summary:before{background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:1em;mask-size:1em;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;content:" ";position:absolute;inset-inline-start:.8em;top:calc(50% - .5em);width:1em;height:1em;font-size:1.25rem;line-height:normal;transition:color,var(--vp-t-color),transform var(--vp-t-transform);transform:rotate(90deg)}.hint-container.details[open]>summary{margin-bottom:.5em}.hint-container.details[open]>summary:before{transform:rotate(180deg)}:root{--hint-font-size: .92rem;--important-c-accent: var(--vp-c-purple-bg);--important-c-text: var(--vp-c-purple-text);--important-c-soft: var(--vp-c-purple-soft);--info-c-accent: var(--vp-c-blue-bg);--info-c-text: var(--vp-c-blue-text);--info-c-soft: var(--vp-c-blue-soft);--note-c-accent: var(--vp-c-grey-bg);--note-c-text: var(--vp-c-grey-text);--note-c-soft: var(--vp-c-grey-soft);--tip-c-accent: var(--vp-c-green-bg);--tip-c-text: var(--vp-c-green-text);--tip-c-soft: var(--vp-c-green-soft);--warning-c-accent: var(--vp-c-yellow-bg);--warning-c-text: var(--vp-c-yellow-text);--warning-c-soft: var(--vp-c-yellow-soft);--caution-c-accent: var(--vp-c-red-bg);--caution-c-text: var(--vp-c-red-text);--caution-c-soft: var(--vp-c-red-soft);--detail-c-bg: var(--vp-c-control);--detail-c-icon: var(--vp-c-border);--detail-c-soft: var(--vp-c-grey-soft)}:root{--medium-zoom-z-index: 100;--medium-zoom-c-bg: var(--vp-c-bg-elv, #fff);--medium-zoom-opacity: 1}.medium-zoom-overlay{z-index:var(--medium-zoom-z-index);background-color:var(--medium-zoom-c-bg)!important}.medium-zoom-overlay~img{z-index:calc(var(--medium-zoom-z-index) + 1)}.medium-zoom--opened .medium-zoom-overlay{opacity:var(--medium-zoom-opacity)}:root{--nprogress-c: var(--vp-c-accent);--nprogress-z-index: 1031}#nprogress{pointer-events:none}#nprogress .bar{position:fixed;top:0;left:0;z-index:var(--nprogress-z-index);width:100%;height:2px;background:var(--nprogress-c)}:root{--code-padding-x: 1.25rem;--code-padding-y: 1rem;--code-border-radius: 6px;--code-line-height: 1.6;--code-font-size: 14px;--code-font-family: consolas, monaco, "Andale Mono", "Ubuntu Mono", monospace}div[class*=language-]{position:relative;border-radius:var(--code-border-radius);background-color:var(--code-c-bg)}div[class*=language-]:before{content:attr(data-title);position:absolute;top:.8em;right:1em;z-index:3;color:var(--code-c-text);font-size:.75rem}div[class*=language-] pre{position:relative;z-index:1;overflow-x:auto;margin:0;border-radius:var(--code-border-radius);font-size:var(--code-font-size);font-family:var(--code-font-family);line-height:var(--code-line-height)}div[class*=language-] pre code{display:block;box-sizing:border-box;width:-moz-fit-content;width:fit-content;min-width:100%;padding:var(--code-padding-y) var(--code-padding-x);background-color:#0000!important;color:var(--code-c-text);overflow-wrap:unset;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}:root{--code-c-text: #f8f8f2;--code-c-bg: #2e3440;--code-c-highlight-bg: rgb(51.6454545455, 60.5484848485, 78.3545454545);--code-c-line-number: rgba(248, 248, 242, .67)}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#636f88}.token.punctuation{color:#81a1c1}.namespace{opacity:.7}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#81a1c1}.token.number{color:#b48ead}.token.boolean{color:#81a1c1}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#a3be8c}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#81a1c1}.token.atrule,.token.attr-value,.token.function,.token.class-name{color:#88c0d0}.token.keyword{color:#81a1c1}.token.regex,.token.important{color:#ebcb8b}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}:root{--code-line-number-width: 3rem}div[class*=language-]:not(.line-numbers-mode) .line-numbers{display:none}div[class*=language-].line-numbers-mode:after{content:"";position:absolute;top:0;left:0;width:var(--code-line-number-width);height:100%;border-right:1px solid var(--code-c-highlight-bg, var(--code-c-text));border-radius:var(--code-border-radius) 0 0 var(--code-border-radius);transition:border var(--vp-t-color)}div[class*=language-].line-numbers-mode pre{vertical-align:middle;margin-left:var(--code-line-number-width)}div[class*=language-].line-numbers-mode code{padding-left:1rem}div[class*=language-].line-numbers-mode .line-numbers{counter-reset:line-number;position:absolute;top:0;width:var(--code-line-number-width);padding-top:var(--code-padding-y);color:var(--code-c-line-number, var(--code-c-text));font-size:var(--code-font-size);line-height:var(--code-line-height);text-align:center}div[class*=language-].line-numbers-mode .line-number{position:relative;z-index:3;font-family:var(--code-font-family);-webkit-user-select:none;-moz-user-select:none;user-select:none}div[class*=language-].line-numbers-mode .line-number:before{content:counter(line-number);counter-increment:line-number}div[class*=language-] .line.highlighted{display:inline-block;width:100%;margin:0 calc(-1*var(--code-padding-x));padding:0 var(--code-padding-x);background-color:var(--code-c-highlight-bg)}div[class*=language-].has-collapsed-lines.collapsed{overflow-y:hidden;height:calc(var(--vp-collapsed-lines)*var(--code-line-height)*var(--code-font-size) + var(--code-padding-y) + 28px)}div[class*=language-].has-collapsed-lines .collapsed-lines{--vp-collapsed-lines-bg: var(--code-c-bg);position:absolute;right:0;bottom:0;left:0;z-index:4;display:flex;align-items:center;justify-content:center;height:28px;background:linear-gradient(to bottom,transparent 0%,var(--vp-collapsed-lines-bg) 55%,var(--vp-collapsed-lines-bg) 100%);cursor:pointer;transition:--vp-collapsed-lines-bg var(--vp-t-color)}div[class*=language-].has-collapsed-lines .collapsed-lines:hover{--vp-collapsed-lines-bg: rgb(0 0 0 / 10%) !important}div[class*=language-].has-collapsed-lines[data-highlighter=shiki] .collapsed-lines{--vp-collapsed-lines-bg: var(--code-c-bg, var(--shiki-light-bg))}[data-theme=dark] div[class*=language-].has-collapsed-lines[data-highlighter=shiki] .collapsed-lines{--vp-collapsed-lines-bg: var(--code-c-bg, var(--shiki-dark-bg))}div[class*=language-].has-collapsed-lines .collapsed-lines:before{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='m18 12l-6 6l-6-6m12-6l-6 6l-6-6'/%3E%3C/svg%3E");--vp-collapsed-lines-rotate: 0deg;content:"";display:inline-block;width:24px;height:24px;background-color:var(--code-c-text);-webkit-mask-image:var(--icon);mask-image:var(--icon);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;pointer-events:none;animation:code-collapsed-lines 1.2s infinite alternate-reverse ease-in-out}div[class*=language-].has-collapsed-lines:not(.collapsed) code{padding-bottom:max(var(--code-padding-y),28px)}div[class*=language-].has-collapsed-lines:not(.collapsed) .collapsed-lines:hover{--vp-collapsed-lines-bg: transparent !important}div[class*=language-].has-collapsed-lines:not(.collapsed) .collapsed-lines:before{--vp-collapsed-lines-rotate: 180deg}@property --vp-collapsed-lines-bg{inherits:false;initial-value:#fff;syntax:""}@keyframes code-collapsed-lines{0%{opacity:.3;transform:translateY(-2px) rotate(var(--vp-collapsed-lines-rotate))}to{opacity:1;transform:translateY(2px) rotate(var(--vp-collapsed-lines-rotate))}}.vp-code-tabs-nav{overflow-x:auto;margin:.75rem 0 -.75rem;padding:0;border-radius:6px 6px 0 0;background:var(--code-tabs-c-bg);list-style:none;white-space:nowrap;transition:background var(--vp-t-color)}@media print{.vp-code-tabs-nav{display:none}}@media (max-width: 419px){.vp-code-tabs-nav{margin-inline:-1.5rem;border-radius:0}}.vp-code-tab-nav{position:relative;min-width:3rem;margin:0;padding:6px 12px;border-width:0;border-radius:6px 6px 0 0;background:#0000;color:var(--code-tabs-c-text);font-weight:600;font-size:.875em;line-height:1.4;cursor:pointer;transition:background var(--vp-t-color),color var(--vp-t-color)}.vp-code-tab-nav:hover{background:var(--code-tabs-c-hover)}.vp-code-tab-nav:before,.vp-code-tab-nav:after{content:" ";position:absolute;bottom:0;z-index:1;width:6px;height:6px}.vp-code-tab-nav:before{right:100%}.vp-code-tab-nav:after{left:100%}.vp-code-tab-nav.active{background:var(--code-c-bg, var(--vp-c-bg-alt))}.vp-code-tab-nav.active:before{background:radial-gradient(12px at left top,transparent 50%,var(--code-c-bg) 50%)}.vp-code-tab-nav.active:after{background:radial-gradient(12px at right top,transparent 50%,var(--code-c-bg) 50%)}.vp-code-tab-nav:first-child:before{display:none}[dir=rtl] .vp-code-tab-nav:first-child:before{display:block}[dir=rtl] .vp-code-tab-nav:first-child:after{display:none}.vp-code-tab{display:none}@media print{.vp-code-tab{display:block}}.vp-code-tab.active{display:block}.vp-code-tab div[class*=language-]{border-top-left-radius:0;border-top-right-radius:0}@media (max-width: 419px){.vp-code-tab div[class*=language-]{margin:.75rem -1.5rem;border-radius:0}}.vp-code-tab div[class*=language-].line-numbers-mode:after{border-top-left-radius:0}.vp-code-tab div[class*=language-] pre{border-top-left-radius:0;border-top-right-radius:0}@media (max-width: 419px){.vp-code-tab div[class*=language-] pre{border-radius:0}}@media print{.vp-code-tab div[class*=language-] code{white-space:pre-wrap}}.vp-code-tab-title{display:none;font-weight:500}@media print{.vp-code-tab-title{display:block}}.vp-tabs{margin:1.5rem 0;border:1px solid var(--vp-c-border);border-radius:8px}@media (max-width: 419px){[vp-content]>.vp-tabs{margin-inline:-1.5rem;border:none;border-bottom:1px solid var(--vp-c-border);border-radius:0}}.vp-tabs-nav{overflow-x:auto;margin:0;padding:0;border-radius:.5rem .5rem 0 0;background:var(--tab-c-bg-nav);list-style:none;white-space:nowrap;transition:background var(--vp-t-color)}@media print{.vp-tabs-nav{display:none}}@media (max-width: 419px){.vp-tabs-nav{border-radius:0}}.vp-tab-nav{position:relative;min-width:4rem;margin:0;padding:.5em 1em;border:none;border-radius:.5rem .5rem 0 0;background:#0000;color:var(--tab-c-nav);font-weight:600;font-size:.875em;line-height:1.75;cursor:pointer;transition:background var(--vp-t-color),color var(--vp-t-color)}.vp-tab-nav:hover{background:var(--tab-c-bg-nav-hover)}.vp-tab-nav:before,.vp-tab-nav:after{content:" ";position:absolute;bottom:0;z-index:1;width:8px;height:8px}.vp-tab-nav:before{right:100%}.vp-tab-nav:after{left:100%}.vp-tab-nav.active{background:var(--tab-c-bg)}.vp-tab-nav.active:before{background:radial-gradient(16px at left top,transparent 50%,var(--tab-c-bg) 50%)}.vp-tab-nav.active:after{background:radial-gradient(16px at right top,transparent 50%,var(--tab-c-bg) 50%)}.vp-tab-nav:first-child:before{display:none}.vp-tab{display:none;padding:1rem .75rem;border-radius:0 0 .5rem .5rem;background:var(--tab-c-bg);transition:background var(--vp-t-color)}@media print{.vp-tab{display:block;padding:.5rem}}.vp-tab.active{display:block}.vp-tab:nth-child(n+2) .vp-tab-title{border-top:none}.vp-tab-title{display:none;padding:.25rem 0;border-top:1px solid var(--vp-c-border);font-weight:500}@media print{.vp-tab-title{display:block}}:root{--code-tabs-c-text: var(--code-c-text);--code-tabs-c-bg: var(--code-c-highlight-bg);--code-tabs-c-hover: var(--code-c-bg, var(--vp-c-bg-alt));--tab-c-bg: var(--vp-c-bg);--tab-c-nav: var(--vp-c-text);--tab-c-bg-nav: var(--vp-c-grey-bg);--tab-c-bg-nav-hover: var(--vp-c-control-hover)}.vp-badge{display:inline-block;vertical-align:top;height:18px;padding:0 6px;border-radius:3px;background:var(--vp-c-accent-soft);color:var(--vp-c-accent);font-size:14px;line-height:18px;transition:background var(--vp-t-color),color var(--vp-t-color)}.vp-badge+.vp-badge{margin-inline-start:5px}.vp-badge.tip{background:var(--badge-c-tip-bg);color:var(--badge-c-tip-text)}.vp-badge.warning{background:var(--badge-c-warning-bg);color:var(--badge-c-warning-text)}.vp-badge.danger{background:var(--badge-c-danger-bg);color:var(--badge-c-danger-text)}.vp-badge.important{background:var(--badge-c-important-bg);color:var(--badge-c-important-text)}.vp-badge.info{background:var(--badge-c-info-bg);color:var(--badge-c-info-text)}.vp-badge.note{background:var(--badge-c-note-bg);color:var(--badge-c-note-text)}.vp-features{display:flex;flex-wrap:wrap;place-content:stretch space-between;align-items:flex-start;margin-top:2.5rem;padding:1.2rem 0;border-top:1px solid var(--vp-c-gutter);transition:border-color var(--vp-t-color)}@media (max-width: 719px){.vp-features{flex-direction:column}}.vp-feature{flex-grow:1;flex-basis:30%;max-width:30%}@media (max-width: 719px){.vp-feature{max-width:100%;padding:0 2.5rem}}.vp-feature h2{padding-bottom:0;border-bottom:none;font-weight:500;font-size:1.4rem}@media (max-width: 419px){.vp-feature h2{font-size:1.25rem}}.vp-feature p{color:var(--vp-c-text-mute)}.vp-footer{padding:2.5rem;border-top:1px solid var(--vp-c-border);color:var(--vp-c-text-mute);text-align:center;transition:border-color var(--vp-t-color)}.vp-hero{text-align:center}.vp-hero-image{display:block;max-width:100%;max-height:280px;margin:3rem auto 1.5rem}@media (max-width: 419px){.vp-hero-image{max-height:210px;margin:2rem auto 1.2rem}}#main-title{font-size:3rem}@media (max-width: 419px){#main-title{font-size:2rem}}#main-title,.vp-hero-description,.vp-hero-actions{margin:1.8rem auto}@media (max-width: 419px){#main-title,.vp-hero-description,.vp-hero-actions{margin:1.2rem auto}}.vp-hero-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.vp-hero-description{max-width:35rem;color:var(--vp-c-text-mute);font-size:1.6rem;line-height:1.3}@media (max-width: 419px){.vp-hero-description{font-size:1.2rem}}.vp-hero-action-button{display:inline-block;box-sizing:border-box;padding:.8rem 1.6rem;border:2px solid var(--vp-c-accent-bg);border-radius:4px;background-color:var(--vp-c-bg);color:var(--vp-c-accent);font-size:1.2rem;transition:background-color border-color color var(--vp-t-color)}@media (max-width: 419px){.vp-hero-action-button{padding:.6rem 1.2rem;font-size:1rem}}.vp-hero-action-button:hover{color:var(--vp-c-accent-text)}.vp-hero-action-button.primary{background-color:var(--vp-c-accent-bg);color:var(--vp-c-accent-text)}.vp-hero-action-button.primary:hover{border-color:var(--vp-c-accent-hover);background-color:var(--vp-c-accent-hover)}.vp-home{display:block;max-width:var(--homepage-width);margin:0 auto;padding:var(--navbar-height) 2rem 0}@media (max-width: 419px){.vp-home{padding-right:1.5rem;padding-left:1.5rem}}.vp-home .theme-default-content{margin:0;padding:0}.vp-site-logo{vertical-align:top;height:var(--navbar-line-height);margin-right:var(--navbar-padding-v)}.vp-site-name{position:relative;color:var(--vp-c-text);font-weight:600;font-size:1.3rem}@media screen and (max-width: 719px){.vp-site-name{display:block;overflow:hidden;width:calc(100vw - 11rem);text-overflow:ellipsis;white-space:nowrap}}.vp-dropdown-enter-from,.vp-dropdown-leave-to{height:0!important}.vp-navbar-dropdown-wrapper{cursor:pointer}.vp-navbar-dropdown-wrapper:not(.mobile){height:1.8rem}.vp-navbar-dropdown-wrapper:not(.mobile):hover .vp-navbar-dropdown,.vp-navbar-dropdown-wrapper:not(.mobile).open .vp-navbar-dropdown{display:block!important}.vp-navbar-dropdown-wrapper.mobile .vp-navbar-dropdown{overflow:hidden;transition:height .1s ease-out;padding-top:.5rem}.vp-navbar-dropdown-wrapper:not(.mobile) .vp-navbar-dropdown{position:absolute;top:100%;right:0;display:none;overflow-y:auto;box-sizing:border-box;height:auto!important;max-height:calc(100vh - 2.7rem);margin:0;padding:.6rem 0;border:1px solid var(--vp-c-gutter);border-radius:.5rem;background-color:var(--vp-c-bg-elv);text-align:left;white-space:nowrap}.vp-navbar-dropdown-title{display:block;padding:inherit;border:none;background:transparent;color:var(--vp-c-text);font-weight:500;font-size:.9rem;font-family:inherit;line-height:1.4rem;cursor:inherit}.vp-navbar-dropdown-wrapper.mobile .vp-navbar-dropdown-title{display:none}.vp-navbar-dropdown-title:hover{border-color:transparent}.vp-navbar-dropdown-title-mobile{display:none;padding:inherit;border:none;background:transparent;color:var(--vp-c-text);font-weight:600;font-size:inherit;font-family:inherit;line-height:1.4rem;cursor:inherit}.vp-navbar-dropdown-wrapper.mobile .vp-navbar-dropdown-title-mobile{display:block}.vp-navbar-dropdown-title-mobile:hover{color:var(--vp-c-accent)}.vp-navbar-dropdown-item{color:inherit;line-height:1.7rem}.vp-navbar-dropdown-item a{position:relative;display:block;margin-bottom:0;padding:0 1.5rem 0 1.25rem;border-bottom:none;font-weight:400;line-height:1.7rem}.vp-navbar-dropdown-item a:hover,.vp-navbar-dropdown-item a.route-link-active{color:var(--vp-c-accent)}.vp-navbar-dropdown-item a.route-link-active:after{content:"";position:absolute;top:calc(50% - 2px);left:9px;width:0;height:0;border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:5px solid var(--vp-c-accent)}.vp-navbar-dropdown-wrapper.mobile .vp-navbar-dropdown-item>a{font-size:15px;line-height:2rem}.vp-navbar-dropdown-subtitle{margin:.45rem 0 0;padding:1rem 0 .45rem;border-top:1px solid var(--vp-c-gutter);font-size:.9rem}.vp-navbar-dropdown-wrapper.mobile .vp-navbar-dropdown-subtitle{margin-top:0;padding-top:0;padding-bottom:0;border-top:0;font-size:15px;line-height:2rem}.vp-navbar-dropdown-item:first-child .vp-navbar-dropdown-subtitle{margin-top:0;padding-top:0;border-top:0}.vp-navbar-dropdown-subtitle>span{padding:0 1.5rem 0 1.25rem}.vp-navbar-dropdown-subtitle>a{font-weight:inherit}.vp-navbar-dropdown-subtitle>a.route-link-active:after{display:none}.vp-navbar-dropdown-subitem-wrapper{padding:0;list-style:none}.vp-navbar-dropdown-subitem{font-size:.9em}.vp-navbar-dropdown-wrapper.mobile .vp-navbar-dropdown-subitem{padding-left:1rem;font-size:14px}.vp-navbar-items{display:inline-block}@media print{.vp-navbar-items{display:none}}.vp-navbar-items a{display:inline-block;color:inherit;line-height:1.4rem}.vp-navbar-items a:hover,.vp-navbar-items a.route-link-active{color:var(--vp-c-text)}.vp-navbar-item{position:relative;display:inline-block;margin-left:1.5rem;line-height:var(--navbar-line-height)}@media (max-width: 719px){.vp-navbar-item{margin-left:0}}.vp-navbar-item:first-child{margin-left:0}.vp-navbar-item a:hover,.vp-navbar-item a.route-link-active{color:var(--vp-c-accent)}.vp-navbar-item>a:hover,.vp-navbar-item>a.route-link-active{margin-bottom:-2px;border-bottom:2px solid var(--vp-c-accent)}@media (max-width: 719px){.vp-navbar-item>a:hover,.vp-navbar-item>a.route-link-active{margin-bottom:0;border-bottom:none}}.vp-toggle-color-mode-button{display:flex;margin:auto;margin-left:1rem;border:0;background:none;color:var(--vp-c-text);opacity:.8;cursor:pointer}@media print{.vp-toggle-color-mode-button{display:none}}.vp-toggle-color-mode-button:hover{opacity:1}.vp-toggle-color-mode-button .light-icon,.vp-toggle-color-mode-button .dark-icon{width:1.25rem;height:1.25rem}.vp-toggle-sidebar-button{position:absolute;top:.6rem;left:1rem;display:none;padding:.6rem;cursor:pointer}@media screen and (max-width: 719px){.vp-toggle-sidebar-button{display:block}}.vp-toggle-sidebar-button .icon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;cursor:inherit}.vp-toggle-sidebar-button .icon span{display:inline-block;width:100%;height:2px;border-radius:2px;background-color:var(--vp-c-text);transition:transform var(--vp-t-transform)}.vp-toggle-sidebar-button .icon span:nth-child(2){margin:6px 0}.vp-theme-container.sidebar-open .vp-toggle-sidebar-button .icon span:nth-child(1){transform:rotate(45deg) translate3d(5.5px,5.5px,0)}.vp-theme-container.sidebar-open .vp-toggle-sidebar-button .icon span:nth-child(2){transform:scale3d(0,1,1)}.vp-theme-container.sidebar-open .vp-toggle-sidebar-button .icon span:nth-child(3){transform:rotate(-45deg) translate3d(6px,-6px,0)}.vp-theme-container.sidebar-open .vp-toggle-sidebar-button .icon span:nth-child(1),.vp-theme-container.sidebar-open .vp-toggle-sidebar-button .icon span:nth-child(3){transform-origin:center}.vp-navbar{--navbar-line-height: calc( var(--navbar-height) - 2 * var(--navbar-padding-v) );position:fixed;top:0;right:0;left:0;z-index:20;box-sizing:border-box;height:var(--navbar-height);padding:var(--navbar-padding-v) var(--navbar-padding-h);border-bottom:1px solid var(--vp-c-border);background-color:var(--vp-navbar-c-bg);line-height:var(--navbar-line-height);transition:background-color var(--vp-t-color),border-color var(--vp-t-color)}@media screen and (max-width: 719px){.vp-navbar{padding-left:4rem}}.vp-navbar-items-wrapper{position:absolute;top:var(--navbar-padding-v);right:var(--navbar-padding-h);display:flex;box-sizing:border-box;height:var(--navbar-line-height);padding-left:var(--navbar-padding-h);font-size:.9rem;white-space:nowrap}.vp-page-meta{max-width:var(--content-width);margin:0 auto;padding:2rem 2.5rem}@media (max-width: 959px){.vp-page-meta{padding:2rem}}@media (max-width: 419px){.vp-page-meta{padding:1.5rem}}.vp-page-meta{display:flex;flex-wrap:wrap;justify-content:space-between;overflow:auto;padding-top:.75rem;padding-bottom:.75rem}@media print{.vp-page-meta{margin:0!important;padding-right:0!important;padding-left:0!important}}@media (max-width: 719px){.vp-page-meta{display:block}}.vp-page-meta .vp-meta-item{flex-grow:1}.vp-page-meta .vp-meta-item .vp-meta-label{font-weight:500}.vp-page-meta .vp-meta-item .vp-meta-label:not(a){color:var(--vp-c-text-mute)}.vp-page-meta .vp-meta-item .vp-meta-info{color:var(--vp-c-text-mute);font-weight:400}.vp-page-meta .git-info{text-align:end}.vp-page-meta .edit-link{margin-top:.25rem;margin-right:.5rem;margin-bottom:.25rem;font-size:14px}@media print{.vp-page-meta .edit-link{display:none}}.vp-page-meta .edit-link .edit-icon{position:relative;bottom:-.125em;width:1em;height:1em;margin-right:.25em}.vp-page-meta .last-updated,.vp-page-meta .contributors{margin-top:.25rem;margin-bottom:.25rem;font-size:14px}@media (max-width: 719px){.vp-page-meta .last-updated,.vp-page-meta .contributors{font-size:13px;text-align:start}}.vp-page-nav{display:flex;flex-wrap:wrap;max-width:var(--content-width, 740px);min-height:2rem;margin-top:0;margin-right:auto;margin-left:auto;padding:1rem 2rem 0;border-top:1px solid var(--vp-c-gutter);transition:border-top var(--vp-t-color)}@media (max-width: 959px){.vp-page-nav{padding-right:1rem;padding-left:1rem}}@media print{.vp-page-nav{display:none}}.vp-page-nav .route-link{display:inline-block;flex-grow:1;margin:.25rem;padding:.25rem .5rem;border:1px solid var(--vp-c-gutter);border-radius:.25rem}.vp-page-nav .route-link:hover{background:var(--vp-c-control)}.vp-page-nav .route-link .hint{color:var(--vp-c-text-mute);font-size:.875rem;line-height:2}.vp-page-nav .prev{text-align:start}.vp-page-nav .next{text-align:end}.vp-page{display:block;padding-top:var(--navbar-height);padding-bottom:2rem;padding-left:var(--sidebar-width)}@media (max-width: 959px){.vp-page{padding-left:var(--sidebar-width-mobile)}}@media (max-width: 719px){.vp-page{padding-left:0}}.vp-page .theme-default-content{max-width:var(--content-width);margin:0 auto;padding:2rem 2.5rem}@media (max-width: 959px){.vp-page .theme-default-content{padding:2rem}}@media (max-width: 419px){.vp-page .theme-default-content{padding:1.5rem}}.vp-page .theme-default-content{padding-top:0}.vp-sidebar-item{border-left:.25rem solid transparent;color:var(--vp-c-text);cursor:default}.vp-sidebar-item:focus-visible{outline-width:1px;outline-offset:-1px}.vp-sidebar-item.vp-sidebar-heading{box-sizing:border-box;width:100%;margin:0;padding:.35rem 1.5rem .35rem 1.25rem;font-weight:700;font-size:1.1em;transition:color .15s ease}.vp-sidebar-item.vp-sidebar-heading+.vp-sidebar-children{overflow:hidden;transition:height .1s ease-out;margin-bottom:.75rem}.vp-sidebar-item.collapsible{cursor:pointer}.vp-sidebar-item:not(.vp-sidebar-heading){display:inline-block;box-sizing:border-box;width:100%;margin:0;padding:.35rem 1rem .35rem 2rem;font-weight:400;font-size:1em;line-height:1.4}.vp-sidebar-item:not(.vp-sidebar-heading)+.vp-sidebar-children{padding-left:1rem;font-size:.95em}.vp-sidebar-children .vp-sidebar-children .vp-sidebar-item:not(.vp-sidebar-heading){padding:.25rem 1rem .25rem 1.75rem}.vp-sidebar-children .vp-sidebar-children .vp-sidebar-item:not(.vp-sidebar-heading).active{border-left-color:transparent;font-weight:500}a.vp-sidebar-heading+.vp-sidebar-children .vp-sidebar-item:not(.vp-sidebar-heading).active{border-left-color:transparent}.vp-sidebar-item.active:not(p.vp-sidebar-heading){border-left-color:var(--vp-c-accent);color:var(--vp-c-accent);font-weight:600}a.vp-sidebar-item{cursor:pointer}a.vp-sidebar-item:hover{color:var(--vp-c-accent)}.vp-sidebar-items{margin:0;padding:1.5rem 0;list-style-type:none}@media (max-width: 719px){.vp-sidebar-items{padding:1rem 0}}.vp-sidebar-items ul{margin:0;padding:0;list-style-type:none}.vp-sidebar-items a{display:inline-block}.vp-sidebar{position:fixed;top:var(--navbar-height);bottom:0;left:0;z-index:10;overflow-y:auto;box-sizing:border-box;width:var(--sidebar-width);margin:0;border-right:1px solid var(--vp-c-border);background-color:var(--vp-sidebar-c-bg);font-size:16px;transition:transform var(--vp-t-transform),background-color var(--vp-t-color),border-color var(--vp-t-color);scrollbar-color:var(--vp-c-accent-bg) var(--vp-c-gutter);scrollbar-width:thin}@media (max-width: 959px){.vp-sidebar{width:var(--sidebar-width-mobile);font-size:15px}}@media (max-width: 719px){.vp-sidebar{top:0;padding-top:var(--navbar-height);transform:translate(-100%)}}.vp-sidebar::-webkit-scrollbar{width:7px}.vp-sidebar::-webkit-scrollbar-track{background-color:var(--vp-c-gutter)}.vp-sidebar::-webkit-scrollbar-thumb{background-color:var(--vp-c-accent-bg)}.vp-sidebar .vp-navbar-items{display:none;padding:.5rem 0 .75rem;border-bottom:1px solid var(--vp-c-gutter);transition:border-color var(--vp-t-color)}@media (max-width: 719px){.vp-sidebar .vp-navbar-items{display:block}.vp-sidebar .vp-navbar-items .vp-navbar-dropdown-item a.route-link-active:after{top:calc(1rem - 2px)}}.vp-sidebar .vp-navbar-items ul{margin:0;padding:0;list-style-type:none}.vp-sidebar .vp-navbar-items a{font-weight:600}.vp-sidebar .vp-navbar-item{display:block;padding:.5rem 0 .5rem 1.5rem;font-size:1.1em;line-height:1.25rem}.vp-sidebar-mask{position:fixed;top:0;left:0;z-index:9;display:none;width:100vw;height:100vh}.vp-theme-container.no-navbar .vp-sidebar{top:0}@media (max-width: 719px){.vp-theme-container.no-navbar .vp-sidebar{padding-top:0}}.vp-theme-container.no-navbar .vp-page{padding-top:0}.vp-theme-container.no-navbar .theme-default-content h1,.vp-theme-container.no-navbar .theme-default-content h2,.vp-theme-container.no-navbar .theme-default-content h3,.vp-theme-container.no-navbar .theme-default-content h4,.vp-theme-container.no-navbar .theme-default-content h5,.vp-theme-container.no-navbar .theme-default-content h6{margin-top:1.5rem;padding-top:0}.vp-theme-container.no-sidebar .vp-sidebar{display:none}@media (max-width: 719px){.vp-theme-container.no-sidebar .vp-sidebar{display:block}}.vp-theme-container.no-sidebar .vp-page{padding-left:0}@media (max-width: 719px){.vp-theme-container.sidebar-open .vp-sidebar{transform:translate(0)}.vp-theme-container.sidebar-open .vp-sidebar-mask{display:block}}.fade-slide-y-enter-active{transition:all .2s ease}.fade-slide-y-leave-active{transition:all .2s cubic-bezier(1,.5,.8,1)}.fade-slide-y-enter-from,.fade-slide-y-leave-to{opacity:0;transform:translateY(10px)}.vp-theme-container[data-v-67c08c1d]{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width: 959px){.vp-theme-container[data-v-67c08c1d]{padding:2rem}}:root{--vp-c-white: #fff;--vp-c-black: #000;--vp-c-grey-text: #656869;--vp-c-grey-hover: #e4e4e9;--vp-c-grey-bg: #ebebef;--vp-c-grey-soft: rgb(142 150 170 / 14%);--vp-c-indigo-text: #3451b2;--vp-c-indigo-hover: #3a5ccc;--vp-c-indigo-bg: #5672cd;--vp-c-indigo-soft: rgb(100 108 255 / 14%);--vp-c-purple-text: #6f42c1;--vp-c-purple-hover: #7e4cc9;--vp-c-purple-bg: #8e5cd9;--vp-c-purple-soft: rgb(159 122 234 / 14%);--vp-c-blue-text: #2888a7;--vp-c-blue-hover: #2d98ba;--vp-c-blue-bg: #2fa1c5;--vp-c-blue-soft: rgb(27 178 229 / 14%);--vp-c-green-text: #18794e;--vp-c-green-hover: #299764;--vp-c-green-bg: #30a46c;--vp-c-green-soft: rgb(16 185 129 / 14%);--vp-c-yellow-text: #915930;--vp-c-yellow-hover: #946300;--vp-c-yellow-bg: #c28100;--vp-c-yellow-soft: rgb(234 179 8 / 14%);--vp-c-red-text: #b8272c;--vp-c-red-hover: #d5393e;--vp-c-red-bg: #e0575b;--vp-c-red-soft: rgb(244 63 94 / 14%)}[data-theme=dark]{--vp-c-white: #000;--vp-c-black: #fff;--vp-c-grey-text: #939499;--vp-c-grey-hover: #414853;--vp-c-grey-bg: #32363f;--vp-c-grey-soft: rgb(101 117 133 / 16%);--vp-c-indigo-text: #a8b1ff;--vp-c-indigo-hover: #5c73e7;--vp-c-indigo-bg: #3e63dd;--vp-c-indigo-soft: rgb(100 108 255 / 16%);--vp-c-blue-text: #c9e8f2;--vp-c-blue-hover: #a6d9ea;--vp-c-blue-bg: #2785a3;--vp-c-blue-soft: rgb(27 178 229 / 16%);--vp-c-purple-text: #c8abfa;--vp-c-purple-hover: #a879e6;--vp-c-purple-bg: #8e5cd9;--vp-c-purple-soft: rgb(159 122 234 / 16%);--vp-c-green-text: #3dd68c;--vp-c-green-hover: #30a46c;--vp-c-green-bg: #298459;--vp-c-green-soft: rgb(16 185 129 / 16%);--vp-c-yellow-text: #f9b44e;--vp-c-yellow-hover: #da8b17;--vp-c-yellow-bg: #a46a0a;--vp-c-yellow-soft: rgb(234 179 8 / 16%);--vp-c-red-text: #f66f81;--vp-c-red-hover: #f14158;--vp-c-red-bg: #b62a3c;--vp-c-red-soft: rgb(244 63 94 / 16%)}:root{color-scheme:light}[data-theme=dark]{color-scheme:dark}html,body{background:var(--vp-c-bg, #fff);accent-color:var(--vp-c-accent, #299764);transition:background-color var(--vp-t-color)}html{font-size:16px;font-display:optional;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}@media print{html{font-size:12pt}}html[data-theme=dark]{color-scheme:dark}body{min-height:100vh;margin:0;padding:0;color:var(--vp-c-text, rgb(60, 60, 67));font-size:1rem;font-synthesis:style}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25;overflow-wrap:break-word}h1:focus-visible,h2:focus-visible,h3:focus-visible,h4:focus-visible,h5:focus-visible,h6:focus-visible{outline:none}h1{font-size:2rem}h2{padding-bottom:.3rem;border-bottom:1px solid var(--vp-c-gutter, #e2e2e3);font-size:1.65rem;transition:border-color var(--vp-t-color)}h3{font-size:1.35rem}h4{font-size:1.15rem}h5{font-size:1.05rem}h6{font-size:1rem}p,ul,ol{line-height:1.6;overflow-wrap:break-word}@media print{p,ul,ol{line-height:1.5}}ul,ol{padding-inline-start:1.2em}a{color:var(--vp-c-accent, #299764);font-weight:500;text-decoration:none;overflow-wrap:break-word}a.header-anchor{position:relative;color:inherit;text-decoration:none}a.header-anchor:before{content:"¶";position:absolute;top:.4167em;left:-.75em;display:none;color:var(--vp-c-accent, #299764);font-size:.75em}[dir=rtl] a.header-anchor:before{right:-.75em}a.header-anchor:hover:before{display:block}a.header-anchor:focus-visible{outline:none}a.header-anchor:focus-visible:before{display:block;outline:auto}strong{font-weight:600}blockquote{margin:1rem 0;padding:.25rem 0 .25rem 1rem;border-inline-start:.2rem solid var(--vp-c-border-hard, #b8b8ba);color:var(--vp-c-text-mute, rgba(60, 60, 67, .78));font-size:1rem;overflow-wrap:break-word;transition:border-color var(--vp-t-color),color var(--vp-t-color)}blockquote>p{margin:0}hr{border:0;border-bottom:1px solid var(--vp-c-gutter, #e2e2e3);transition:border-color var(--vp-t-color)}:not(pre)>code{margin:0;padding:3px 6px;border-radius:4px;background:var(--vp-c-grey-soft, rgba(142, 150, 170, .14));font-size:.875em;overflow-wrap:break-word;transition:background-color var(--vp-t-color),color var(--vp-t-color)}p a code{color:var(--vp-c-accent, #299764);font-weight:400}table code{padding:.1rem .4rem}kbd{display:inline-block;min-width:1em;margin-inline:.125rem;padding:.25em;border:1px solid var(--vp-c-border, #c2c2c4);border-radius:.25em;box-shadow:1px 1px 4px 0 var(--vp-c-shadow, rgba(0, 0, 0, .15));line-height:1;letter-spacing:-.1em;text-align:center}table{display:block;overflow-x:auto;margin:1rem 0;border-collapse:collapse}tbody tr:nth-child(odd){background:var(--vp-c-bg-alt, #f6f8fa);transition:background-color var(--vp-t-color)}th,td{padding:.6em 1em;border:1px solid var(--vp-c-border-hard, #d1d4d7);transition:border-color var(--vp-t-color)}pre{text-align:left;direction:ltr;white-space:pre;word-spacing:normal;word-wrap:normal;word-break:normal;overflow-wrap:unset;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}@media print{pre{white-space:pre-wrap}}pre code{padding:0;border-radius:0}@page{margin:2cm;font-size:12pt;size:a4}@media print{*,:after,:before{box-shadow:none!important;text-shadow:none!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}a{color:inherit;font-weight:inherit!important;font-size:inherit!important;text-decoration:underline}a.header-anchor{text-decoration:none}abbr[title]:after{content:" (" attr(title) ")"}pre{border:1px solid #eee;white-space:pre-wrap!important}pre>code{white-space:pre-wrap!important}blockquote{border-inline-start:.2rem solid #ddd;color:inherit}blockquote,pre{orphans:5;widows:5}img,tr,canvas{page-break-inside:avoid}}@media (prefers-reduced-motion: reduce){*,:before,:after{background-attachment:initial!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important}}:root{--vp-c-accent: #299764;--vp-c-accent-bg: #3eaf7c;--vp-c-accent-hover: #4abf8a;--vp-c-accent-text: var(--vp-c-white);--vp-c-accent-soft: rgb(16 185 129 / 14%);--vp-c-bg: #fff;--vp-c-bg-alt: #f6f6f7;--vp-c-bg-elv: #fff;--vp-c-text: rgb(60 60 67);--vp-c-text-mute: rgb(60 60 67 / 78%);--vp-c-text-subtle: rgb(60 60 67 / 56%);--vp-c-gutter: #e2e2e3;--vp-c-border: #c2c2c4;--vp-c-border-hard: #b8b8ba;--vp-c-shadow: rgb(0 0 0 / 15%);--vp-c-control: rgb(142 150 170 / 10%);--vp-c-control-hover: rgb(142 150 170 / 16%);--vp-c-control-disabled: #eaeaea;--vp-navbar-c-bg: var(--vp-c-bg);--vp-sidebar-c-bg: var(--vp-c-bg);--vp-c-code-tab-title: var(--code-c-text, rgb(255 255 255 / 90%));--vp-c-code-tab-bg: var(--code-bg-color, var(--code-c-bg));--vp-c-code-tab-active: var(--vp-c-accent);--badge-c-tip-text: var(--vp-c-green-text);--badge-c-tip-bg: var(--vp-c-green-soft);--badge-c-warning-text: var(--vp-c-yellow-text);--badge-c-warning-bg: var(--vp-c-yellow-soft);--badge-c-danger-text: var(--vp-c-red-text);--badge-c-danger-bg: var(--vp-c-red-soft);--badge-c-important-text: var(--vp-c-purple-text);--badge-c-important-bg: var(--vp-c-purple-soft);--badge-c-info-text: var(--vp-c-indigo-text);--badge-c-info-bg: var(--vp-c-indigo-soft);--badge-c-note-text: var(--vp-c-grey-text);--badge-c-note-bg: var(--vp-c-grey-soft);--font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--navbar-height: 3.6rem;--navbar-padding-v: .7rem;--navbar-padding-h: 1.5rem;--sidebar-width: 20rem;--sidebar-width-mobile: calc(var(--sidebar-width) * .82);--content-width: 740px;--homepage-width: 960px;--header-offset: var(--navbar-height);--vp-t-color: .3s ease;--vp-t-transform: .3s ease;--external-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z'/%3E%3C/svg%3E");--external-link-c-icon: var(--vp-c-text-mute)}[data-theme=dark]{--vp-c-accent: #3dd68c;--vp-c-accent-bg: #3aa675;--vp-c-accent-hover: #349469;--vp-c-accent-soft: rgb(16 185 129 / 16%);--vp-c-bg: #1b1b1f;--vp-c-bg-alt: #161618;--vp-c-bg-elv: #202127;--vp-c-text: rgb(235 235 245 / 86%);--vp-c-text-mute: rgb(235 235 245 / 60%);--vp-c-text-subtle: rgb(235 235 245 / 38%);--vp-c-gutter: #000;--vp-c-border: #3c3f44;--vp-c-border-hard: #45484e;--vp-c-shadow: rgb(0 0 0 / 30%);--vp-c-control: rgb(101 117 133 / 12%);--vp-c-control-hover: rgb(101 117 133 / 18%);--vp-c-control-disabled: #363636}body{font-family:var(--font-family)}code{font-family:var(--code-font-family)}.theme-default-content h1,.theme-default-content h2,.theme-default-content h3,.theme-default-content h4,.theme-default-content h5,.theme-default-content h6{margin-top:calc(.5rem - var(--header-offset));margin-bottom:0;padding-top:calc(1rem + var(--header-offset))}.theme-default-content h1:first-child,.theme-default-content h2:first-child,.theme-default-content h3:first-child,.theme-default-content h4:first-child,.theme-default-content h5:first-child,.theme-default-content h6:first-child{margin-bottom:1rem}.theme-default-content h1:first-child+p,.theme-default-content h1:first-child+pre,.theme-default-content h1:first-child+.custom-container,.theme-default-content h2:first-child+p,.theme-default-content h2:first-child+pre,.theme-default-content h2:first-child+.custom-container,.theme-default-content h3:first-child+p,.theme-default-content h3:first-child+pre,.theme-default-content h3:first-child+.custom-container,.theme-default-content h4:first-child+p,.theme-default-content h4:first-child+pre,.theme-default-content h4:first-child+.custom-container,.theme-default-content h5:first-child+p,.theme-default-content h5:first-child+pre,.theme-default-content h5:first-child+.custom-container,.theme-default-content h6:first-child+p,.theme-default-content h6:first-child+pre,.theme-default-content h6:first-child+.custom-container{margin-top:2rem}@media (max-width: 419px){.theme-default-content h1{font-size:1.9rem}}.theme-default-content a:not(.header-anchor){text-decoration:underline}.theme-default-content img{max-width:100%}div[class*=language-]{margin:.75rem 0;transition:background-color var(--vp-t-color),color var(--vp-t-color)}@media (max-width: 419px){div[class*=language-]{--code-border-radius: 0;margin:.75rem -1.5rem}}div[class*=language-] .line.diff,div[class*=language-] .line.highlighted{transition:background-color var(--vp-t-color)}.table-of-contents .vp-badge{vertical-align:middle}.arrow{display:inline-block;vertical-align:middle;width:1em;height:1em;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(0,0,0,0.5)' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;line-height:normal;transition:all .3s}[data-theme=dark] .arrow{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E")}.arrow.down{transform:rotate(180deg)}.arrow.right{transform:rotate(90deg)}.arrow.left{transform:rotate(-90deg)}.vp-external-link-icon:after{content:"";display:inline-block;flex-shrink:0;width:11px;height:11px;margin-top:-1px;margin-left:4px;background:var(--external-link-c-icon);-webkit-mask-image:var(--external-link-icon);mask-image:var(--external-link-icon)}.external-link-icon .external-link:after{content:"";display:inline-block;flex-shrink:0;width:11px;height:11px;margin-top:-1px;margin-left:4px;background:var(--external-link-c-icon);-webkit-mask-image:var(--external-link-icon);mask-image:var(--external-link-icon)}.external-link-icon .theme-default-content a[href*="://"]:not(.no-external-link-icon):after,.external-link-icon .theme-default-content a[target=_blank]:not(.no-external-link-icon):after{content:"";display:inline-block;flex-shrink:0;width:11px;height:11px;margin-top:-1px;margin-left:4px;background:var(--external-link-c-icon);-webkit-mask-image:var(--external-link-icon);mask-image:var(--external-link-icon)}@media screen and (max-width: 719px){.vp-hide-mobile{display:none}}.vp-comment{max-width:var(--content-width);margin:0 auto;padding:2rem 2.5rem}@media (max-width: 959px){.vp-comment{padding:2rem}}@media (max-width: 419px){.vp-comment{padding:1.5rem}}.vp-navbar .DocSearch{transition:background-color var(--vp-t-color)}.vp-navbar .search-box{vertical-align:top;flex:0 0 auto}@media screen and (max-width: 719px){.hint-container{margin-inline:-.75rem}}:root{--c-brand: #920097;--c-brand-light: #faaffd}html.dark{--c-brand: #920097;--c-brand-light: #faaffd}iframe{width:100%} diff --git a/assets/template-DXB9rnv0.png b/assets/template-DXB9rnv0.png new file mode 100644 index 0000000..60da74a Binary files /dev/null and b/assets/template-DXB9rnv0.png differ diff --git a/assets/toolbox-DbC4d27p.png b/assets/toolbox-DbC4d27p.png new file mode 100644 index 0000000..54af85e Binary files /dev/null and b/assets/toolbox-DbC4d27p.png differ diff --git a/assets/uml-CgIVGHo2.png b/assets/uml-CgIVGHo2.png new file mode 100644 index 0000000..b06dfac Binary files /dev/null and b/assets/uml-CgIVGHo2.png differ diff --git a/assets/welcomescreen-fw1_MuGU.png b/assets/welcomescreen-fw1_MuGU.png new file mode 100644 index 0000000..dcbfcca Binary files /dev/null and b/assets/welcomescreen-fw1_MuGU.png differ diff --git a/configure/index.html b/configure/index.html new file mode 100644 index 0000000..8e64c16 --- /dev/null +++ b/configure/index.html @@ -0,0 +1,240 @@ + + + + + + + + + Configure KMP + + + + + +

Configure KMP

Fleet IDE is the dedicated IDE to consider for KMP developpement with exclusive features such as better preview management

Simply download it thanks to Jetbrain ToolBox Apptoolbox

Use Android Studio

It is also possible to use Android Studio IDE with latest stable version koala version or above. You can do the following to prepare it to support KMP

For macOS devs only,kdoctor command line interface (CLI) is available. It will help you to ensure that your computer is correctly configured for KMP development.

brew install kdoctor
+kdoctor
+

🧪 Download the initial project

Initial project sources

For your hand-on lab today, you can download the initial project by downloading KMP official sample for Android, iOS and Desktop & Web here: kmp.jetbrains.com

  • Select : ☑️ Android ☑️ iOS ☑️ Desktop ☑️ Web
  • Download the zip project
  • Open it with Fleet

template

📚 A Guided tour of the sample project

Project Structure

The gradle plugin of Kotlin Multiplatform ( KMP ) organize the code thanks to 2 essential notion of Gradle/Java :

  • A Module is a set of classes and packages that form a complete whole with a build description file build.gradle. Modules have been introduced to improve safety and to make the platform more modular.
  • A Source sets give us a powerful way to structure source code in our Gradle projects. A SourceSet represents a logical group of Kotlin source and resource files.

project_structure.png

1 - composeApp module : The crossplatform library module

A shared library module linked to all project platforms. It contains the source code common to all your supported platforms.

2 - commonMain sourceSet : Shared & multiplatform Kotlin source files

This is the place where you will code all your cross platform composables.

On the sample, your first composable function App() is already configured with a single button that display an image with a standard animation on click.

App.kt
@Composable
+@Preview
+fun App() {
+    MaterialTheme {
+        var showContent by remember { mutableStateOf(false) }
+        Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
+            Button(onClick = { showContent = !showContent }) {
+                Text("Click me!")
+            }
+            AnimatedVisibility(showContent) {
+                val greeting = remember { Greeting().greet() }
+                Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
+                    Image(painterResource(Res.drawable.compose_multiplatform), null)
+                    Text("Compose: $greeting")
+                }
+            }
+        }
+    }
+}
+

3 - androidMain, desktopMain, iosMain, wasmJsMain sourceSets: KMP specific library modules

One submodule per platform, linked to the common module sources. It gives the possibility to make specific implementations of functions per platform

Platform specific source file

When you need a specific implementation for Android and iOS of getPlatform() to return the platform name, KMP uses :

  • expect keyword on the KMP shared library (commonMain) before functions indicating that we need a specific implementation of this function
  • actual keywords on the KMP shared library specific modules (iosMain, androidMain) before functions to indicate the implementation.

For exemple on this specific template, a getPlatformName fuction is referenced on the common code and implemented specificly on each sourceset with the right platform name

platform.kt (SourceSet : commonMain)
expect fun getPlatform(): Platform
+
Platform.desktop.kt (SourceSet : desktopMain)
actual fun getPlatformName(): String = "Desktop"
+
Platform.android.kt (SourceSet : androidMain)
actual fun getPlatformName(): String = "Android"
+
Platform.ios.kt(SourceSet : iosMain)
actual fun getPlatformName(): String = "iOS"
+

More Information

On each platform sourceSet (androidMain, desktopMain, iosMain, wasmJsMain) , you can call native SDK function wrapped in Kotlin.

Ex: on Platform.ios.kt a UIDevice function is called :

UIDevice.currentDevice.systemName()
+

More information about platform specific functions in KMP here)

Platform specific composables

On this template a wrapper is used to use the root multiplatform composable App() on each specific sourceSet Mainclass :

  • onCreate callback of an Activity for Android
  • A ViewController class for iOS
  • ... Then you can code and declare your composables on the App() composable to code multiplatform.

For Desktop (DesktopMain)

main.desktop.kt(SourceSet : desktopMain)
fun main() = application {
+    Window(
+        onCloseRequest = ::exitApplication,
+        title = "Quiz",
+    ) {
+        App()
+    }
+}
+

For Android (AndroidMain)

The Android app declaration with ressouces, manifest and activities A MainView android composable is created from the App() composable.

main.android.kt (SourceSet : androidMain)
@Composable fun MainView() = App()
+

Then the composable is declared on the activity.

MainActivity.kt (androidApp)
class MainActivity : ComponentActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+
+        setContent {
+            App()
+        }
+    }
+}
+

4. for iOS (IosMain)

For iOSApp project you can open the .xcodeproj with Xcode for completion, build specific configurations

It's the same principles, a swift MainViewController that is created from the composable App()

main.ios.kt(SourceSet : iosMain)
fun MainViewController() = ComposeUIViewController { App() }
+

Then on the .xcodeproj, ContentView.swift convert the MainViewController into a swiftUI view.

ContentView.swift (iosApp)
...
+struct ComposeView: UIViewControllerRepresentable {
+    func makeUIViewController(context: Context) -> UIViewController {
+        MainViewControllerKt.MainViewController()
+    }
+
+    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
+}
+
+struct ContentView: View {
+    var body: some View {
+        ComposeView()
+                .ignoresSafeArea(.keyboard) // Compose has own keyboard handler
+    }
+}
+...
+

With those configuration you can now develop your composable in the commonMain SourceSet and deploy your app for Android, iOS and Destop targets

🧪 Deploy your apps

To defines gradle configuration for deploying your development apps, you need to create a running configuration for fleet by creating a run.jsonfile in .fleetfolder.

.fleet/run.json
{
+    "configurations": [
+
+        {
+            "name": "composeApp",
+            "type": "gradle",
+            "workingDir": "$PROJECT_DIR$",
+            "tasks": [":server:classes"],
+            "initScripts": {
+                "flmapper": "ext.mapPath = { path -> path }",
+                "Build learning-kotlin-multiplatform-src": "System.setProperty('org.gradle.java.compile-classpath-packaging', 'true')"
+            }
+        },
+        {
+            "name": "server",
+            "type": "jps-run",
+            "workingDir": "$PROJECT_DIR$",
+            "dependsOn": ["composeApp"],
+            "mainClass": "com.worldline.quiz.ApplicationKt",
+            "module": "Quiz.server.main",
+            "options": ["-Dfile.encoding=UTF-8"]
+        },
+        {
+            "name": "iOS",
+            "type": "xcode-app",
+            "workingDir": "$PROJECT_DIR$",
+            "allowParallelRun": true,
+            "buildTarget": {
+                "project": "iosApp",
+                "target": "iosApp"
+            },
+            "configuration": "Debug"
+        },
+        {
+            "name": "wasmJs",
+            "type": "gradle",
+            "workingDir": "$PROJECT_DIR$",
+            "tasks": ["wasmJsBrowserDevelopmentRun"],
+            "args": ["-p", "$PROJECT_DIR$/composeApp"],
+            "initScripts": {
+                "flmapper": "ext.mapPath = { path -> path }"
+            }
+        },
+        {
+            "name": "android",
+            "type": "android-app",
+            "workingDir": "$PROJECT_DIR$",
+            "allowParallelRun": true,
+            "module": "quiz.composeApp.main"
+        },
+        {
+            "name": "Desktop",
+            "type": "gradle",
+            "workingDir": "$PROJECT_DIR$",
+            "tasks": ["desktopRun"],
+            "args": ["-DmainClass=com.worldline.quiz.MainKt", "--quiet", "-p", "$PROJECT_DIR$/composeApp"],
+            "initScripts": {
+                "flmapper": "ext.mapPath = { path -> path }"
+            }
+        }
+    ]
+}
+

Instead, if you want to use gradle tasks , here are some examples :

./gradlew desktopRun #Desktop
+./gradlew wasmJsBrowserDevelopmentRun #Web
+

CORS issue for Web target

For the Web App, you can bypass CORS issue if you don't have a remote server with Chrome as below:

<google chrome path> --disable-web-security --user-data-dir=/Users/xxxx/Desktop/googlechrometmp http://localhost:8080/
+

Running configuration

run

hello desktop

Version Catalog

A version catalog is a list of dependencies, represented as dependency coordinates, that a user can pick from when declaring dependencies in a build script.

gradle/libs.versions.toml

+[versions]
+# KMP AGP/GRADLE compatibility guide
+# https://wrl.li/guideagp
+kotlin = "2.0.20"
+agp = "8.5.0"
+compose-plugin = "1.7.0-rc01"
+
+androidx-activityCompose = "1.9.2"
+navigation = "2.8.0-alpha10"
+androidx-lifecycle = "2.8.0"
+kotlinxCoroutinesCore="1.9.0"
+
+kotlinx-coroutines = "1.8.1"
+kotlinxDatetime = "0.6.1"
+ktorVersion = "3.0.0-rc-1"
+kstore = "0.8.0"
+logback = "1.5.8"
+
+android-compileSdk = "34"
+android-minSdk = "24"
+android-targetSdk = "34"
+
+[libraries]
+androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activityCompose" }
+
+androidx-lifecycle-viewmodel = { group = "org.jetbrains.androidx.lifecycle", name = "lifecycle-viewmodel", version.ref = "androidx-lifecycle" }
+androidx-lifecycle-runtime-compose = { group = "org.jetbrains.androidx.lifecycle", name = "lifecycle-runtime-compose", version.ref = "androidx-lifecycle" }
+
+kotlinx-coroutines-swing = { group = "org.jetbrains.kotlinx", name = "kotlinx-coroutines-swing", version.ref = "kotlinx-coroutines" }
+kotlinx-coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "kotlinxCoroutinesCore" }
+
+
+
+kotlin-navigation = { module = "org.jetbrains.androidx.navigation:navigation-compose", version.ref = "navigation" }
+kotlinx-datetime = { module = "org.jetbrains.kotlinx:kotlinx-datetime", version.ref = "kotlinxDatetime" }
+
+ktor-serialization-kotlinx-json = { module = "io.ktor:ktor-serialization-kotlinx-json", version.ref = "ktorVersion" }
+ktor-client-core = { module = "io.ktor:ktor-client-core", version.ref = "ktorVersion" }
+ktor-client-content-negotiation = { module = "io.ktor:ktor-client-content-negotiation", version.ref = "ktorVersion" }
+ktor-client-okhttp = { module = "io.ktor:ktor-client-okhttp", version.ref = "ktorVersion" }
+ktor-client-apache = { module = "io.ktor:ktor-client-apache", version.ref = "ktorVersion" }
+ktor-client-darwin = { module = "io.ktor:ktor-client-darwin", version.ref = "ktorVersion" }
+
+
+#kstore
+kstore = { module = "io.github.xxfast:kstore", version.ref = "kstore" }
+kstore-file = { module = "io.github.xxfast:kstore-file", version.ref = "kstore" }
+kstore-storage = { module = "io.github.xxfast:kstore-storage", version.ref = "kstore" }
+
+# Web
+#ktor-client-js = { module = "io.ktor:ktor-client-js", version.ref = "ktorVersion" }
+
+# Server
+ktor-server-core = { module = "io.ktor:ktor-server-core-jvm", version.ref = "ktorVersion" }
+ktor-server-cio = { module = "io.ktor:ktor-server-cio", version.ref = "ktorVersion" }
+ktor-server-content-negotiation = { module = "io.ktor:ktor-server-content-negotiation", version.ref = "ktorVersion" }
+ktor-server-config-yaml = { module = "io.ktor:ktor-server-config-yaml", version.ref = "ktorVersion" }
+ktor-server-cors = { module = "io.ktor:ktor-server-cors", version.ref = "ktorVersion" }
+logback = { module = "ch.qos.logback:logback-classic", version.ref = "logback" }
+
+[plugins]
+androidApplication = { id = "com.android.application", version.ref = "agp" }
+androidLibrary = { id = "com.android.library", version.ref = "agp" }
+jetbrainsCompose = { id = "org.jetbrains.compose", version.ref = "compose-plugin" }
+compose-compiler = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
+kotlinMultiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }
+kotlinSerialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }
+kotlinJvm = { id = "org.jetbrains.kotlin.jvm", version.ref = "kotlin" }
+ktor = { id = "io.ktor.plugin", version.ref = "ktorVersion" }
+
+

Basic logging

A logger is provided by [Ktor client library] (https://ktor.io/docs/logging.html) for basic logs.

More advanced logging and debugging

Use can have more advanced logging and debugging thanks to third party libs such as NSExceptionKT or CrachKiOS or Kermit or Napier

✅ If everything is fine, go to the next chapter →

📖 Further reading

Last Updated:
Contributors: Ibrahim Gharbi, A187839
+ + + diff --git a/database/index.html b/database/index.html new file mode 100644 index 0000000..4feb33f --- /dev/null +++ b/database/index.html @@ -0,0 +1,257 @@ + + + + + + + + + (Local Database) + + + + + +

(Local Database)

Deprecated section

SQL delight is for now no more compatible with the new default WASM template for WebApp application.

If you still want to use it you can revert to the old Js(IR) template.

Notice that for now this is the only Web target compatible database library for KMP

SQLDelight generates typesafe Kotlin APIs from your SQL statements. It verifies your schema, statements, and migrations at compile-time and provides IDE features like autocomplete and refactoring which make writing and maintaining SQL simple.

SQLDelight understands your existing SQL schema.

CREATE TABLE hockey_player (
+  id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+  name TEXT NOT NULL,
+  number INTEGER NOT NULL
+);
+

It generates typesafe code for any labeled SQL statements.

Warning

Be carefull with SQL Delight , the project and his dependancies just move from com.squareup.sqldelight.* to app.cash.sqldelight.*

Pay attention also with beta, alpha version of Android studio that could produce bugs on gradle task management for code generation of SQL Delight databases.

🧪 Add sqldelight db to your quizz

Refer to the multiplatform implementation of SQLDelight in official Github pages 👉 https://cashapp.github.io/sqldelight/2.0.0/multiplatform_sqlite/

Add the correct dependancies to the project

plugins {
+...
+    id("app.cash.sqldelight") version "2.0.0"
+}
+...
+ sourceSets {
+        val commonMain by getting {
+            dependencies {
+              ...
+                implementation("app.cash.sqldelight:runtime:2.0.0")
+                implementation("app.cash.sqldelight:coroutines-extensions:2.0.0")
+                implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.4.1")
+
+            }
+        }
+        val androidMain by getting {
+            dependencies {
+               ...
+                implementation("app.cash.sqldelight:android-driver:2.0.0")
+
+            }
+        }
+    ...
+        val iosMain by creating {
+         ...
+            dependencies {
+                ...
+                implementation("app.cash.sqldelight:native-driver:2.0.0")
+            }
+        }
+        val desktopMain by getting {
+            dependencies {
+               ...
+                implementation("app.cash.sqldelight:sqlite-driver:2.0.0")
+            }
+        }
+        ...
+

Create the native SQL driver factory and use it for creating the DB with actual/expect kotlin keywords

Read carefully the modelisation UML below

diagram SQL

Create you SQLDelight model 'QuizDatabase.sq'

Create your Database datasource by generating insert and update suspending functions

Update your repository by instanciating your database

Your repository handle the following cases :

  • If there is no network and it's the first time launch of the app : handle and error
  • if there is no network and you have db datas : return on the flow the db data
  • if there is network and db data are younger than 5 min : return on the flow the db data
  • if there is network and db data are older than 5 min : retourn on the flow the network data and reset db data

🎯 Solutions

QuizDatabase.sq (ressources of commonMain)*
CREATE TABLE update_time (
+     timestamprequest INTEGER
+);
+
+INSERT INTO update_time(timestamprequest) VALUES (0);
+
+CREATE TABLE questions (
+    id INTEGER PRIMARY KEY,
+    label TEXT NOT NULL,
+    correctAnswerId INTEGER  NOT NULL
+ );
+
+
+ CREATE TABLE answers (
+    id INTEGER NOT NULL,
+    label TEXT NOT NULL,
+    question_id INTEGER NOT NULL,
+    PRIMARY KEY (id, question_id),
+    FOREIGN KEY (question_id)
+      REFERENCES questions (id)
+          ON UPDATE CASCADE
+          ON DELETE CASCADE
+ );
+
+
+
+ selectUpdateTimestamp:
+ SELECT *
+ FROM update_time;
+
+ insertTimeStamp:
+ INSERT INTO update_time(timestamprequest)
+ VALUES (:timestamp);
+
+ deleteTimeStamp:
+ DELETE FROM update_time;
+
+ deleteQuestions:
+ DELETE FROM questions;
+
+ deleteAnswers:
+ DELETE FROM answers;
+
+
+ selectAllQuestionsWithAnswers:
+ SELECT *
+ FROM questions
+ INNER JOIN answers ON questions.id = answers.question_id;
+
+ insertQuestion:
+ INSERT INTO questions(id, label,correctAnswerId)
+ VALUES (?, ?, ?);
+
+ insertAnswer:
+ INSERT INTO answers(id, label,question_id)
+ VALUES (?, ?, ?);
+
+
network/QuizDB.kt (commonMain)
package network
+
+
+import app.cash.sqldelight.async.coroutines.awaitAsList
+import app.cash.sqldelight.async.coroutines.awaitAsOneOrNull
+import app.cash.sqldelight.db.SqlDriver
+import com.myapplication.common.cache.Database
+import kotlinx.coroutines.CoroutineScope
+import network.data.Answer
+import network.data.Question
+
+class QuizDbDataSource(private val sqlDriver: SqlDriver, private val coroutineScope: CoroutineScope) {
+
+    private  var database=Database(sqlDriver)
+    private  var quizQueries=database.quizDatabaseQueries
+
+
+    suspend fun getUpdateTimeStamp():Long = quizQueries.selectUpdateTimestamp().awaitAsOneOrNull()?.timestamprequest ?: 0L
+
+
+    suspend fun setUpdateTimeStamp(timeStamp:Long)  {
+        quizQueries.deleteTimeStamp()
+        quizQueries.insertTimeStamp(timeStamp)
+    }
+
+     suspend fun getAllQuestions(): List<Question> {
+         return quizQueries.selectAllQuestionsWithAnswers().awaitAsList()
+
+             .groupBy {it.question_id }
+             .map { (questionId, rowList) ->
+
+             Question(
+                 id = questionId,
+                 label = rowList.first().label,
+                 correctAnswerId = rowList.first().correctAnswerId,
+                 answers = rowList.map { answer ->
+                     Answer(
+                         id = answer.id_,
+                         label = answer.label_
+                     )
+                 }
+             )
+         }
+     }
+
+
+
+    suspend fun insertQuestions(questions:List<Question>) {
+        quizQueries.deleteQuestions();
+        quizQueries.deleteAnswers()
+        questions.forEach {question ->
+            quizQueries.insertQuestion(question.id, question.label, question.correctAnswerId)
+            question.answers.forEach {answer ->
+                quizQueries.insertAnswer(answer.id,answer.label,question.id)
+            }
+        }
+    }
+}
+
QuizRepository.kt
package network
+
+import app.cash.sqldelight.db.SqlDriver
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import kotlinx.datetime.Clock
+import network.data.Question
+
+
+class QuizRepository(sqlDriver: SqlDriver)  {
+
+    private val mockDataSource = MockDataSource()
+    private val quizAPI = QuizApiDatasource()
+    private val coroutineScope = CoroutineScope(Dispatchers.Main)
+    private var quizDB = QuizDbDataSource(sqlDriver,coroutineScope)
+
+    private var _questionState=  MutableStateFlow(listOf<Question>())
+    var questionState = _questionState
+
+    init {
+        updateQuiz()
+    }
+
+    private suspend fun fetchQuiz(): List<Question> = quizAPI.getAllQuestions().questions
+
+    private suspend fun fetchAndStoreQuiz(): List<Question>{
+        val questions  = fetchQuiz()
+        quizDB.insertQuestions(questions)
+        quizDB.setUpdateTimeStamp(Clock.System.now().epochSeconds)
+        return questions
+    }
+    private fun updateQuiz(){
+
+
+        coroutineScope.launch {
+            _questionState.update {
+                try {
+                    val lastRequest = quizDB.getUpdateTimeStamp()
+                    if(lastRequest == 0L || lastRequest - Clock.System.now().epochSeconds > 300000){
+                        fetchAndStoreQuiz()
+                    }else{
+                        quizDB.getAllQuestions()
+                    }
+                } catch (e: NullPointerException) {
+                    fetchAndStoreQuiz()
+                } catch (e: Exception) {
+                    e.printStackTrace()
+                    mockDataSource.generateDummyQuestionsList()
+                }
+
+            }
+        }
+    }
+}
+

More databases options

For not using SQLight ORM, you can use Realm kotlin or KStore

✅ If everything is fine, go to the next chapter →

📖 Further reading

Last Updated:
Contributors: Ibrahim Gharbi, A187839
+ + + diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..0e4322c Binary files /dev/null and b/favicon.ico differ diff --git a/icon-192x192.png b/icon-192x192.png new file mode 100644 index 0000000..45057eb Binary files /dev/null and b/icon-192x192.png differ diff --git a/icon-256x256.png b/icon-256x256.png new file mode 100644 index 0000000..2053f3a Binary files /dev/null and b/icon-256x256.png differ diff --git a/icon-384x384.png b/icon-384x384.png new file mode 100644 index 0000000..1447d28 Binary files /dev/null and b/icon-384x384.png differ diff --git a/icon-512x512.png b/icon-512x512.png new file mode 100644 index 0000000..6474ce2 Binary files /dev/null and b/icon-512x512.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..04ed6d3 --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + + + + KMP | Tech at Worldline + + + + + +
Hands-on Lab | KMP with compose

Hands-on Lab | KMP with compose

Discover Kotlin multiplatform features in practice (Android, iOS, desktop & web).

Start →

1. Configure KMP

Shared library principles for Android,iOS and Desktop jvm

2. Composables

Kotlin compose & declarative UI, state management

3. Navigation

Compose navigation, navigation hist

4. Ressources

Compose image, string , fonts, raw resources

5. Architecture

ViewModel, repository, coroutines

6. Network connectivity

Ktor client/server configuration, repository creation with flow

7. Preferences

Shared preferences, file storage

8. Database

SQLite with SQLDelight

KMP | Tech at Worldline

👍 You like the course ? Give us a star on Github ⭐

Who we are

avatar

We design payments technology that powers the growth of millions​ of businesses around the world. Engineering the next frontiers​ in payments technology​

  • Leader in payment and secured transactions. ​
  • Over 50bn transactions/year​
  • 7000+ engineers​ in over 40 countries​
  • A huge & diverse​ tech-stack

Follow trainers of this Hands-on Lab

avatar
Gharbi Ibrahim
🔗 @__brah​
🔗 cv.gharbi.org

Follow our Tech team

Worldline © 2023 | tech at Worldline
+ + + diff --git a/kotlin_logo.svg b/kotlin_logo.svg new file mode 100644 index 0000000..6d81155 --- /dev/null +++ b/kotlin_logo.svg @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/logo.png b/logo.png new file mode 100644 index 0000000..22d7a18 Binary files /dev/null and b/logo.png differ diff --git a/logo_worldline.png b/logo_worldline.png new file mode 100644 index 0000000..6981642 Binary files /dev/null and b/logo_worldline.png differ diff --git a/manifest.webmanifest b/manifest.webmanifest new file mode 100644 index 0000000..556ea3f --- /dev/null +++ b/manifest.webmanifest @@ -0,0 +1,31 @@ +{ + "theme_color": "#f635a4", + "background_color": "#e8d4f2", + "display": "standalone", + "scope": "/learning-kotlin-multiplatform/", + "start_url": "/learning-kotlin-multiplatform/index.html", + "name": "Kotlin training", + "short_name": "Kotlin training", + "icons": [ + { + "src": "icon-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "icon-256x256.png", + "sizes": "256x256", + "type": "image/png" + }, + { + "src": "icon-384x384.png", + "sizes": "384x384", + "type": "image/png" + }, + { + "src": "icon-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ] +} diff --git a/nav/index.html b/nav/index.html new file mode 100644 index 0000000..119de79 --- /dev/null +++ b/nav/index.html @@ -0,0 +1,173 @@ + + + + + + + + + Navigation + + + + + +

Navigation

🧪 Create Navigation between composable screens

Compose multiplatform navigation library enable a navigation with navigation host

Add Navigation dependency to your project

gradle.build.kts (module : composeApp)
...
+ commonMain.dependencies {
+
+            plugins {
+            ...
+                alias(libs.plugins.kotlinSerialization)
+            }
+            commonMain.dependencies {
+            ...
+            implementation(libs.kotlin.navigation)
+            implementation(libs.ktor.serialization.kotlinx.json)
+
+...
+

Create your navigation host

The navigation host is the configuration class that defines routes of your application.

Routes are path between all the composable screens that you will call later on your app.

routes overview

For this Hands-on Lab we need 3 routes for :

  • At startup to the WelcomeScreen
  • from Welcome screen to the QuizScreen
  • from the final question QuizScreento the ScoreScreen
App.kt (SourceSet: commonMain)

+...
+import kotlinx.serialization.Serializable
+
+val questions = listOf(
+    Question(
+        1,
+        "Android is a great platform ?",
+        1,
+        listOf(Answer(1, "YES"), Answer(2, "NO"))
+    ),
+    Question(
+        1,
+        "Android is a bad platform ?",
+        2,
+        listOf(Answer(1, "YES"), Answer(2, "NO"))
+    )
+)
+
+@Serializable
+object WelcomeRoute
+
+@Serializable
+object QuizRoute
+
+@Serializable
+data class ScoreRoute(val score: Int, val questionSize: Int)
+
+@Composable
+fun App(
+    navController: NavHostController = rememberNavController()
+) {
+
+    MaterialTheme {
+        NavHost(
+            navController = navController,
+            startDestination = WelcomeRoute,
+        ) {
+            composable<WelcomeRoute> {
+                welcomeScreen(
+                    onStartButtonPushed = {
+                        navController.navigate(route = QuizRoute)
+                    }
+                )
+            }
+             composable<QuizRoute> {
+                    questionScreen(
+                        questions = questions,
+                        /* FOR SPEAKER TALK DEMO ON WEB APP */
+                        onFinishButtonPushed = {
+                            score: Int, questionSize: Int -> navController.navigate(route = ScoreRoute(score, questionSize))
+                        }
+                    )
+            }
+            composable<ScoreRoute> { backStackEntry ->
+                val scoreRoute: ScoreRoute = backStackEntry.toRoute<ScoreRoute>()
+                scoreScreen(
+                    score = scoreRoute.score,
+                    total = scoreRoute.questionSize,
+                    onResetButtonPushed = {
+                        navController.navigate(route = QuizRoute)
+                    }
+                )
+            }
+        }
+    }
+}
+

Warning

As you can see all composables now take as parameter a navigator. It will be needed to navigate with routes between screens.

for example, the WelcomeScreen composable is now declared as follows :

@Composable()
+fun welcomeScreen(navigator: Navigator){
+    ...
+
+

Use the navigation host

Use the callback

Use onStartButtonPushed declared on screen instantiation in the NavHost on welcome screen buttons click

WelcomeScreen.kt (SourceSet: commonMain)
fun welcomeScreen(onStartButtonPushed: () -> Unit) {
+...
+
+    Button(
+        modifier = Modifier.padding(all = 10.dp),
+        onClick = { onStartButtonPushed() }
+    ) {
+...
+

The same can be done for other screens

QuestionScreen.kt (commonMain)

fun questionScreen(questions: List<Question>, onFinishButtonPushed: (Int,Int) -> Unit) {
+..
+Button(
+                modifier = Modifier.padding(bottom = 20.dp),
+                onClick = {
+                    /* FOR SPEAKER TALK DEMO ON WEB APP */
+                    if (getPlatform().name == "WASM") {
+                        onSaveStatQuestion(
+                            questions[questionProgress].id,
+                            questions[questionProgress].label,
+                            selectedAnswer,
+                            questions[questionProgress].correctAnswerId,
+                            questions[questionProgress].answers[selectedAnswer.toInt() - 1].label
+                        )
+                    }
+
+                    if (selectedAnswer == questions[questionProgress].correctAnswerId) {
+                        score++
+                    }
+                    if (questionProgress < questions.size - 1) {
+                        questionProgress++
+                        selectedAnswer = 1
+                    } else {
+                        onFinishButtonPushed(score, questions.size)
+                    }
+                }
+}
+...
+
ScoreScreen.kt (SourceSet : commonMain)

+fun scoreScreen(score: Int,total:Int,onResetButtonPushed: () -> Unit){
+...
+ Button(
+     modifier = Modifier.padding(all = 20.dp),
+    onClick = {
+        onResetButtonPushed()
+     }
+ ) 
+...
+

🎯 Solutions

Sources

The full solution for this section is availabe here

✅ If everything is fine, congrats, you've just finish this codelab. You can now experiment your kotlin skills eveywhere !

📖 Further reading

Last Updated:
Contributors: Brah, Ibrahim Gharbi, A187839
+ + + diff --git a/network/index.html b/network/index.html new file mode 100644 index 0000000..5a921c1 --- /dev/null +++ b/network/index.html @@ -0,0 +1,319 @@ + + + + + + + + + Connectivity + + + + + +

Connectivity

Let's connect our Quiz app to internet.

Connect my App

For now, we will request a simple plain text json file hosted on this repo that will simulate a REST API call to be able to use our Ktor client.

The request & answers details are specified below :

Request
POST
+content-type: text/plain  
+url: https://github.com/worldline/learning-kotlin-multiplatform/raw/main/quiz.json
+
Answer
code:200
+body: 
+{
+  "questions": [
+    { 
+    "id":1, 
+    "label":"You can create an emulator to simulate the configuration of a particular type of Android device using a tool like", 
+    "correct_answer_id":3, 
+    "answers":[
+      {"id":1, "label":"Theme Editor"},
+      {"id":2, "label":"Android SDK Manager"},
+      {"id":3, "label":"AVD Manager"},
+      {"id":4, "label":"Virtual Editor"}
+     ]
+    },
+    {
+    "id":2, 
+    "label":"What parameter specifies the Android API level that Gradle should use to compile your app?", 
+    "correct_answer_id":2, 
+    "answers":[
+      {"id":1, "label":"minSdkVersion"},
+      {"id":2, "label":"compileSdkVersion"},
+      {"id":3, "label":"targetSdkVersion"},
+      {"id":4, "label":"testSdkVersion"}
+     ]
+    },
+  ]
+}
+

To not overcomplexify the app, let's assume that :

  • the QuizAPI provided by Ktor (cf below) is our data source
  • the repository will use a state flow that emit the API answer once at application startup

🧪 Ktor as a multiplatform HTTP client

Ktor includes a multiplatform asynchronous HTTP client, which allows you to make requests and handle responses, extend its functionality with plugins, such as authentication and JSON deserialization.

Add global dependencies

Shared sources need it to use ktor library on your code

build.gradle.kts (composeApp)
plugins {
+...
+    alias(libs.plugins.kotlinSerialization)
+}
+
+...
+ sourceSets {
+        val desktopMain by getting
+        commonMain.dependencies {
+            ...
+            implementation(libs.kotlinx.datetime)
+            implementation(libs.ktor.client.core)
+            implementation(libs.ktor.client.content.negotiation)
+            implementation(libs.ktor.serialization.kotlinx.json)
+
+        }
+        androidMain.dependencies {
+            ...
+            implementation(libs.ktor.client.okhttp)
+        }
+        desktopMain.dependencies {
+            ...
+            implementation(libs.ktor.client.apache)
+
+        }
+        iosMain.dependencies {
+            implementation(libs.ktor.client.darwin) //for iOS
+        }
+
+    }
+...
+
+

Enable Internet permissions ( Android Only)

You need to enable internet on Android otherwise you will not be able to use ktor client

AndroidManifest.xml( androidMain)
    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+

Create the API client in commonApp

QuizApiDataSource.kt (SourceSet : commonMain)
import com.worldline.quiz.data.dataclass.Quiz
+
+val globalHttpClient = HttpClient {
+    engine {
+
+    }
+
+    install(ContentNegotiation) {
+        json(
+            contentType = ContentType.Text.Plain, // because Github is not returning an 'application/json' header
+            json = Json {
+                ignoreUnknownKeys = true
+                useAlternativeNames = false
+            })
+    }
+}
+
+class QuizApiDatasource {
+    private val httpClient = globalHttpClient
+    suspend fun getAllQuestions(): Quiz {
+        return httpClient.get("https://raw.githubusercontent.com/worldline/learning-kotlin-multiplatform/main/quiz.json").body()
+    }
+}
+
+

Make all your dataclass become serializable

Ktor need it to transform the json string into your dataclasses

Answer.kt (module : commonMain)
@kotlinx.serialization.Serializable
+data class Answer(val id: Int, val label: String )
+
Question.kt (SourceSet : commonMain)
import kotlinx.serialization.SerialInfo
+import kotlinx.serialization.SerialName
+
+@kotlinx.serialization.Serializable
+data class Question(val id:Int, val label:String, @SerialName("correct_answer_id") val correctAnswerId:Int, val answers:List<Answer>)
+
Quiz.kt (SourceSet : commonMain)
@kotlinx.serialization.Serializable
+data class Quiz(var questions: List<Question>)
+

Create your Repository class in commonApp

QuizRepository.kt (module : commonMain)
class QuizRepository {
+
+    private val mockDataSource = MockDataSource()
+    private val quizApiDatasource = QuizApiDatasource()
+
+    private suspend fun fetchQuiz(): List<Question> = quizApiDatasource.getAllQuestions().questions
+
+    suspend fun updateQuiz(): List<Question> {
+        try {
+            return fetchQuiz()
+        } catch (e: Exception) {
+            e.printStackTrace()
+            return mockDataSource.generateDummyQuestionsList()
+        }
+    }
+}
+

🎯 Solutions

Sources

The full sources can be retrieved here

Create a server

🧪 Create a Ktor server module inside your actual project

Warning

You can create the server module from IntelliJ community or ultimate thanks to a template.

The module tree is as follow

server tree

🎯 Solutions

build.gradle.kts
plugins {
+    alias(libs.plugins.kotlinJvm)
+    alias(libs.plugins.ktor)
+    alias(libs.plugins.kotlinSerialization)
+    application
+}
+
+group = "com.worldline.quiz"
+version = "1.0.0"
+
+application {
+    mainClass.set("com.worldline.quiz.ApplicationKt")
+    applicationDefaultJvmArgs = listOf("-Dio.ktor.development=${extra["io.ktor.development"] ?: "false"}")
+}
+
+dependencies {
+    implementation(libs.logback)
+    implementation(libs.ktor.server.core)
+    implementation(libs.ktor.server.cio)
+    implementation(libs.ktor.serialization.kotlinx.json)
+    implementation(libs.ktor.server.content.negotiation)
+    implementation(libs.ktor.server.cors)
+    implementation(libs.ktor.server.config.yaml)
+}
+
+ktor {
+    fatJar {
+        archiveFileName.set("fat.jar")
+    }
+    docker {
+        externalRegistry.set(
+            io.ktor.plugin.features.DockerImageRegistry.dockerHub(
+                appName = provider { "ktor-quiz" },
+                username = providers.environmentVariable("KTOR_IMAGE_REGISTRY_USERNAME"),
+                password = providers.environmentVariable("KTOR_IMAGE_REGISTRY_PASSWORD")
+            )
+        )
+    }
+}
+
Application.kt
ffun main(args: Array<String>) {
+    io.ktor.server.cio.EngineMain.main(args)
+}
+
+
+fun Application.module() {
+
+    install(CORS) {
+        allowMethod(HttpMethod.Options)
+        allowMethod(HttpMethod.Post)
+        allowMethod(HttpMethod.Get)
+        allowHeader(HttpHeaders.AccessControlAllowOrigin)
+        allowHeader(HttpHeaders.ContentType)
+        anyHost()
+    }
+
+    install(ContentNegotiation) {
+        json()
+    }
+    configureRouting()
+}
+
Routing.kt
fun Application.configureRouting() {
+
+    routing {
+        get("/quiz") {
+            call.respond(generateQuiz())
+        }
+        staticResources("/", "static")
+    }
+}
+
+fun generateQuiz(): Quiz {
+    val quizQuestions = mutableListOf<Question>()
+
+    val questions = listOf(
+        "What is the primary goal of Kotlin Multiplatform?",
+        "How does Kotlin Multiplatform facilitate code sharing between platforms?",
+        "Which platforms does Kotlin Multiplatform support?",
+        "What is a common use case for Kotlin Multiplatform?",
+        "Which naming of KMP is deprecated?",
+        "How does Kotlin Multiplatform handle platform-specific implementations?",
+        "At which Google I/O, Google announced first-class support for Kotlin on Android?",
+        "What is the name of the Kotlin mascot?",
+        "The international yearly Kotlin conference is called...",
+        "Where will be located the next international yearly Kotlin conference?"
+    )
+
+    val answers = listOf(
+        listOf(
+            "To share code between multiple platforms",
+            "To exclusively compile code to JavaScript",
+            "To build only Android applications",
+            "To create iOS-only applications"
+        ),
+        listOf(
+            "By sharing business logic and adapting UI",
+            "By writing separate code for each platform",
+            "By using only Java libraries",
+            "By using code translation tools"
+        ),
+        listOf(
+            "Android, iOS, desktop and web",
+            "Only Android",
+            "Only iOS",
+            "Only web applications"
+        ),
+        listOf(
+            "Developing a cross-platform app",
+            "Building a desktop-only application",
+            "Creating a server-side application",
+            "Writing a standalone mobile app"
+        ),
+        listOf(
+            "Kotlin Multiplatform Mobile (KMM)",
+            "Hadi Multiplatform",
+            "Jetpack multiplatform",
+            "Kodee multiplatform"
+        ),
+        listOf(
+            "Through expect and actual declarations",
+            "By automatically translating code",
+            "By restricting to a single platform",
+            "By excluding platform-specific features"
+        ),
+        listOf(
+            "2017",
+            "2016",
+            "2014",
+            "2020"
+        ),
+        listOf(
+            "Kodee",
+            "Hadee",
+            "Kotlinee",
+            "Kotee"
+        ),
+        listOf(
+            "KotlinConf",
+            "KodeeConf",
+            "KConf",
+            "KotlinKonf"
+        ),
+        listOf(
+            "Copenhagen, Denmark",
+            "Amsterdam, Netherlands",
+            "Tokyo, Japan",
+            "Lille, France"
+        )
+    )
+
+    for (i in questions.indices) {
+        val shuffledAnswers = answers[i].shuffled(Random.Default)
+        val correctAnswerId = shuffledAnswers.indexOfFirst { it == answers[i][0] } + 1
+        val question =
+            Question(i + 1L, questions[i], correctAnswerId.toLong(), shuffledAnswers.mapIndexed { index, answer ->
+                Answer(index + 1L, answer)
+            })
+        quizQuestions.add(question)
+    }
+
+    return Quiz(quizQuestions)
+}
+
+

Other libs

If you want well-known retrofit style lib, you can use KtorFit to separate endpoint declaration from httpclient configuration

Also for better image loading from the internet with cache, you can use the following third-party Compose Multiplatform libraries

An that's it, you quiz have now a remote list of questions.

✅ If everything is fine, go to the next chapter →

📖 Further reading

Last Updated:
Contributors: Ibrahim Gharbi, A187839
+ + + diff --git a/overview/index.html b/overview/index.html new file mode 100644 index 0000000..2276ac0 --- /dev/null +++ b/overview/index.html @@ -0,0 +1,56 @@ + + + + + + + + + 🚀 Let's start + + + + + +

🚀 Let's start

Prerequisites

  • Basic knowledge of kotlin development (nullability,inline & lambda functions mainly). For more information, please refer to the Worldline kotlin training
  • Fleet IDE is the dedicated IDE to consider for KMP developpement with exclusive features such as better preview management
  • A good connectivity

Advanced installation

For more information about your DEV environment and installs please have a look to jetbrain related docs

Consider also installing Jetbrain ToolBox for managing multiple versions ( Beta , Alpha , stable) of Android Studio or Fleet

What is Functional Programming?

Definition:

  • FP uses an approach to software development that uses pure functions to create maintainable software
  • It uses immutable functions and avoids shared states.
  • It is in contrast to object-oriented programming languages which uses mutable states
  • It focuses on results and not process, while the iterations like for loops are not allowed

Advantages: Problems are easy Keeps concurrency safe

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+
+// Step 1: Filter out even numbers
+let oddNumbers = numbers. filter { $0 % 2 != 0 }
+
+// Step 2: Square each of the remaining numbers
+let squaredNumbers = oddNumbers.map { $0 * $0 }
+
+// Step 3: Sum up all the squared numbers
+let sumOfSquares =squaredNumbers.reduce(0, +)
+
+print("The sum of squares of odd numbers is \(sumOfSquares)")
+//output: The sum of squares of odd numbers is 165
+

Filter: filters array to include only odd numbers Map: squares the numbers Reduce: sums up the squared numbers

This example demonstrates the core principles of functional programming: using functions as first-class citizens to transform and compose data in a clear and concise way.

Apps using KMP

capture

KMP roadmap

See the roadmap 2024 on official Jetbrain blog

Hands-on Lab objectives

capture

Functionnally

We will create a simple quiz application that provides :

  • a Startup screen explaining rules of the game
  • a Quiz screen looping on single choices questions
  • a final scoring screen.

Technically

  • The app can be deployed on Android , iOS and jvm Desktop.
  • We will use not only a common library but composable views shared for all platforms

Design screens

Here are expected screens at the end of this Hands-on Lab.

screens

Generate composables based on designs

You can generate composables based on designs on Figma thanks to the plugin Google Relay. A dedicated section on android developer documentation describe all the steps here

See also

Last Updated:
Contributors: Brah, Ibrahim Gharbi, A187839
+ + + diff --git a/preferences/index.html b/preferences/index.html new file mode 100644 index 0000000..62fc856 --- /dev/null +++ b/preferences/index.html @@ -0,0 +1,155 @@ + + + + + + + + + Preferences + + + + + +

Preferences

Kstore is a tiny Kotlin multiplatform library that assists in saving and restoring objects to and from disk using kotlinx.coroutines, kotlinx.serialization and kotlinx.io. Inspired by RxStore

More settings options

if you want alternate library to store simple key-value data, you can use Multiplatform-Settings or DataStore multiplatform. Be carefull, not all target web platform

Add kstore dependency to your project for each target platform

build.gradle.kts (composeMain)
  commonMain.dependencies {
+            ...
+            implementation(libs.kstore)
+        }
+        androidMain.dependencies {
+            ...
+            implementation(libs.kstore.file)
+        }
+        desktopMain.dependencies {
+            ...
+            implementation(libs.kstore.file)
+        }
+        iosMain.dependencies {
+            implementation(libs.kstore.file)
+        }
+        wasmJsMain.dependencies {
+            implementation(libs.kstore.storage)
+        }
+    ...
+

Define the native call to get the kstore instance

platform.kt (commonMain)
    expect fun getKStore(): KStore<Quiz>?
+

Define each platform call to get the kstore instance for Android, iOS, Web, Desktop

platform.kt (androidMain)
    actual fun getKStore(): KStore<Quiz>? {
+        return storeOf(QuizApp.context().dataDir.path.plus("/quiz.json").toPath())
+    }
+

Also Android needs context to instanciate the kstore. Without injection library, you can use an App context singleton.

QuizApp.kt (androidMain)
class QuizApp : Application() {
+    init {
+        app = this
+    }
+
+    companion object {
+        private lateinit var app: QuizApp
+        fun context(): Context = app.applicationContext
+    }
+} 
+

Add the QuizApp to the AndroidManifest.xml

AndroidManifest.xml (androidMain)
...
+    <application
+        android:name=".QuizApp"
+...
+
platform.kt (iosMain)
    @OptIn(ExperimentalKStoreApi::class)
+    actual fun getKStore(): KStore<Quiz>? {
+        return NSFileManager.defaultManager.DocumentDirectory?.relativePath?.plus("/quiz.json")?.toPath()?.let {
+            storeOf(
+            file= it
+        )
+        }
+    }
+
platform.kt (wasmJsMain)
    actual fun getKStore(): KStore<Quiz>? {
+        return storeOf(key = "kstore_quiz")
+     }
+
+
platform.kt (desktopMain)
    actual fun getKStore(): KStore<Quiz>? {
+        return storeOf("quiz.json".toPath())
+    }
+
+

Upgrade the Quiz object with an update timestamp

Quiz.kt (commonMain)
@Serializable
+data class Quiz(var questions: List<Question>,  val updateTime:Long=0L)
+

Create a QuizKStoreDataSource class to store the kstore data

QuizKStoreDataSource.kts (commonMain)
class QuizKStoreDataSource {
+   private val kStoreQuiz: KStore<Quiz>? = getKStore()
+   suspend fun getUpdateTimeStamp(): Long = kStoreQuiz?.get()?.updateTime ?: 0L
+
+   suspend fun setUpdateTimeStamp(timeStamp: Long) {
+       kStoreQuiz?.update { quiz: Quiz? ->
+           quiz?.copy(updateTime = timeStamp)
+       }
+   }
+
+   suspend fun getAllQuestions(): List<Question> {
+       return kStoreQuiz?.get()?.questions ?: emptyList()
+   }
+
+   suspend fun insertQuestions(newQuestions: List<Question>) {
+       kStoreQuiz?.update { quiz: Quiz? ->
+           quiz?.copy(questions = newQuestions)
+       }
+   }
+
+   suspend fun resetQuizKstore() {
+       kStoreQuiz?.delete()
+       kStoreQuiz?.set(Quiz(emptyList(), 0L))
+   }
+}
+

Update the QuizRepository class to use the kstore

QuizRepository.kts (commonMain)
class QuizRepository {
+    private val mockDataSource = MockDataSource()
+    private val quizApiDatasource = QuizApiDatasource()
+    private var quizKStoreDataSource = QuizKStoreDataSource()
+
+    private suspend fun fetchQuiz(): List<Question> = quizApiDatasource.getAllQuestions().questions
+
+    private suspend fun fetchAndStoreQuiz(): List<Question> {
+        quizKStoreDataSource.resetQuizKstore()
+        val questions = fetchQuiz()
+        quizKStoreDataSource.insertQuestions(questions)
+        quizKStoreDataSource.setUpdateTimeStamp(Clock.System.now().epochSeconds)
+        return questions
+    }
+
+    suspend fun updateQuiz(): List<Question> {
+        try {
+            val lastRequest = quizKStoreDataSource.getUpdateTimeStamp()
+            return if (lastRequest == 0L || lastRequest - Clock.System.now().epochSeconds > 300000) {
+                fetchAndStoreQuiz()
+            } else {
+                quizKStoreDataSource.getAllQuestions()
+            }
+        } catch (e: NullPointerException) {
+            return fetchAndStoreQuiz()
+        } catch (e: Exception) {
+            e.printStackTrace()
+            return mockDataSource.generateDummyQuestionsList()
+        }
+    }
+
+}
+

Sources

The full sources can be retrieved here

🎬 Summary video of the course

Last Updated:
Contributors: Ibrahim Gharbi
+ + + diff --git a/res/index.html b/res/index.html new file mode 100644 index 0000000..c8afc2f --- /dev/null +++ b/res/index.html @@ -0,0 +1,76 @@ + + + + + + + + + Ressources + + + + + +

Ressources

  • For common code, store your resource files in the resources directory of the commonMain source set.
  • For platform-specific code, store your resource files in the resources directory of the corresponding source set.

Jetbrain release his experimental API painterResource from org.jetbrains.compose.resource package

@ExperimentalResourceApi
+@Composable
+public fun painterResource(
+    res: String
+): Painter
+
  • Return a Painter from the given resource path. Can load either a BitmapPainter for rasterized images (.png, .jpg) or a VectorPainter for XML Vector Drawables (.xml).
  • XML Vector Drawables have the same format as for Android (https://developer.android.com/reference/android/graphics/drawable/VectorDrawable) except that external references to Android resources are not supported.
  • Note that XML Vector Drawables are not supported for Web target currently.

Images

Android

To make your resources accessible from the resource library, use the following configuration in your build.gradle.kts file:

android {
+    // …
+    sourceSets["main"].resources.srcDirs("src/commonMain/resources")
+}
+

iOS,

The Compose Multiplatform Gradle plugin handles resource deployment. The plugin stores resource files in the compose-resources directory of the resulting application bundle.

val commonMain by getting {
+    dependencies {
+        // Your dependencies
+        @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
+        implementation(compose.components.resources)
+    }
+}
+

Nothing to do for desktop App

Usage

Image(
+    painterResource("compose-multiplatform.xml"),
+    null // description
+)
+

Fonts and String

For more ressource management possibilities for font and String management, you can use a third party lib :

Other ressources

@OptIn(ExperimentalResourceApi::class)
+@Composable
+fun App() {
+    var text: String? by remember { mutableStateOf(null) }
+
+    LaunchedEffect(Unit) {
+        text = String(resource("welcome.txt").readBytes())
+    }
+
+    text?.let {
+        Text(it)
+    }
+}
+

✅ If everything is fine, congrats, you've just finish this codelab. You can now experiment your kotlin skills eveywhere !

📖 Further reading

Last Updated:
Contributors: Ibrahim Gharbi
+ + + diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..36cfb01 --- /dev/null +++ b/robots.txt @@ -0,0 +1,3 @@ + +User-agent:* +Disallow: diff --git a/ui/index.html b/ui/index.html new file mode 100644 index 0000000..e7884a6 --- /dev/null +++ b/ui/index.html @@ -0,0 +1,305 @@ + + + + + + + + + User interface + + + + + +

User interface

📚 Reminder

Compose Multiplatform

Compose Multiplatform simplifies and accelerates UI development for Desktop and Web applications, and allows extensive UI code sharing between Android, iOS, Desktop and Web. It's a modern toolkit for building native UI. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs. It is based on Android Jetpack Compose declarative UI approach ( which is similar also to SwiftUI for iOS )

How to create composables ?

Composables are UI components that can be simply declared with code as functions, properties (such as text color, fonts...) as function parameters and subviews are declared on function declaration.

  • An @Composable annotation come always before the composable function.
  • Properties of size, behaviors of components can be set thanks to Modifiers. It permit to decorate and augent composables
  • You can align components with containers composables such as Column (Vertically), Box, Row (Horizontally)
  • Also you can preview composables with the annotation @Preview before the composable annotation.

Example: 2 texts vertically aligned that fit all the width of the screen.

@Composable
+fun App() {
+    MaterialTheme {
+        Column(Modifier.fillMaxWidth()) {
+            Text( "My Text1", color = Color.Blue)
+            Text(text = "My Text2")
+        }
+    }
+}
+

Find composables available

For more information, you can have a look to Android Jetpack Compose documentation

Create composable for the Quiz

🧪 WelcomeScreen

Welcome Screen preview

You can now create your first view. For the Quiz we need a welcome screen displaying a Card centered with a button inside to start the quiz It is simply compose of the following composables :

  • a Card rounded shape container

  • a Text

  • a Button

  • Create a new composable WelcomeScreen.kt on commonMain module

  • Make sure that the App() composable is using it has below

@Composable
+fun App() {
+    MaterialTheme {
+        welcomeScreen()
+    }
+}
+
  • Run you first view on all platforms , it should work.

🎯 Solutions

WelcomeScreen.kt (SourseSet : commonMain)
package com.worldline.quiz
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Button
+import androidx.compose.material.Card
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun welcomeScreen(){
+
+    Box(
+        contentAlignment = Alignment.Center,
+        modifier = Modifier.fillMaxWidth().fillMaxHeight()
+    ) {
+        Card(
+            shape = RoundedCornerShape(8.dp),
+            modifier = Modifier.padding(10.dp),
+        ) {
+            Column(horizontalAlignment = Alignment.CenterHorizontally) {
+
+
+                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                        Text(
+                            text = "Quiz",
+                            fontSize = 30.sp,
+                            modifier = Modifier.padding(all = 10.dp)
+                        )
+                        Text(
+                            modifier = Modifier.padding(all = 10.dp),
+                            text = "A simple Quiz to discovers KMP and compose.",
+                        )
+                        Button(
+                            modifier = Modifier.padding(all = 10.dp),
+                            onClick = {  }
+
+                        ) {
+                            Text("Start the Quiz")
+                        }
+                    }
+            }
+        }
+    }
+}
+

🧪 ScoreScreen

Score Screen preview

The second view will be quite similar but able de show final scores

  • Create a new composable ScoreScreen.kt on commonMain module
  • Make sure that the App() composable is using it has below
  • The composable will have a String value as parameter
@Composable
+fun App() {
+    MaterialTheme {
+        scoreScreen("10/20")
+    }
+}
+
  • Run you first view on all platforms , it should work.

🎯 Solutions

ScoreScreen.kt (SourseSet : commonMain)
package com.worldline.quiz
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Button
+import androidx.compose.material.Card
+import androidx.compose.material.Icon
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Refresh
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun scoreScreen(score: String){
+    Box(
+        contentAlignment = Alignment.Center,
+        modifier = Modifier.fillMaxWidth().fillMaxHeight()
+    ) {
+        Card(
+            shape = RoundedCornerShape(8.dp),
+            modifier = Modifier.padding(10.dp),
+            backgroundColor = Color.Green
+        ) {
+            Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                        Text(
+                            fontSize = 15.sp,
+                            text = "score",
+                        )
+                        Text(
+                            fontSize = 30.sp,
+                            text = score,
+                        )
+                        Button(
+                            modifier = Modifier.padding(all = 20.dp),
+                            onClick = {
+                            }
+                        ) {
+                            Icon(Icons.Filled.Refresh, contentDescription = "Localized description")
+                            Text(text = "Retake the Quiz")
+                        }
+                    }
+            }
+        }
+    }
+}
+

🧪 QuestionScreen

Data classes for Quiz modeling

class_diagram

We can create classes on the package network.data

Answer.kt (commonMain)
data class Answer(val id: Int, val label: String )
+
Question.kt (commonMain)
data class Question(val id:Int, val label:String, val correctAnswerId:Int, val answers:List<Answer>)
+
Quiz.kt (commonMain)
data class Quiz(var questions: List<Question>)
+

Make the composable

Now we can make a composable with interactions.

class_diagram

The screen is composed of :

  • The question label in a Card
  • Single choice answer component with RadioButton
  • A Button to submit the answer
  • A LinearProgressIndicator indicating the quiz progress

After creating the UI view, we can pass to this composable the list of questions. When the Appcomposable will create questionScreen() composable we will generate mock questions data for now to generate the list of questions.

State management

All views of question will be one unique composable that updates with the correct question/answers data each time we are clicking on the next button.

We use MutableState value for that. It permit to keep data value and recompose the view when the data is changed. It's exactly what we need for our quiz page :

  • Keep the value of the question position on the list
  • Keep the value of the answer selected by the user each time he switch between RadioButtons
  • Keep the score to get the final one at the end of the list.

Here is an example of MutableState value declaration

    var questionProgress by remember { mutableStateOf(0) }
+    ...
+

You can declare the 2 other MutableState values and after use it on your composable ensuring that on the button click questionProgressis incrementing so the question and his answers can change on the view.

🎯 Solutions

QuestionScreen.kt (SourceSet : commonMain)
package com.worldline.quiz
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.selection.selectableGroup
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Button
+import androidx.compose.material.Card
+import androidx.compose.material.Icon
+import androidx.compose.material.LinearProgressIndicator
+import androidx.compose.material.RadioButton
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowForward
+import androidx.compose.material.icons.filled.Done
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import network.data.Question
+
+@Composable
+fun questionScreen(questions: List<Question>) {
+
+    var questionProgress by remember { mutableStateOf(0) }
+    var selectedAnswer by remember { mutableStateOf(1) }
+    var score by remember { mutableStateOf(0) }
+
+    Column(
+        modifier = Modifier.fillMaxWidth().fillMaxHeight(),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Card(
+            shape = RoundedCornerShape(5.dp),
+            modifier = Modifier.padding(60.dp)
+        ) {
+            Column(
+                horizontalAlignment = Alignment.CenterHorizontally,
+                modifier = Modifier.padding(horizontal = 10.dp)
+            ) {
+                Text(
+                    modifier = Modifier.padding(all = 10.dp),
+                    text = questions[questionProgress].label,
+                    fontSize = 25.sp,
+                    textAlign = TextAlign.Center
+                )
+            }
+        }
+        Column(modifier = Modifier.selectableGroup()) {
+            questions[questionProgress].answers.forEach { answer ->
+                Row(
+                    modifier = Modifier.padding(horizontal = 16.dp),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    RadioButton(
+                        modifier = Modifier.padding(end = 16.dp),
+                        selected = (selectedAnswer == answer.id),
+                        onClick = { selectedAnswer = answer.id },
+                    )
+                    Text(text = answer.label)
+                }
+            }
+        }
+        Column(modifier = Modifier.fillMaxHeight(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Bottom) {
+            Button(
+                modifier = Modifier.padding(bottom = 20.dp),
+                onClick = {
+                    if(selectedAnswer == questions[questionProgress].correctAnswerId) {
+                        score++
+                    }
+                    if (questionProgress < questions.size - 1) {
+                        questionProgress++
+                        selectedAnswer = 1
+                    }else{
+                        // Go to the score section
+                    }
+                }
+            ) {
+                if(questionProgress < questions.size - 1) nextOrDoneButton(Icons.AutoMirrored.Filled.ArrowForward,"Next")
+                else nextOrDoneButton(Icons.Filled.Done,"Done")
+            }
+            LinearProgressIndicator(modifier = Modifier.fillMaxWidth().height(20.dp), progress = questionProgress.div(questions.size.toFloat()).plus(1.div(questions.size.toFloat())))
+        }
+    }
+}
+
+@Composable
+fun nextOrDoneButton(iv: ImageVector, label:String){
+    Icon(
+        iv,
+        contentDescription = "Localized description",
+        Modifier.padding(end = 15.dp)
+    )
+    Text(label)
+}
+
App.kt (SourceSet : commonMain)
@Composable
+fun App() {
+    MaterialTheme {
+        val questions = listOf(
+            Question(
+                1,
+                "Android is a great platform ?",
+                1,
+                listOf(Answer(1, "YES"), Answer(2, "NO"))
+            ),
+            Question(
+                1,
+                "Android is a bad platform ?",
+                2,
+                listOf(Answer(1, "YES"), Answer(2, "NO"))
+            )
+        )
+        questionScreen(questions)
+    }
+}
+

Your Quiz have now all his composable screens made. Let's connect it to the Internet

✅ If everything is fine, go to the next chapter →

Sources

The full solution for this section is availabe here

📖 Further reading

Last Updated:
Contributors: Ibrahim Gharbi, A187839
+ + +