├── .vscode
    └── extensions.json
├── src
    ├── assets
    │   ├── large.mp4
    │   ├── background.png
    │   └── vue.svg
    ├── components
    │   ├── index.ts
    │   ├── DynamicIsland.vue
    │   └── DynamicIsland.css
    ├── main.ts
    ├── examples
    │   ├── Label.vue
    │   ├── Avatar.vue
    │   ├── LargeContent.vue
    │   ├── IconApple.vue
    │   ├── IconCapture.vue
    │   ├── IconTimer.vue
    │   ├── DemoA.vue
    │   ├── DemoC.vue
    │   ├── DemoB.vue
    │   └── GitHubCorner.vue
    ├── vite-env.d.ts
    ├── style.css
    └── App.vue
├── docs
    ├── assets
    │   ├── background.275da8c0.png
    │   ├── vue.5532db34.svg
    │   ├── index.116492c4.css
    │   └── index.ca74979d.js
    ├── index.html
    └── vite.svg
├── tsconfig.node.json
├── vite.config.ts
├── .gitignore
├── index.html
├── tsconfig.json
├── vite.config.lib.ts
├── LICENSE
├── package.json
├── public
    └── vite.svg
├── README.md
└── pnpm-lock.yaml


/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar"]
3 | }
4 | 


--------------------------------------------------------------------------------
/src/assets/large.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jinjiang/v-dynamic-island/HEAD/src/assets/large.mp4


--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | import DynamicIsland from "./DynamicIsland.vue"
2 | export { DynamicIsland }
3 | 


--------------------------------------------------------------------------------
/src/assets/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jinjiang/v-dynamic-island/HEAD/src/assets/background.png


--------------------------------------------------------------------------------
/docs/assets/background.275da8c0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jinjiang/v-dynamic-island/HEAD/docs/assets/background.275da8c0.png


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import './style.css'
3 | import App from './App.vue'
4 | 
5 | createApp(App).mount('#app')
6 | 


--------------------------------------------------------------------------------
/src/examples/Label.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div style="background: rgba(255, 165, 0, .8); padding: 5px 10px; border-radius: 5px;">
3 |     LABEL
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 
3 | declare module '*.vue' {
4 |   import type { DefineComponent } from 'vue'
5 |   const component: DefineComponent<{}, {}, any>
6 |   export default component
7 | }
8 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Node",
 6 |     "allowSyntheticDefaultImports": true
 7 |   },
 8 |   "include": ["vite.config.ts"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | 
 4 | // https://vitejs.dev/config/
 5 | export default defineConfig({
 6 |   plugins: [vue()],
 7 |   base: '/v-dynamic-island/',
 8 |   build: {
 9 |     outDir: 'docs'
10 |   }
11 | })
12 | 


--------------------------------------------------------------------------------
/src/examples/Avatar.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |   Recommended superLeading prop
 3 |   - top: 60,
 4 |   - left: 60,
 5 |   - size: 100
 6 | -->
 7 | 
 8 | <template>
 9 |   <div style="padding: 5px 10px;">
10 |     <img
11 |       src="https://github.com/jinjiang.png?size=200"
12 |       style="display: block; width: 30px; height: 30px; border-radius: 5px;"
13 |     />
14 |   </div>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | Test.vue
27 | 


--------------------------------------------------------------------------------
/src/examples/LargeContent.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const emit = defineEmits(['click'])
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div @click="emit('click')">
 7 |     Click to collapse
 8 |   </div>
 9 |   <div class="bottom"></div>
10 | </template>
11 | 
12 | <style scoped>
13 | .bottom {
14 |   width: 100%;
15 |   height: 60px;
16 |   border-radius: 0 0 35px 35px;
17 |   margin-top: 50px;
18 |   background-color: rgba(255, 255, 255, 0.5);
19 | }
20 | </style>
21 | 


--------------------------------------------------------------------------------
/src/assets/vue.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>


--------------------------------------------------------------------------------
/docs/assets/vue.5532db34.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
 7 |     <meta name="apple-mobile-web-app-capable" content="yes">
 8 |     <title>Vue Dynamic Island</title>
 9 |   </head>
10 |   <body>
11 |     <div id="app"></div>
12 |     <script type="module" src="/src/main.ts"></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 3 |   font-size: 16px;
 4 |   line-height: 24px;
 5 |   font-weight: 400;
 6 | }
 7 | 
 8 | body {
 9 |   margin: 0;
10 |   display: flex;
11 |   place-items: center;
12 |   min-width: 320px;
13 |   min-height: 100vh;
14 | }
15 | 
16 | h1 {
17 |   font-size: 3.2em;
18 |   line-height: 1.1;
19 | }
20 | 
21 | .card {
22 |   padding: 2em;
23 | }
24 | 
25 | #app {
26 |   max-width: 1280px;
27 |   margin: 0 auto;
28 |   padding: 2rem;
29 |   text-align: center;
30 | }
31 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "Node",
 7 |     "strict": true,
 8 |     "jsx": "preserve",
 9 |     "sourceMap": true,
10 |     "resolveJsonModule": true,
11 |     "isolatedModules": true,
12 |     "esModuleInterop": true,
13 |     "lib": ["ESNext", "DOM"],
14 |     "skipLibCheck": true
15 |   },
16 |   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
17 |   "references": [{ "path": "./tsconfig.node.json" }]
18 | }
19 | 


--------------------------------------------------------------------------------
/vite.config.lib.ts:
--------------------------------------------------------------------------------
 1 | import { resolve } from 'path'
 2 | import { defineConfig } from 'vite'
 3 | import vue from '@vitejs/plugin-vue'
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   plugins: [vue()],
 8 |   build: {
 9 |     lib: {
10 |       entry: resolve(__dirname, 'src/components/index.ts'),
11 |       name: 'DynamicIsland',
12 |       fileName: 'dynamic-island'
13 |     },
14 |     rollupOptions: {
15 |       external: ['vue'],
16 |       output: {
17 |         globals: {
18 |           vue: 'Vue'
19 |         }
20 |       }
21 |     }
22 |   }
23 | })
24 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/v-dynamic-island/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
 7 |     <meta name="apple-mobile-web-app-capable" content="yes">
 8 |     <title>Vue Dynamic Island</title>
 9 |     <script type="module" crossorigin src="/v-dynamic-island/assets/index.ca74979d.js"></script>
10 |     <link rel="stylesheet" href="/v-dynamic-island/assets/index.116492c4.css">
11 |   </head>
12 |   <body>
13 |     <div id="app"></div>
14 |     
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/examples/IconApple.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg :width="`${size}px`" :height="`${size}px`" viewBox="0 0 24 24"><path fill="currentColor" d="M14.94 5.19A4.38 4.38 0 0 0 16 2a4.44 4.44 0 0 0-3 1.52a4.17 4.17 0 0 0-1 3.09a3.69 3.69 0 0 0 2.94-1.42Zm2.52 7.44a4.51 4.51 0 0 1 2.16-3.81a4.66 4.66 0 0 0-3.66-2c-1.56-.16-3 .91-3.83.91s-2-.89-3.3-.87a4.92 4.92 0 0 0-4.14 2.53C2.93 12.45 4.24 17 6 19.47c.8 1.21 1.8 2.58 3.12 2.53s1.75-.82 3.28-.82s2 .82 3.3.79s2.22-1.24 3.06-2.45a11 11 0 0 0 1.38-2.85a4.41 4.41 0 0 1-2.68-4.04Z"></path></svg>
 3 | </template>
 4 | 
 5 | <script lang="ts">
 6 | export default {
 7 |   name: 'UilApple',
 8 |   props: { size: { type: Number, default: 20 } },
 9 | }
10 | </script>
11 | 


--------------------------------------------------------------------------------
/src/examples/IconCapture.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg :width="`${size}px`" :height="`${size}px`" viewBox="0 0 24 24"><path fill="currentColor" d="M3 9a1 1 0 0 0 1-1V5a1 1 0 0 1 1-1h3a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v3a1 1 0 0 0 1 1Zm5 11H5a1 1 0 0 1-1-1v-3a1 1 0 0 0-2 0v3a3 3 0 0 0 3 3h3a1 1 0 0 0 0-2Zm4-12a4 4 0 1 0 4 4a4 4 0 0 0-4-4Zm0 6a2 2 0 1 1 2-2a2 2 0 0 1-2 2Zm7-12h-3a1 1 0 0 0 0 2h3a1 1 0 0 1 1 1v3a1 1 0 0 0 2 0V5a3 3 0 0 0-3-3Zm2 13a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 0 0 2h3a3 3 0 0 0 3-3v-3a1 1 0 0 0-1-1Z"></path></svg>
 3 | </template>
 4 | 
 5 | <script lang="ts">
 6 | export default {
 7 |   name: 'UilCapture',
 8 |   props: { size: { type: Number, default: 20 } },
 9 | }
10 | </script>
11 | 


--------------------------------------------------------------------------------
/src/examples/IconTimer.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <template>
 3 |   <svg :width="`${size}px`" :height="`${size}px`" viewBox="0 0 512 512"><path d="M256 456c-110.3 0-200-89.7-200-200 0-54.8 21.7-105.9 61.2-144 6.4-6.2 16.6-6 22.7.4 6.2 6.4 6 16.6-.4 22.7-33.1 32-51.3 74.9-51.3 120.9 0 92.5 75.3 167.8 167.8 167.8S423.8 348.5 423.8 256c0-87.1-66.7-159-151.8-167.1v62.6c0 8.9-7.2 16.1-16.1 16.1s-16.1-7.2-16.1-16.1V72.1c0-8.9 7.2-16.1 16.1-16.1 110.3 0 200 89.7 200 200S366.3 456 256 456z" fill="currentColor"></path><path d="M175.9 161.9l99.5 71.5c13.5 9.7 16.7 28.5 7 42s-28.5 16.7-42 7c-2.8-2-5.2-4.4-7-7l-71.5-99.5c-3.2-4.5-2.2-10.8 2.3-14 3.6-2.6 8.3-2.4 11.7 0z" fill="currentColor"></path></svg>
 4 | </template>
 5 | 
 6 | <script lang="ts">
 7 |   export default {
 8 |     name: 'UilCapture',
 9 |     props: { size: { type: Number, default: 20 } },
10 |   }
11 |   </script>
12 |   


--------------------------------------------------------------------------------
/src/examples/DemoA.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import DynamicIsland from '../components/DynamicIsland.vue';
 3 | import IconApple from './IconApple.vue'
 4 | import IconTimer from './IconTimer.vue'
 5 | 
 6 | export type Props = {
 7 |   shown?: boolean
 8 |   warning?: boolean
 9 |   expanded?: boolean
10 | }
11 | 
12 | const { shown, warning, expanded } = defineProps<Props>()
13 | const emit = defineEmits(['expand', 'collapse'])
14 | </script>
15 | 
16 | <template>
17 |   <DynamicIsland class="island" v-bind="{
18 |     shown,
19 |     expanded: shown && expanded,
20 |     warning,
21 |     superLeading: true,
22 |     superTrailing: true
23 |   }">
24 |     <template #leading>
25 |       <IconApple @click="emit('expand')" style="padding: 10px" />
26 |     </template>
27 |     <template #trailing>
28 |       <IconTimer @click="emit('expand')" style="padding: 10px" />
29 |     </template>
30 |     <template #expanded>
31 |       <div @click="emit('collapse')">
32 |         Click to collapse
33 |       </div>
34 |     </template>
35 |   </DynamicIsland>
36 | </template>
37 | 


--------------------------------------------------------------------------------
/src/examples/DemoC.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import DynamicIsland from '../components/DynamicIsland.vue';
 3 | import Avatar from './Avatar.vue'
 4 | import Label from './Label.vue'
 5 | import LargeContent from './LargeContent.vue'
 6 | 
 7 | export type Props = {
 8 |   shown?: boolean
 9 |   warning?: boolean
10 |   expanded?: boolean
11 | }
12 | 
13 | const { shown, warning, expanded } = defineProps<Props>()
14 | const emit = defineEmits(['expand', 'collapse'])
15 | </script>
16 | 
17 | <template>
18 |   <DynamicIsland class="island" v-bind="{
19 |     shown,
20 |     expanded: shown && expanded,
21 |     warning,
22 |     superLeading: {
23 |       top: 60,
24 |       left: 60,
25 |       size: 100
26 |     }
27 |   }">
28 |     <template #leading>
29 |       <Avatar @click="emit('expand')" />
30 |     </template>
31 |     <template #trailing>
32 |       <div style="padding: 10px">Ring</div>
33 |     </template>
34 |     <template #expanded>
35 |       <LargeContent @click="emit('collapse')" />
36 |     </template>
37 |     <template #expanded-trailing>
38 |       <Label />
39 |     </template>
40 |   </DynamicIsland>
41 | </template>
42 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Jinjiang
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/examples/DemoB.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import DynamicIsland from '../components/DynamicIsland.vue';
 3 | import IconApple from './IconApple.vue'
 4 | import IconTimer from './IconTimer.vue'
 5 | 
 6 | export type Props = {
 7 |   shown?: boolean
 8 |   warning?: boolean
 9 |   expanded?: boolean
10 | }
11 | 
12 | const { shown, warning, expanded } = defineProps<Props>()
13 | const emit = defineEmits(['expand', 'collapse'])
14 | </script>
15 | 
16 | <template>
17 |   <DynamicIsland class="island" v-bind="{
18 |     shown,
19 |     expanded: shown && expanded,
20 |     warning,
21 |     superLeading: true
22 |   }">
23 |     <template #leading>
24 |       <IconApple @click="emit('expand')" style="padding: 10px" />
25 |     </template>
26 |     <template #trailing>
27 |       <div @click="emit('expand')" style="padding: 10px">Ring</div>
28 |     </template>
29 |     <template #expanded>
30 |       <div @click="emit('collapse')">
31 |         Click to collapse
32 |       </div>
33 |     </template>
34 |     <template #expanded-trailing>
35 |       <IconTimer :size="60" style="padding: 10px" />
36 |     </template>
37 |   </DynamicIsland>
38 | </template>
39 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "v-dynamic-island",
 3 |   "version": "0.1.0",
 4 |   "description": "A Vue (3.x) implementation of Dynamic Island.",
 5 |   "keywords": [
 6 |     "vue",
 7 |     "dynamic-island",
 8 |     "component"
 9 |   ],
10 |   "author": "Jinjiang <zhaojinjiang@me.com>",
11 |   "license": "MIT",
12 |   "homepage": "https://github.com/Jinjiang/v-dynamic-island",
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/Jinjiang/v-dynamic-island.git"
16 |   },
17 |   "bugs": {
18 |     "url": "https://github.com/Jinjiang/v-dynamic-island/issues"
19 |   },
20 |   "type": "module",
21 |   "main": "./dist/dynamic-island.umd.cjs",
22 |   "module": "./dist/dynamic-island.js",
23 |   "exports": {
24 |     ".": {
25 |       "import": "./dist/dynamic-island.js",
26 |       "require": "./dist/dynamic-island.umd.cjs"
27 |     },
28 |     "./style.css": "./dist/style.css",
29 |     "./package.json": "./package.json"
30 |   },
31 |   "files": [
32 |     "dist/*",
33 |     "README.md"
34 |   ],
35 |   "scripts": {
36 |     "dev": "vite",
37 |     "docs": "vue-tsc --noEmit && vite build",
38 |     "build": "vue-tsc --noEmit && vite build --config vite.config.lib.ts",
39 |     "preview": "vite preview"
40 |   },
41 |   "dependencies": {
42 |     "vue": "^3.2.37"
43 |   },
44 |   "devDependencies": {
45 |     "@vitejs/plugin-vue": "^3.1.0",
46 |     "typescript": "^4.6.4",
47 |     "vite": "^3.1.0",
48 |     "vue-tsc": "^0.40.4"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/docs/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/examples/GitHubCorner.vue:
--------------------------------------------------------------------------------
 1 | <!-- https://github.com/tholman/github-corners -->
 2 | 
 3 | <script lang="ts" setup>
 4 | defineProps(['url'])
 5 | </script>
 6 | 
 7 | <template>
 8 |   <a :href="url" target="_blank" class="github-corner" aria-label="View source on GitHub">
 9 |     <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
10 |       <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
11 |       <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
12 |     </svg>
13 |   </a>
14 | </template>
15 | 
16 | <style scoped>
17 | .github-corner:hover .octo-arm {
18 |   animation: octocat-wave 560ms ease-in-out
19 | }
20 | @keyframes octocat-wave {
21 |   0%, 100% { transform:rotate(0) }
22 |   20%, 60% { transform:rotate(-25deg) }
23 |   40%, 80% { transform:rotate(10deg) }
24 | }
25 | @media (max-width: 500px) {
26 |   .github-corner:hover .octo-arm {
27 |     animation: none
28 |   }
29 |   .github-corner .octo-arm{
30 |     animation: octocat-wave 560ms ease-in-out
31 |   }
32 | }
33 | </style>
34 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { ref } from 'vue';
  3 | import GitHubCorner from './examples/GitHubCorner.vue';
  4 | import DemoA from './examples/DemoA.vue';
  5 | import DemoB from './examples/DemoB.vue';
  6 | import DemoC from './examples/DemoC.vue';
  7 | // import DynamicIsland from '../../dist/dynamic-island.js';
  8 | // import '../../dist/style.css';
  9 | // import Test from './components/Test.vue'
 10 | 
 11 | const shown = ref(false)
 12 | const warning = ref(false)
 13 | const expanded = ref(false)
 14 | 
 15 | const hasBackground = window.innerWidth > 430
 16 | 
 17 | const key = ref('A')
 18 | const updateDemo = () => {
 19 |   shown.value = false
 20 |   warning.value = false
 21 |   expanded.value = false
 22 | }
 23 | </script>
 24 | 
 25 | <template>
 26 |   <h1>Vue Dynamic Island</h1>
 27 |   <div>
 28 |     <a href="https://vitejs.dev" target="_blank">
 29 |       <img src="/vite.svg" class="logo" alt="Vite logo" />
 30 |     </a>
 31 |     <a href="https://vuejs.org/" target="_blank">
 32 |       <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
 33 |     </a>
 34 |   </div>
 35 |   <!-- <Test /> -->
 36 |   <div class="controls">
 37 |     <p><select v-model="key" @change="updateDemo">
 38 |       <option value="A" selected>Demo A</option>
 39 |       <option value="B" selected>Demo B</option>
 40 |       <option value="C" selected>Demo C</option>
 41 |     </select></p>
 42 |     <p><button @click="expanded = false, shown = !shown, warning = false">Visible</button></p>
 43 |     <p><button :disabled="!shown || warning || expanded" @click="warning = true">Warn</button></p>
 44 |   </div>
 45 |   <div class="stage" :class="{ 'has-background': hasBackground }">
 46 |     <DemoA
 47 |       v-if="key === 'A'"
 48 |       :shown="shown"
 49 |       :warning="warning"
 50 |       :expanded="expanded"
 51 |       @expand="expanded = true"
 52 |       @collapse="expanded = false" />
 53 |     <DemoB
 54 |       v-else-if="key === 'B'"
 55 |       :shown="shown"
 56 |       :warning="warning"
 57 |       :expanded="expanded"
 58 |       @expand="expanded = true"
 59 |       @collapse="expanded = false" />
 60 |     <DemoC
 61 |       v-else-if="key === 'C'"
 62 |       :shown="shown"
 63 |       :warning="warning"
 64 |       :expanded="expanded"
 65 |       @expand="expanded = true"
 66 |       @collapse="expanded = false" />
 67 |   </div>
 68 |   <p class="credits">The iPhone background image is from apple.com.</p>
 69 |   <GitHubCorner url="https://github.com/Jinjiang/v-dynamic-island" />
 70 | </template>
 71 | 
 72 | <style scoped>
 73 | .logo {
 74 |   height: 6em;
 75 |   padding: 1.5em;
 76 |   will-change: filter;
 77 | }
 78 | .logo:hover {
 79 |   filter: drop-shadow(0 0 2em #646cffaa);
 80 | }
 81 | .logo.vue:hover {
 82 |   filter: drop-shadow(0 0 2em #42b883aa);
 83 | }
 84 | 
 85 | .stage {
 86 |   position: relative;
 87 |   width: 100%;
 88 |   height: 438px;
 89 | }
 90 | .stage.has-background {
 91 |   background: white url(./assets/background.png) top center no-repeat;
 92 |   background-size: contain;
 93 |   width: 487px;
 94 |   height: 438px;
 95 | }
 96 | 
 97 | .island {
 98 |   position: absolute;
 99 |   left: 50%;
100 |   top: 35px;
101 |   translate: -50% 0;
102 | }
103 | 
104 | .credits {
105 |   font-size: 0.8em;
106 |   text-align: center;
107 |   color:#42b883aa;
108 | }
109 | </style>
110 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue Dynamic Island
  2 | 
  3 | A Vue (3.x) implementation of Dynamic Island.
  4 | 
  5 | ## How to use
  6 | 
  7 | Install first:
  8 | 
  9 | ```bash
 10 | pnpm install v-dynamic-island
 11 | ```
 12 | 
 13 | Then import into your Vue project:
 14 | 
 15 | ```vue
 16 | <script setup>
 17 | import { ref } from 'vue'
 18 | import { DynamicIsland } from 'v-dynamic-island'
 19 | import 'v-dynamic-island/style.css'
 20 | 
 21 | // to control the display
 22 | const shown = ref(false)
 23 | const expanded = ref(false)
 24 | </script>
 25 | 
 26 | <template>
 27 |   <DynamicIsland :shown="shown" :expanded="expanded">
 28 |     <template #leading>
 29 |       <!-- leading content -->
 30 |     </template>
 31 |     <template #trailing>
 32 |       <!-- trailing content -->
 33 |     </template>
 34 |     <template #expanded>
 35 |       <!-- expanded content -->
 36 |     </template>
 37 |   </DynamicIsland>
 38 | </template>
 39 | ```
 40 | 
 41 | ## Explanations
 42 | 
 43 | The `shown` prop controls whether the island would be enabled.
 44 | 
 45 | The island has two modes: compat mode and expanded mode. The `expanded` prop controls which mode it is on.
 46 | 
 47 | The `#leading` and `#trailing` slots accepts the compat content. The former one is for the left side and the later one is for the right side.
 48 | 
 49 | The `#expanded` slot accepts the expanded content.
 50 | 
 51 | To be notice that the "little-pill" core area (roughly `137px` x `40px`) of the island always shouldn't be able to render anything since that's the place where Apple puts the TrueDepth Camera.
 52 | 
 53 | ## Live examples
 54 | 
 55 | https://jinjiang.dev/v-dynamic-island
 56 | 
 57 | Source code:
 58 | 
 59 | https://github.com/Jinjiang/v-dynamic-island/tree/main/src/examples
 60 | 
 61 | ## Basic APIs
 62 | 
 63 | ### Props
 64 | 
 65 | - `shown`: `boolean`
 66 | - `expanded`: `boolean`
 67 | 
 68 | ### Slots
 69 | 
 70 | - `#leading`
 71 | - `#trailing`
 72 | - `#expanded`
 73 | 
 74 | ### Emits
 75 | 
 76 | - none
 77 | 
 78 | ## Advanced feature
 79 | 
 80 | - Shaking as a warning.
 81 | - Customize device width for the max width of expanded content.
 82 | - "Super element" transitions for leading/trailing content between compat mode and expanded mode.
 83 | - Slots for expanded leading/trailing content.
 84 | 
 85 | ## Advanced APIs
 86 | 
 87 | ### Props
 88 | 
 89 | - `warning`: `boolean`
 90 | 
 91 |   When set to be `true`, the whole island would be shaked for a few times as a warning. According to the original design of Dynamic Island, this prop should only be used on the compat mode.
 92 | 
 93 | - `deviceWidth`: `number`
 94 | 
 95 |   By default the component will auto detect the device width. However, you can explicitly specify a number for that. Usually, it's useful when you prepare a demo on non-iOS devices or laptops.
 96 | 
 97 | - `superLeading`: `boolean` or `{ top, left, size }`
 98 | 
 99 |   By default, `#leading` content will be hidden on the expanded mode. However, if you want to retain it, you can set it to be `true`. So when switching to the expanded mode, `#leading` content would be kept and scaled up.
100 | 
101 |   You can also set it as a customized position and size for its expanded mode.
102 |   
103 |   - The `top` and `left` is the number of pixels from the center of the content to the island edges.
104 |   - The `size` is the number of pixels height, which is used for calculating the scaling transition.
105 | 
106 | - `superTrailing`: `boolean` or `{ top, right, size }`
107 | 
108 |   Similar to `superTrailing` but for `#trailing` content.
109 | 
110 | ### Slots
111 | 
112 | - `#expanded-leading`
113 | - `#expanded-trailing`
114 | 
115 | ### Emits
116 | 
117 | - none
118 | 
119 | ## Specs & default values
120 | 
121 | TrueDepth Camera:
122 | - Size of the cemara: `137px` x `40px`.
123 | 
124 | Compat mode:
125 | - Gap between heading/trailing slots and the TrueDepth Camera: `10px`.
126 | - Height of headling/trailing slots: `40px`.
127 | 
128 | Expanded mode:
129 | - Padding of the expanded slot: top `137px`, other sides `10px`.
130 | - Default height of headling/trailing slots: `80px`.
131 | - Default center of heading slot to the top: `46px`.
132 | - Default center of heading slot to the left: `46px`.
133 | - Default center of trailing slot to the top: `46px`.
134 | - Default center of trailing slot to the right: `46px`.
135 | 


--------------------------------------------------------------------------------
/src/components/DynamicIsland.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | export type Rect = {
  3 |   top?: number
  4 |   left?: number
  5 |   right?: number
  6 |   size?: number
  7 | }
  8 | 
  9 | export type Props = {
 10 |   deviceWidth?: number
 11 |   shown?: boolean
 12 |   expanded?: boolean
 13 |   warning?: boolean
 14 |   superLeading?: boolean | Rect
 15 |   superTrailing?: boolean | Rect
 16 | }
 17 | 
 18 | type TransitionEventHandler = (el: HTMLElement, done: () => void) => void
 19 | </script>
 20 | 
 21 | <script setup lang="ts">
 22 | import { ref } from 'vue';
 23 | 
 24 | // Props
 25 | 
 26 | withDefaults(defineProps<Props>(), {
 27 |   deviceWidth: Math.min(430, window.innerWidth)
 28 | })
 29 | 
 30 | const getRectProp = (rect: boolean | Rect | undefined, key: keyof Rect) => {
 31 |   if (!rect || rect === true) {
 32 |     return undefined
 33 |   }
 34 |   return rect[key]
 35 | }
 36 | 
 37 | // Leading size
 38 | 
 39 | const leadingWidth = ref(0)
 40 | const leadingReady = ref(false)
 41 | 
 42 | const initLeadingSize: TransitionEventHandler = (el, done) => {
 43 |   const { width } = el.getBoundingClientRect()
 44 |   leadingWidth.value = width
 45 |   done()
 46 |   setTimeout(() => {
 47 |     leadingReady.value = true
 48 |   })
 49 | }
 50 | 
 51 | // Trailing size
 52 | 
 53 | const trailingWidth = ref(0)
 54 | const trailingReady = ref(false)
 55 | 
 56 | const initTrailingSize: TransitionEventHandler = (el, done) => {
 57 |   const { width } = el.getBoundingClientRect()
 58 |   trailingWidth.value = width
 59 |   done()
 60 |   setTimeout(() => {
 61 |     trailingReady.value = true
 62 |   })
 63 | }
 64 | 
 65 | // Main size
 66 | 
 67 | const DEFAULT_EXPANDED_HEIGHT = 92
 68 | 
 69 | const mainHeight = ref(DEFAULT_EXPANDED_HEIGHT)
 70 | const mainReady = ref(false)
 71 | 
 72 | const initMainSize: TransitionEventHandler = (el, done) => {
 73 |   const { height } = el.getBoundingClientRect()
 74 |   mainHeight.value = Math.max(height, DEFAULT_EXPANDED_HEIGHT)
 75 |   el.classList.add('main-init')
 76 |   done()
 77 |   setTimeout(() => {
 78 |     mainReady.value = true
 79 |   })
 80 | }
 81 | const resetMainSize: TransitionEventHandler = () => {
 82 |   mainReady.value = false
 83 | }
 84 | </script>
 85 | 
 86 | <template>
 87 |   <div class="container" :class="[
 88 |     {
 89 |       'super-leading': superLeading,
 90 |       'super-trailing': superTrailing,
 91 |       shown, warning, expanded,
 92 |       'leading-ready': leadingReady,
 93 |       'trailing-ready': trailingReady,
 94 |       'main-ready': mainReady
 95 |     }
 96 |   ]" :style="{
 97 |     '--leading-width': leadingWidth,
 98 |     '--trailing-width': trailingWidth,
 99 |     '--main-height': mainHeight,
100 |     '--device-width': deviceWidth,
101 |     '--expanded-leading-size': getRectProp(superLeading, 'size'),
102 |     '--expanded-leading-top': getRectProp(superLeading, 'top'),
103 |     '--expanded-leading-left': getRectProp(superLeading, 'left'),
104 |     '--expanded-trailing-size': getRectProp(superTrailing, 'size'),
105 |     '--expanded-trailing-top': getRectProp(superTrailing, 'top'),
106 |     '--expanded-trailing-right': getRectProp(superTrailing, 'right'),
107 |   }">
108 |     <div class="forbidden"></div>
109 | 
110 |     <div class="content">
111 | 
112 |       <Transition name="leading" @enter="initLeadingSize">
113 |         <div v-if="shown" class="leading slot transition">
114 |           <slot name="leading" />
115 |         </div>
116 |       </Transition>
117 |       <Transition name="leading-bg">
118 |         <div v-if="shown" class="leading-bg transition"></div>
119 |       </Transition>
120 | 
121 |       <Transition name="trailing" @enter="initTrailingSize">
122 |         <div v-if="shown" class="trailing slot transition">
123 |           <slot name="trailing" />
124 |         </div>
125 |       </Transition>
126 |       <Transition name="trailing-bg">
127 |         <div v-if="shown" class="trailing-bg transition"></div>
128 |       </Transition>
129 | 
130 |       <Transition name="main" @enter="initMainSize" @after-leave="resetMainSize">
131 |         <div v-if="shown && expanded" class="main slot transition">
132 | 
133 |           <div class="main-leading slot">
134 |             <slot name="expanded-leading" />
135 |           </div>
136 |           <div class="main-trailing slot">
137 |             <slot name="expanded-trailing" />
138 |           </div>
139 |           <slot name="expanded" />
140 | 
141 |         </div>
142 |       </Transition>
143 |       <Transition name="main-bg">
144 |         <div v-if="shown && expanded" class="main-bg transition"></div>
145 |       </Transition>
146 |     </div>
147 |   </div>
148 | </template>
149 | 
150 | <style scoped src="./DynamicIsland.css"></style>
151 | 


--------------------------------------------------------------------------------
/docs/assets/index.116492c4.css:
--------------------------------------------------------------------------------
1 | :root{font-family:SF Pro Display,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}.card{padding:2em}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.github-corner:hover .octo-arm[data-v-1690c822]{animation:octocat-wave-1690c822 .56s ease-in-out}@keyframes octocat-wave-1690c822{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width: 500px){.github-corner:hover .octo-arm[data-v-1690c822]{animation:none}.github-corner .octo-arm[data-v-1690c822]{animation:octocat-wave-1690c822 .56s ease-in-out}}.container[data-v-4268da68]{--device-width: 430;--forbidden-width: 137;--forbidden-height: 40;--compat-height: var(--forbidden-height);--compat-radius: 20;--compat-size: 40;--compat-max-width: 348;--compat-origin-y: 20;--compat-gap: 10;--expanded-margin: 22;--expanded-padding: 10;--expanded-radius: 46;--expanded-width: calc( var(--device-width) - var(--expanded-margin) * 2 );--expanded-leading-size: 80;--expanded-leading-top: 46;--expanded-leading-left: 46;--expanded-trailing-size: 80;--expanded-trailing-top: 46;--expanded-trailing-right: 46;--leading-width: 0;--trailing-width: 0;--main-height: 92}.container.device-promax[data-v-4268da68]{--device-width: 430}.container.device-pro[data-v-4268da68]{--device-width: 393}.container[data-v-4268da68]{--duration: .4s;--func-resize: cubic-bezier(.25,1,.52,1.1)}.transition[data-v-4268da68]{--transition-blur: opacity var(--duration) ease-out, filter var(--duration) ease-out;--transition-pos: top var(--duration) var(--func-resize), left var(--duration) var(--func-resize), right var(--duration) var(--func-resize);--transition-shape: width var(--duration) var(--func-resize), height var(--duration) var(--func-resize), border-radius var(--duration) var(--func-resize), box-shadow var(--duration) ease-out;--transition-transform: transform var(--duration) var(--func-resize)}.debugger .container[data-v-4268da68]{--duration: 1s}.container[data-v-4268da68]{width:0;height:0;position:relative}.forbidden[data-v-4268da68]{position:absolute;top:0;left:0;transform:translate(-50%);width:calc(var(--forbidden-width) * 1px);height:calc(var(--compat-height) * 1px);background-color:#000;border-radius:calc(var(--compat-radius) * 1px);z-index:10}.content[data-v-4268da68]{position:absolute;top:0;left:0;right:0;bottom:0;color:#fff;font-size:16px;z-index:1}.slot[data-v-4268da68]{display:flex;align-items:center;justify-content:center}.debugger .forbidden[data-v-4268da68]{opacity:.5}.container[data-v-4268da68]{--leading-offset: calc( var(--forbidden-width) / 2 + var(--compat-gap) + var(--leading-width) / 2 );--trailing-offset: calc( var(--forbidden-width) / 2 + var(--compat-gap) + var(--trailing-width) / 2 );--compat-width: calc( var(--leading-width) + var(--trailing-width) + var(--forbidden-width) + var(--compat-gap) * 2 );--leading-offset-start: calc( var(--forbidden-width) / 2 - var(--leading-width) / 2 );--trailing-offset-start: calc( var(--forbidden-width) / 2 - var(--trailing-width) / 2 )}.leading[data-v-4268da68],.trailing[data-v-4268da68]{position:absolute;top:calc(var(--compat-origin-y) * 1px);transform-origin:center center;box-sizing:border-box;max-height:calc(var(--compat-height) * 1px);border-radius:calc(var(--compat-radius) * 1px);white-space:nowrap;overflow:hidden;z-index:5}.leading[data-v-4268da68]{left:calc(var(--leading-offset) * -1px);transform:translate(-50%,-50%)}.trailing[data-v-4268da68]{right:calc(var(--trailing-offset) * -1px);transform:translate(50%,-50%)}.debugger .leading[data-v-4268da68],.debugger .trailing[data-v-4268da68]{outline:red solid 1px}.leading-bg[data-v-4268da68],.trailing-bg[data-v-4268da68]{position:absolute;top:0;height:calc(var(--compat-height) * 1px);background-color:#000;z-index:-1}.leading-bg[data-v-4268da68]{width:calc(var(--leading-width) * 1px);height:calc(var(--compat-height) * 1px);left:calc((var(--leading-offset) + var(--leading-width) / 2) * -1px);border-top-left-radius:calc(var(--compat-radius) * 1px);border-bottom-left-radius:calc(var(--compat-radius) * 1px)}.trailing-bg[data-v-4268da68]{width:calc(var(--trailing-width) * 1px);height:calc(var(--compat-height) * 1px);right:calc((var(--trailing-offset) + var(--trailing-width) / 2) * -1px);border-top-right-radius:calc(var(--compat-radius) * 1px);border-bottom-right-radius:calc(var(--compat-radius) * 1px)}.leading-bg[data-v-4268da68]:after,.trailing-bg[data-v-4268da68]:after{content:"";position:absolute;top:0;bottom:0;background-color:#000}.leading-bg[data-v-4268da68]:after{width:calc(var(--leading-offset) * 1px);left:calc(var(--compat-radius) * 1px)}.trailing-bg[data-v-4268da68]:after{width:calc(var(--trailing-offset) * 1px);right:calc(var(--compat-radius) * 1px)}.debugger .leading-bg[data-v-4268da68],.debugger .trailing-bg[data-v-4268da68],.debugger .leading-bg[data-v-4268da68]:after,.debugger .trailing-bg[data-v-4268da68]:after{background-color:#00ffff80}.leading[data-v-4268da68],.trailing[data-v-4268da68],.leading-bg[data-v-4268da68],.trailing-bg[data-v-4268da68]{transition:var(--transition-blur)}.leading-ready .leading[data-v-4268da68],.trailing-ready .trailing[data-v-4268da68],.leading-ready .leading-bg[data-v-4268da68],.trailing-ready .trailing-bg[data-v-4268da68]{transition:var(--transition-blur),var(--transition-pos),transform var(--duration) var(--func-resize)}.leading-bg[data-v-4268da68]:after,.trailing-bg[data-v-4268da68]:after{transition:width var(--duration) ease-out}.leading-leave-active[data-v-4268da68],.trailing-leave-active[data-v-4268da68],.leading-bg-leave-active[data-v-4268da68],.trailing-bg-leave-active[data-v-4268da68]{--func-resize: ease-out}.leading-enter-from[data-v-4268da68],.leading-leave-to[data-v-4268da68]{left:calc(var(--leading-offset-start) * -1px);opacity:0;filter:blur(4px)}.trailing-enter-from[data-v-4268da68],.trailing-leave-to[data-v-4268da68]{right:calc(var(--trailing-offset-start) * -1px);opacity:0;filter:blur(4px)}.leading-bg-enter-from[data-v-4268da68],.leading-bg-leave-to[data-v-4268da68]{left:calc(var(--leading-offset-start) * -1px)}.trailing-bg-enter-from[data-v-4268da68],.trailing-bg-leave-to[data-v-4268da68]{right:calc(var(--trailing-offset-start) * -1px)}.leading-bg-enter-from[data-v-4268da68]:after,.leading-bg-leave-to[data-v-4268da68]:after,.trailing-bg-enter-from[data-v-4268da68]:after,.trailing-bg-leave-to[data-v-4268da68]:after{width:calc(var(--forbidden-width) / 2 * 1px)}.expanded .leading[data-v-4268da68]{top:calc(var(--expanded-leading-top) * 1px);left:calc((var(--expanded-leading-left) - var(--expanded-width) / 2) * 1px);transform:translate(-50%,-50%) scale(calc(var(--expanded-leading-size) / var(--compat-size)))}.expanded .trailing[data-v-4268da68]{top:calc(var(--expanded-trailing-top) * 1px);right:calc((var(--expanded-trailing-right) - var(--expanded-width) / 2) * 1px);transform:translate(50%,-50%) scale(calc(var(--expanded-trailing-size) / var(--compat-size)))}.expanded .leading[data-v-4268da68],.expanded .trailing[data-v-4268da68]{opacity:0;filter:blur(4px);z-index:2}.expanded.super-leading .leading[data-v-4268da68],.expanded.super-trailing .trailing[data-v-4268da68]{opacity:1;filter:none;z-index:5}.expanded .leading[data-v-4268da68],.expanded .trailing[data-v-4268da68]{transition:var(--transition-blur),var(--transition-pos),transform var(--duration) var(--func-resize)}.main-ready .leading[data-v-4268da68],.main-ready .trailing[data-v-4268da68]{--func-resize: ease-out}.main[data-v-4268da68],.main-bg[data-v-4268da68]{position:absolute;top:0;box-sizing:border-box;left:0;width:calc(var(--expanded-width) * 1px);transform:translate(-50%);transform-origin:top center;border-radius:calc(var(--expanded-radius) * 1px);overflow:hidden}.main[data-v-4268da68]{flex-direction:column;padding:calc(var(--expanded-padding) * 1px);padding-top:calc(var(--compat-height) * 1px);z-index:3}.main-ready .main[data-v-4268da68]{height:calc(var(--main-height) * 1px)}.main-bg[data-v-4268da68]{z-index:-1;height:calc(var(--main-height) * 1px);background-color:#000;box-shadow:0 10px 20px #00000080}.debugger .main[data-v-4268da68]{outline:red solid 1px}.debugger .main-bg[data-v-4268da68]{background-color:#00ffff80}.main[data-v-4268da68]{transition:var(--transition-blur)}.main-ready .main[data-v-4268da68]{transition:var(--transition-blur),var(--transition-transform)}.main-leave-active[data-v-4268da68]{--func-resize: ease-out}.main-enter-from[data-v-4268da68],.main-leave-to[data-v-4268da68]{opacity:0;filter:blur(4px)}.main.main-init[data-v-4268da68],.main-ready .main.main-enter-from[data-v-4268da68],.main-ready .main.main-leave-to[data-v-4268da68]{transform:translate(-50%) scale(calc(var(--compat-width) / var(--expanded-width)),calc(var(--compat-height) / var(--main-height)))}.main-ready .main[data-v-4268da68]{transform:translate(-50%)}.main-bg[data-v-4268da68]{transition:var(--transition-blur)}.main-ready .main-bg[data-v-4268da68]{transition:var(--transition-blur),var(--transition-shape)}.main-bg-leave-active[data-v-4268da68]{--func-resize: ease-out}.main-bg[data-v-4268da68],.main-bg-enter-from[data-v-4268da68],.main-bg-leave-to[data-v-4268da68]{opacity:.9}.main-bg[data-v-4268da68],.main-ready .main-bg.main-bg-enter-from[data-v-4268da68],.main-ready .main-bg.main-bg-leave-to[data-v-4268da68]{width:calc(var(--compat-width) * 1px);height:calc(var(--compat-height) * 1px);border-radius:calc(var(--compat-radius) * 1px);box-shadow:none}.main-ready:not(.shown) .main-bg.main-bg-enter-from[data-v-4268da68],.main-ready:not(.shown) .main-bg.main-bg-leave-to[data-v-4268da68]{width:calc(var(--forbidden-width) * 1px)}.main-ready .main-bg[data-v-4268da68]{width:calc(var(--expanded-width) * 1px);height:calc(var(--main-height) * 1px);border-radius:calc(var(--expanded-radius) * 1px);box-shadow:0 10px 20px #00000080;opacity:1}.main-leading[data-v-4268da68],.main-trailing[data-v-4268da68]{position:absolute;transform-origin:center center;box-sizing:border-box;white-space:nowrap}.main-leading[data-v-4268da68]{top:calc(var(--expanded-leading-top) * 1px);left:calc(var(--expanded-leading-left) * 1px);transform:translate(-50%,-50%)}.main-trailing[data-v-4268da68]{top:calc(var(--expanded-trailing-top) * 1px);right:calc(var(--expanded-trailing-right) * 1px);transform:translate(50%,-50%)}.main-leading[data-v-4268da68]:empty,.main-trailing[data-v-4268da68]:empty{display:none}.debugger .main-leading[data-v-4268da68],.debugger .main-trailing[data-v-4268da68]{outline:red solid 1px}.warning>.content[data-v-4268da68]{animation:shake-4268da68 .2s 2}@keyframes shake-4268da68{0%{transform:translate(0)}25%{transform:translate(-5px)}50%{transform:translate(0)}75%{transform:translate(5px)}to{transform:translate(0)}}.bottom[data-v-5178ebfc]{width:100%;height:60px;border-radius:0 0 35px 35px;margin-top:50px;background-color:#ffffff80}.logo[data-v-bd2345cf]{height:6em;padding:1.5em;will-change:filter}.logo[data-v-bd2345cf]:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.vue[data-v-bd2345cf]:hover{filter:drop-shadow(0 0 2em #42b883aa)}.stage[data-v-bd2345cf]{position:relative;width:100%;height:438px}.stage.has-background[data-v-bd2345cf]{background:white url(/v-dynamic-island/assets/background.275da8c0.png) top center no-repeat;background-size:contain;width:487px;height:438px}.island[data-v-bd2345cf]{position:absolute;left:50%;top:35px;translate:-50% 0}.credits[data-v-bd2345cf]{font-size:.8em;text-align:center;color:#42b883aa}
2 | 


--------------------------------------------------------------------------------
/src/components/DynamicIsland.css:
--------------------------------------------------------------------------------
  1 | /* variables: size */
  2 | 
  3 | .container {
  4 |   /* customizable */
  5 |   --device-width: 430;
  6 | 
  7 |   --forbidden-width: 137;
  8 |   --forbidden-height: 40;
  9 | 
 10 |   --compat-height: var(--forbidden-height);
 11 |   --compat-radius: 20;
 12 |   --compat-size: 40;
 13 |   --compat-max-width: 348;
 14 |   --compat-origin-y: 20;
 15 |   --compat-gap: 10;
 16 | 
 17 |   --expanded-margin: 22;
 18 |   --expanded-padding: 10;
 19 |   --expanded-radius: 46;
 20 |   --expanded-width: calc(
 21 |     var(--device-width) -
 22 |     var(--expanded-margin) * 2
 23 |   );
 24 | 
 25 |   /* customizable */
 26 |   --expanded-leading-size: 80;
 27 |   --expanded-leading-top: 46;
 28 |   --expanded-leading-left: 46;
 29 |   --expanded-trailing-size: 80;
 30 |   --expanded-trailing-top: 46;
 31 |   --expanded-trailing-right: 46;
 32 | 
 33 |   /* get from the dom */
 34 |   --leading-width: 0;
 35 |   --trailing-width: 0;
 36 |   --main-height: 92;
 37 | }
 38 | .container.device-promax {
 39 |   --device-width: 430;
 40 | }
 41 | .container.device-pro {
 42 |   --device-width: 393;
 43 | }
 44 | 
 45 | /* variables: transition */
 46 | 
 47 | .container {
 48 |   --duration: .4s;
 49 |   --func-resize: cubic-bezier(.25,1,.52,1.1);
 50 | }
 51 | .transition {
 52 |   --transition-blur:
 53 |     opacity var(--duration) ease-out,
 54 |     filter var(--duration) ease-out;
 55 |   --transition-pos:
 56 |     top var(--duration) var(--func-resize),
 57 |     left var(--duration) var(--func-resize),
 58 |     right var(--duration) var(--func-resize);
 59 |   --transition-shape:
 60 |     width var(--duration) var(--func-resize),
 61 |     height var(--duration) var(--func-resize),
 62 |     border-radius var(--duration) var(--func-resize),
 63 |     box-shadow var(--duration) ease-out;
 64 |   --transition-transform:
 65 |     transform var(--duration) var(--func-resize);
 66 | }
 67 | 
 68 | .debugger .container {
 69 |   --duration: 1s;
 70 |   /* --duration: 5s; */
 71 |   /* --duration: 100s; */
 72 | }
 73 | 
 74 | /* layout */
 75 | 
 76 | .container {
 77 |   width: 0;
 78 |   height: 0;
 79 |   position: relative;
 80 | }
 81 | .forbidden {
 82 |   position: absolute;
 83 |   top: 0;
 84 |   left: 0;
 85 |   transform: translateX(-50%);
 86 |   width: calc(var(--forbidden-width) * 1px);
 87 |   height: calc(var(--compat-height) * 1px);
 88 |   background-color: black;
 89 |   border-radius: calc(var(--compat-radius) * 1px);
 90 |   z-index: 10;
 91 | }
 92 | .content {
 93 |   position: absolute;
 94 |   top: 0;
 95 |   left: 0;
 96 |   right: 0;
 97 |   bottom: 0;
 98 |   color: white;
 99 |   font-size: 16px;
100 |   z-index: 1;
101 | }
102 | .slot {
103 |   display: flex;
104 |   align-items: center;
105 |   justify-content: center;
106 | }
107 | 
108 | .debugger .forbidden {
109 |   opacity: 0.5;
110 | }
111 | 
112 | /* leading & trailing */
113 | 
114 | .container {
115 |   --leading-offset: calc(
116 |     var(--forbidden-width) / 2 +
117 |     var(--compat-gap) +
118 |     var(--leading-width) / 2
119 |   );
120 |   --trailing-offset: calc(
121 |     var(--forbidden-width) / 2 +
122 |     var(--compat-gap) +
123 |     var(--trailing-width) / 2
124 |   );
125 |   --compat-width: calc(
126 |     var(--leading-width) +
127 |     var(--trailing-width) +
128 |     var(--forbidden-width) +
129 |     var(--compat-gap) * 2
130 |   );
131 |   --leading-offset-start: calc(
132 |     var(--forbidden-width) / 2 -
133 |     var(--leading-width) / 2
134 |   );
135 |   --trailing-offset-start: calc(
136 |     var(--forbidden-width) / 2 -
137 |     var(--trailing-width) / 2
138 |   );
139 | }
140 | 
141 | .leading,
142 | .trailing {
143 |   position: absolute;
144 |   top: calc(var(--compat-origin-y) * 1px);
145 |   transform-origin: center center;
146 |   box-sizing: border-box;
147 |   max-height: calc(var(--compat-height) * 1px);
148 |   border-radius: calc(var(--compat-radius) * 1px);
149 |   white-space: nowrap;
150 |   overflow: hidden;
151 |   z-index: 5;
152 | }
153 | .leading {
154 |   left: calc(var(--leading-offset) * -1px);
155 |   transform: translate(-50%, -50%);
156 | }
157 | .trailing {
158 |   right: calc(var(--trailing-offset) * -1px);
159 |   transform: translate(50%, -50%);
160 | }
161 | 
162 | .debugger .leading,
163 | .debugger .trailing {
164 |   outline: red solid 1px;
165 | }
166 | 
167 | /* leading & trailing: background */
168 | 
169 | .leading-bg,
170 | .trailing-bg {
171 |   position: absolute;
172 |   top: 0;
173 |   height: calc(var(--compat-height) * 1px);
174 |   background-color: black;
175 |   z-index: -1;
176 | }
177 | .leading-bg {
178 |   width: calc(var(--leading-width) * 1px);
179 |   height: calc(var(--compat-height) * 1px);
180 |   left: calc((var(--leading-offset) + var(--leading-width) / 2) * -1px);
181 |   border-top-left-radius: calc(var(--compat-radius) * 1px);
182 |   border-bottom-left-radius: calc(var(--compat-radius) * 1px);
183 | }
184 | .trailing-bg {
185 |   width: calc(var(--trailing-width) * 1px);
186 |   height: calc(var(--compat-height) * 1px);
187 |   right: calc((var(--trailing-offset) + var(--trailing-width) / 2) * -1px);
188 |   border-top-right-radius: calc(var(--compat-radius) * 1px);
189 |   border-bottom-right-radius: calc(var(--compat-radius) * 1px);
190 | }
191 | 
192 | .leading-bg::after,
193 | .trailing-bg::after {
194 |   content: "";
195 |   position: absolute;
196 |   top: 0;
197 |   bottom: 0;
198 |   background-color: black;
199 | }
200 | .leading-bg::after {
201 |   width: calc(var(--leading-offset) * 1px);
202 |   left: calc(var(--compat-radius) * 1px);
203 | }
204 | .trailing-bg::after {
205 |   width: calc(var(--trailing-offset) * 1px);
206 |   right: calc(var(--compat-radius) * 1px);
207 | }
208 | 
209 | .debugger .leading-bg,
210 | .debugger .trailing-bg,
211 | .debugger .leading-bg::after,
212 | .debugger .trailing-bg::after {
213 |   background-color: rgba(0, 255, 255, .5);
214 | }
215 | 
216 | /* leading & trailing & background: animation */
217 | 
218 | .leading,
219 | .trailing,
220 | .leading-bg,
221 | .trailing-bg {
222 |   transition: var(--transition-blur);
223 | }
224 | .leading-ready .leading,
225 | .trailing-ready .trailing,
226 | .leading-ready .leading-bg,
227 | .trailing-ready .trailing-bg {
228 |   transition:
229 |     var(--transition-blur),
230 |     var(--transition-pos),
231 |     transform var(--duration) var(--func-resize);
232 | }
233 | .leading-bg::after,
234 | .trailing-bg::after {
235 |   transition: width var(--duration) ease-out;
236 | }
237 | .leading-leave-active,
238 | .trailing-leave-active,
239 | .leading-bg-leave-active,
240 | .trailing-bg-leave-active {
241 |   --func-resize: ease-out;
242 | }
243 | 
244 | .leading-enter-from,
245 | .leading-leave-to {
246 |   left: calc(var(--leading-offset-start) * -1px);
247 |   opacity: 0;
248 |   filter: blur(4px);
249 | }
250 | .trailing-enter-from,
251 | .trailing-leave-to {
252 |   right: calc(var(--trailing-offset-start) * -1px);
253 |   opacity: 0;
254 |   filter: blur(4px);
255 | }
256 | .leading-bg-enter-from,
257 | .leading-bg-leave-to {
258 |   left: calc(var(--leading-offset-start) * -1px);
259 | }
260 | .trailing-bg-enter-from,
261 | .trailing-bg-leave-to {
262 |   right: calc(var(--trailing-offset-start) * -1px);
263 | }
264 | 
265 | .leading-bg-enter-from::after,
266 | .leading-bg-leave-to::after,
267 | .trailing-bg-enter-from::after,
268 | .trailing-bg-leave-to::after {
269 |   width: calc(var(--forbidden-width) / 2 * 1px);
270 | }
271 | 
272 | /* leading & trailing: expanded */
273 | 
274 | .expanded .leading {
275 |   top: calc(var(--expanded-leading-top) * 1px);
276 |   left: calc(
277 |     (
278 |       var(--expanded-leading-left) -
279 |       var(--expanded-width) / 2
280 |     ) * 1px
281 |   );
282 |   transform:
283 |     translate(-50%, -50%)
284 |     scale(calc(
285 |       var(--expanded-leading-size) / var(--compat-size)
286 |     ));
287 | }
288 | .expanded .trailing {
289 |   top: calc(var(--expanded-trailing-top) * 1px);
290 |   right: calc(
291 |     (
292 |       var(--expanded-trailing-right) -
293 |       var(--expanded-width) / 2
294 |     ) * 1px
295 |   );
296 |   transform:
297 |     translate(50%, -50%)
298 |     scale(calc(
299 |       var(--expanded-trailing-size) / var(--compat-size)
300 |     ));
301 | }
302 | 
303 | /* leading & trailing: expanded: animation */
304 | 
305 | .expanded .leading,
306 | .expanded .trailing {
307 |   opacity: 0;
308 |   filter: blur(4px);
309 |   z-index: 2;
310 | }
311 | .expanded.super-leading .leading,
312 | .expanded.super-trailing .trailing {
313 |   opacity: 1;
314 |   filter: none;
315 |   z-index: 5;
316 | }
317 | 
318 | .expanded .leading,
319 | .expanded .trailing {
320 |   transition:
321 |     var(--transition-blur),
322 |     var(--transition-pos),
323 |     transform var(--duration) var(--func-resize);
324 | }
325 | .main-ready .leading,
326 | .main-ready .trailing {
327 |   --func-resize: ease-out;
328 | }
329 | 
330 | /* main */
331 | 
332 | .main,
333 | .main-bg {
334 |   position: absolute;
335 |   top: 0;
336 |   box-sizing: border-box;
337 |   left: 0;
338 |   width: calc(var(--expanded-width) * 1px);
339 |   transform: translateX(-50%);
340 |   transform-origin: top center;
341 |   border-radius: calc(var(--expanded-radius) * 1px);
342 |   overflow: hidden;
343 | }
344 | .main {
345 |   flex-direction: column;
346 |   padding: calc(var(--expanded-padding) * 1px);
347 |   padding-top: calc(var(--compat-height) * 1px);
348 |   z-index: 3;
349 | }
350 | .main-ready .main {
351 |   height: calc(var(--main-height) * 1px);
352 | }
353 | .main-bg {
354 |   z-index: -1;
355 |   height: calc(var(--main-height) * 1px);
356 |   background-color: black;
357 |   box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
358 | }
359 | 
360 | .debugger .main {
361 |   outline: red solid 1px;
362 | }
363 | .debugger .main-bg {
364 |   background-color: rgba(0, 255, 255, .5);
365 | }
366 | 
367 | /* main: animation */
368 | 
369 | .main {
370 |   transition:
371 |     var(--transition-blur);
372 | }
373 | .main-ready .main {
374 |   transition:
375 |     var(--transition-blur),
376 |     var(--transition-transform);
377 | }
378 | .main-leave-active {
379 |   --func-resize: ease-out;
380 | }
381 | 
382 | .main-enter-from,
383 | .main-leave-to {
384 |   opacity: 0;
385 |   filter: blur(4px);
386 | }
387 | .main.main-init,
388 | .main-ready .main.main-enter-from,
389 | .main-ready .main.main-leave-to {
390 |   transform:
391 |     translateX(-50%)
392 |     scale(
393 |       calc(var(--compat-width) / var(--expanded-width)),
394 |       calc(var(--compat-height) / var(--main-height))
395 |     );
396 | }
397 | .main-ready .main {
398 |   transform: translateX(-50%);
399 | }
400 | 
401 | .main-bg {
402 |   transition:
403 |     var(--transition-blur);
404 | }
405 | .main-ready .main-bg {
406 |   transition:
407 |   var(--transition-blur),
408 |   var(--transition-shape);
409 | }
410 | .main-bg-leave-active {
411 |   --func-resize: ease-out;
412 | }
413 | 
414 | .main-bg,
415 | .main-bg-enter-from,
416 | .main-bg-leave-to {
417 |   opacity: 0.9;
418 | }
419 | .main-bg,
420 | .main-ready .main-bg.main-bg-enter-from,
421 | .main-ready .main-bg.main-bg-leave-to {
422 |   width: calc(var(--compat-width) * 1px);
423 |   height: calc(var(--compat-height) * 1px);
424 |   border-radius: calc(var(--compat-radius) * 1px);
425 |   box-shadow: none;
426 | }
427 | .main-ready:not(.shown) .main-bg.main-bg-enter-from,
428 | .main-ready:not(.shown) .main-bg.main-bg-leave-to {
429 |   width: calc(var(--forbidden-width) * 1px);
430 | }
431 | .main-ready .main-bg {
432 |   width: calc(var(--expanded-width) * 1px);
433 |   height: calc(var(--main-height) * 1px);
434 |   border-radius: calc(var(--expanded-radius) * 1px);
435 |   box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
436 |   opacity: 1;
437 | }
438 | 
439 | /* expanded leading & trailing */
440 | 
441 | .main-leading,
442 | .main-trailing {
443 |   position: absolute;
444 |   transform-origin: center center;
445 |   box-sizing: border-box;
446 |   white-space: nowrap;
447 | }
448 | .main-leading {
449 |   top: calc(var(--expanded-leading-top) * 1px);
450 |   left: calc(var(--expanded-leading-left) * 1px);
451 |   transform: translate(-50%, -50%);
452 | }
453 | .main-trailing {
454 |   top: calc(var(--expanded-trailing-top) * 1px);
455 |   right: calc(var(--expanded-trailing-right) * 1px);
456 |   transform: translate(50%, -50%);
457 | }
458 | .main-leading:empty,
459 | .main-trailing:empty {
460 |   display: none;
461 | }
462 | 
463 | .debugger .main-leading,
464 | .debugger .main-trailing {
465 |   outline: red solid 1px;
466 | }
467 | 
468 | /* warning */
469 | 
470 | .warning > .content {
471 |   animation: shake 0.2s 2;
472 | }
473 | 
474 | @keyframes shake {
475 |   0% {
476 |     transform: translateX(0);
477 |   }
478 |   25% {
479 |     transform: translateX(-5px);
480 |   }
481 |   50% {
482 |     transform: translateX(0);
483 |   }
484 |   75% {
485 |     transform: translateX(5px);
486 |   }
487 |   100% {
488 |     transform: translateX(0);
489 |   }
490 | }
491 | 


--------------------------------------------------------------------------------
/pnpm-lock.yaml:
--------------------------------------------------------------------------------
  1 | lockfileVersion: 5.4
  2 | 
  3 | specifiers:
  4 |   '@vitejs/plugin-vue': ^3.1.0
  5 |   typescript: ^4.6.4
  6 |   vite: ^3.1.0
  7 |   vue: ^3.2.37
  8 |   vue-tsc: ^0.40.4
  9 | 
 10 | dependencies:
 11 |   vue: 3.2.38
 12 | 
 13 | devDependencies:
 14 |   '@vitejs/plugin-vue': 3.1.0_vite@3.1.0+vue@3.2.38
 15 |   typescript: 4.8.2
 16 |   vite: 3.1.0
 17 |   vue-tsc: 0.40.11_typescript@4.8.2
 18 | 
 19 | packages:
 20 | 
 21 |   /@babel/helper-string-parser/7.18.10:
 22 |     resolution: {integrity: sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==}
 23 |     engines: {node: '>=6.9.0'}
 24 | 
 25 |   /@babel/helper-validator-identifier/7.18.6:
 26 |     resolution: {integrity: sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==}
 27 |     engines: {node: '>=6.9.0'}
 28 | 
 29 |   /@babel/parser/7.19.0:
 30 |     resolution: {integrity: sha512-74bEXKX2h+8rrfQUfsBfuZZHzsEs6Eql4pqy/T4Nn6Y9wNPggQOqD6z6pn5Bl8ZfysKouFZT/UXEH94ummEeQw==}
 31 |     engines: {node: '>=6.0.0'}
 32 |     hasBin: true
 33 |     dependencies:
 34 |       '@babel/types': 7.19.0
 35 | 
 36 |   /@babel/types/7.19.0:
 37 |     resolution: {integrity: sha512-YuGopBq3ke25BVSiS6fgF49Ul9gH1x70Bcr6bqRLjWCkcX8Hre1/5+z+IiWOIerRMSSEfGZVB9z9kyq7wVs9YA==}
 38 |     engines: {node: '>=6.9.0'}
 39 |     dependencies:
 40 |       '@babel/helper-string-parser': 7.18.10
 41 |       '@babel/helper-validator-identifier': 7.18.6
 42 |       to-fast-properties: 2.0.0
 43 | 
 44 |   /@esbuild/linux-loong64/0.15.7:
 45 |     resolution: {integrity: sha512-IKznSJOsVUuyt7cDzzSZyqBEcZe+7WlBqTVXiF1OXP/4Nm387ToaXZ0fyLwI1iBlI/bzpxVq411QE2/Bt2XWWw==}
 46 |     engines: {node: '>=12'}
 47 |     cpu: [loong64]
 48 |     os: [linux]
 49 |     requiresBuild: true
 50 |     dev: true
 51 |     optional: true
 52 | 
 53 |   /@vitejs/plugin-vue/3.1.0_vite@3.1.0+vue@3.2.38:
 54 |     resolution: {integrity: sha512-fmxtHPjSOEIRg6vHYDaem+97iwCUg/uSIaTzp98lhELt2ISOQuDo2hbkBdXod0g15IhfPMQmAxh4heUks2zvDA==}
 55 |     engines: {node: ^14.18.0 || >=16.0.0}
 56 |     peerDependencies:
 57 |       vite: ^3.0.0
 58 |       vue: ^3.2.25
 59 |     dependencies:
 60 |       vite: 3.1.0
 61 |       vue: 3.2.38
 62 |     dev: true
 63 | 
 64 |   /@volar/code-gen/0.40.11:
 65 |     resolution: {integrity: sha512-Z2mgtd0L2MH5RTW3jJzGPfh4oOu5Bn000fctLj0cz/gPESP9OagBAqWyptvvid92qDX6ZqFwAhFjq29thCSM9w==}
 66 |     dependencies:
 67 |       '@volar/source-map': 0.40.11
 68 |     dev: true
 69 | 
 70 |   /@volar/source-map/0.40.11:
 71 |     resolution: {integrity: sha512-bov3x/mJ0rd8X4YKn7Y2wAHsDJ9dOTMOp95hAEWhUYNKZp8WjegQPY56WFJWWzjs8RQrLIo2edZVgm5HqyqWXQ==}
 72 |     dependencies:
 73 |       '@vue/reactivity': 3.2.38
 74 |     dev: true
 75 | 
 76 |   /@volar/typescript-faster/0.40.11:
 77 |     resolution: {integrity: sha512-ZUDjZfviGL/aodBEKxByufwI829W65Wdmf0j0atBrGfPxb9QBtuFUWiciMBol7a/ZuSURF2zwPxU/b5hZpftAg==}
 78 |     dependencies:
 79 |       semver: 7.3.7
 80 |     dev: true
 81 | 
 82 |   /@volar/vue-language-core/0.40.11:
 83 |     resolution: {integrity: sha512-yxzE1VM0963jOdYgbA+f3yyZK4UoG5bsss5h563/4aRdWn13G2a33MljHnsO6JorHtUjvx4QfF1RLnAv4fmsRg==}
 84 |     dependencies:
 85 |       '@volar/code-gen': 0.40.11
 86 |       '@volar/source-map': 0.40.11
 87 |       '@vue/compiler-core': 3.2.38
 88 |       '@vue/compiler-dom': 3.2.38
 89 |       '@vue/compiler-sfc': 3.2.38
 90 |       '@vue/reactivity': 3.2.38
 91 |       '@vue/shared': 3.2.38
 92 |     dev: true
 93 | 
 94 |   /@volar/vue-typescript/0.40.11:
 95 |     resolution: {integrity: sha512-5MC4ajCFIMnh/jDnTqhAENhrmxfLYfQEMkNolqjCU0BqZ8OVk80ViF6bRagvlz+YckXM2l6KCsMcfrm5mdxPmg==}
 96 |     dependencies:
 97 |       '@volar/code-gen': 0.40.11
 98 |       '@volar/typescript-faster': 0.40.11
 99 |       '@volar/vue-language-core': 0.40.11
100 |     dev: true
101 | 
102 |   /@vue/compiler-core/3.2.38:
103 |     resolution: {integrity: sha512-/FsvnSu7Z+lkd/8KXMa4yYNUiqQrI22135gfsQYVGuh5tqEgOB0XqrUdb/KnCLa5+TmQLPwvyUnKMyCpu+SX3Q==}
104 |     dependencies:
105 |       '@babel/parser': 7.19.0
106 |       '@vue/shared': 3.2.38
107 |       estree-walker: 2.0.2
108 |       source-map: 0.6.1
109 | 
110 |   /@vue/compiler-dom/3.2.38:
111 |     resolution: {integrity: sha512-zqX4FgUbw56kzHlgYuEEJR8mefFiiyR3u96498+zWPsLeh1WKvgIReoNE+U7gG8bCUdvsrJ0JRmev0Ky6n2O0g==}
112 |     dependencies:
113 |       '@vue/compiler-core': 3.2.38
114 |       '@vue/shared': 3.2.38
115 | 
116 |   /@vue/compiler-sfc/3.2.38:
117 |     resolution: {integrity: sha512-KZjrW32KloMYtTcHAFuw3CqsyWc5X6seb8KbkANSWt3Cz9p2qA8c1GJpSkksFP9ABb6an0FLCFl46ZFXx3kKpg==}
118 |     dependencies:
119 |       '@babel/parser': 7.19.0
120 |       '@vue/compiler-core': 3.2.38
121 |       '@vue/compiler-dom': 3.2.38
122 |       '@vue/compiler-ssr': 3.2.38
123 |       '@vue/reactivity-transform': 3.2.38
124 |       '@vue/shared': 3.2.38
125 |       estree-walker: 2.0.2
126 |       magic-string: 0.25.9
127 |       postcss: 8.4.16
128 |       source-map: 0.6.1
129 | 
130 |   /@vue/compiler-ssr/3.2.38:
131 |     resolution: {integrity: sha512-bm9jOeyv1H3UskNm4S6IfueKjUNFmi2kRweFIGnqaGkkRePjwEcfCVqyS3roe7HvF4ugsEkhf4+kIvDhip6XzQ==}
132 |     dependencies:
133 |       '@vue/compiler-dom': 3.2.38
134 |       '@vue/shared': 3.2.38
135 | 
136 |   /@vue/reactivity-transform/3.2.38:
137 |     resolution: {integrity: sha512-3SD3Jmi1yXrDwiNJqQ6fs1x61WsDLqVk4NyKVz78mkaIRh6d3IqtRnptgRfXn+Fzf+m6B1KxBYWq1APj6h4qeA==}
138 |     dependencies:
139 |       '@babel/parser': 7.19.0
140 |       '@vue/compiler-core': 3.2.38
141 |       '@vue/shared': 3.2.38
142 |       estree-walker: 2.0.2
143 |       magic-string: 0.25.9
144 | 
145 |   /@vue/reactivity/3.2.38:
146 |     resolution: {integrity: sha512-6L4myYcH9HG2M25co7/BSo0skKFHpAN8PhkNPM4xRVkyGl1K5M3Jx4rp5bsYhvYze2K4+l+pioN4e6ZwFLUVtw==}
147 |     dependencies:
148 |       '@vue/shared': 3.2.38
149 | 
150 |   /@vue/runtime-core/3.2.38:
151 |     resolution: {integrity: sha512-kk0qiSiXUU/IKxZw31824rxmFzrLr3TL6ZcbrxWTKivadoKupdlzbQM4SlGo4MU6Zzrqv4fzyUasTU1jDoEnzg==}
152 |     dependencies:
153 |       '@vue/reactivity': 3.2.38
154 |       '@vue/shared': 3.2.38
155 | 
156 |   /@vue/runtime-dom/3.2.38:
157 |     resolution: {integrity: sha512-4PKAb/ck2TjxdMSzMsnHViOrrwpudk4/A56uZjhzvusoEU9xqa5dygksbzYepdZeB5NqtRw5fRhWIiQlRVK45A==}
158 |     dependencies:
159 |       '@vue/runtime-core': 3.2.38
160 |       '@vue/shared': 3.2.38
161 |       csstype: 2.6.20
162 | 
163 |   /@vue/server-renderer/3.2.38_vue@3.2.38:
164 |     resolution: {integrity: sha512-pg+JanpbOZ5kEfOZzO2bt02YHd+ELhYP8zPeLU1H0e7lg079NtuuSB8fjLdn58c4Ou8UQ6C1/P+528nXnLPAhA==}
165 |     peerDependencies:
166 |       vue: 3.2.38
167 |     dependencies:
168 |       '@vue/compiler-ssr': 3.2.38
169 |       '@vue/shared': 3.2.38
170 |       vue: 3.2.38
171 | 
172 |   /@vue/shared/3.2.38:
173 |     resolution: {integrity: sha512-dTyhTIRmGXBjxJE+skC8tTWCGLCVc4wQgRRLt8+O9p5ewBAjoBwtCAkLPrtToSr1xltoe3st21Pv953aOZ7alg==}
174 | 
175 |   /csstype/2.6.20:
176 |     resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
177 | 
178 |   /esbuild-android-64/0.15.7:
179 |     resolution: {integrity: sha512-p7rCvdsldhxQr3YHxptf1Jcd86dlhvc3EQmQJaZzzuAxefO9PvcI0GLOa5nCWem1AJ8iMRu9w0r5TG8pHmbi9w==}
180 |     engines: {node: '>=12'}
181 |     cpu: [x64]
182 |     os: [android]
183 |     requiresBuild: true
184 |     dev: true
185 |     optional: true
186 | 
187 |   /esbuild-android-arm64/0.15.7:
188 |     resolution: {integrity: sha512-L775l9ynJT7rVqRM5vo+9w5g2ysbOCfsdLV4CWanTZ1k/9Jb3IYlQ06VCI1edhcosTYJRECQFJa3eAvkx72eyQ==}
189 |     engines: {node: '>=12'}
190 |     cpu: [arm64]
191 |     os: [android]
192 |     requiresBuild: true
193 |     dev: true
194 |     optional: true
195 | 
196 |   /esbuild-darwin-64/0.15.7:
197 |     resolution: {integrity: sha512-KGPt3r1c9ww009t2xLB6Vk0YyNOXh7hbjZ3EecHoVDxgtbUlYstMPDaReimKe6eOEfyY4hBEEeTvKwPsiH5WZg==}
198 |     engines: {node: '>=12'}
199 |     cpu: [x64]
200 |     os: [darwin]
201 |     requiresBuild: true
202 |     dev: true
203 |     optional: true
204 | 
205 |   /esbuild-darwin-arm64/0.15.7:
206 |     resolution: {integrity: sha512-kBIHvtVqbSGajN88lYMnR3aIleH3ABZLLFLxwL2stiuIGAjGlQW741NxVTpUHQXUmPzxi6POqc9npkXa8AcSZQ==}
207 |     engines: {node: '>=12'}
208 |     cpu: [arm64]
209 |     os: [darwin]
210 |     requiresBuild: true
211 |     dev: true
212 |     optional: true
213 | 
214 |   /esbuild-freebsd-64/0.15.7:
215 |     resolution: {integrity: sha512-hESZB91qDLV5MEwNxzMxPfbjAhOmtfsr9Wnuci7pY6TtEh4UDuevmGmkUIjX/b+e/k4tcNBMf7SRQ2mdNuK/HQ==}
216 |     engines: {node: '>=12'}
217 |     cpu: [x64]
218 |     os: [freebsd]
219 |     requiresBuild: true
220 |     dev: true
221 |     optional: true
222 | 
223 |   /esbuild-freebsd-arm64/0.15.7:
224 |     resolution: {integrity: sha512-dLFR0ChH5t+b3J8w0fVKGvtwSLWCv7GYT2Y2jFGulF1L5HftQLzVGN+6pi1SivuiVSmTh28FwUhi9PwQicXI6Q==}
225 |     engines: {node: '>=12'}
226 |     cpu: [arm64]
227 |     os: [freebsd]
228 |     requiresBuild: true
229 |     dev: true
230 |     optional: true
231 | 
232 |   /esbuild-linux-32/0.15.7:
233 |     resolution: {integrity: sha512-v3gT/LsONGUZcjbt2swrMjwxo32NJzk+7sAgtxhGx1+ZmOFaTRXBAi1PPfgpeo/J//Un2jIKm/I+qqeo4caJvg==}
234 |     engines: {node: '>=12'}
235 |     cpu: [ia32]
236 |     os: [linux]
237 |     requiresBuild: true
238 |     dev: true
239 |     optional: true
240 | 
241 |   /esbuild-linux-64/0.15.7:
242 |     resolution: {integrity: sha512-LxXEfLAKwOVmm1yecpMmWERBshl+Kv5YJ/1KnyAr6HRHFW8cxOEsEfisD3sVl/RvHyW//lhYUVSuy9jGEfIRAQ==}
243 |     engines: {node: '>=12'}
244 |     cpu: [x64]
245 |     os: [linux]
246 |     requiresBuild: true
247 |     dev: true
248 |     optional: true
249 | 
250 |   /esbuild-linux-arm/0.15.7:
251 |     resolution: {integrity: sha512-JKgAHtMR5f75wJTeuNQbyznZZa+pjiUHV7sRZp42UNdyXC6TiUYMW/8z8yIBAr2Fpad8hM1royZKQisqPABPvQ==}
252 |     engines: {node: '>=12'}
253 |     cpu: [arm]
254 |     os: [linux]
255 |     requiresBuild: true
256 |     dev: true
257 |     optional: true
258 | 
259 |   /esbuild-linux-arm64/0.15.7:
260 |     resolution: {integrity: sha512-P3cfhudpzWDkglutWgXcT2S7Ft7o2e3YDMrP1n0z2dlbUZghUkKCyaWw0zhp4KxEEzt/E7lmrtRu/pGWnwb9vw==}
261 |     engines: {node: '>=12'}
262 |     cpu: [arm64]
263 |     os: [linux]
264 |     requiresBuild: true
265 |     dev: true
266 |     optional: true
267 | 
268 |   /esbuild-linux-mips64le/0.15.7:
269 |     resolution: {integrity: sha512-T7XKuxl0VpeFLCJXub6U+iybiqh0kM/bWOTb4qcPyDDwNVhLUiPcGdG2/0S7F93czUZOKP57YiLV8YQewgLHKw==}
270 |     engines: {node: '>=12'}
271 |     cpu: [mips64el]
272 |     os: [linux]
273 |     requiresBuild: true
274 |     dev: true
275 |     optional: true
276 | 
277 |   /esbuild-linux-ppc64le/0.15.7:
278 |     resolution: {integrity: sha512-6mGuC19WpFN7NYbecMIJjeQgvDb5aMuvyk0PDYBJrqAEMkTwg3Z98kEKuCm6THHRnrgsdr7bp4SruSAxEM4eJw==}
279 |     engines: {node: '>=12'}
280 |     cpu: [ppc64]
281 |     os: [linux]
282 |     requiresBuild: true
283 |     dev: true
284 |     optional: true
285 | 
286 |   /esbuild-linux-riscv64/0.15.7:
287 |     resolution: {integrity: sha512-uUJsezbswAYo/X7OU/P+PuL/EI9WzxsEQXDekfwpQ23uGiooxqoLFAPmXPcRAt941vjlY9jtITEEikWMBr+F/g==}
288 |     engines: {node: '>=12'}
289 |     cpu: [riscv64]
290 |     os: [linux]
291 |     requiresBuild: true
292 |     dev: true
293 |     optional: true
294 | 
295 |   /esbuild-linux-s390x/0.15.7:
296 |     resolution: {integrity: sha512-+tO+xOyTNMc34rXlSxK7aCwJgvQyffqEM5MMdNDEeMU3ss0S6wKvbBOQfgd5jRPblfwJ6b+bKiz0g5nABpY0QQ==}
297 |     engines: {node: '>=12'}
298 |     cpu: [s390x]
299 |     os: [linux]
300 |     requiresBuild: true
301 |     dev: true
302 |     optional: true
303 | 
304 |   /esbuild-netbsd-64/0.15.7:
305 |     resolution: {integrity: sha512-yVc4Wz+Pu3cP5hzm5kIygNPrjar/v5WCSoRmIjCPWfBVJkZNb5brEGKUlf+0Y759D48BCWa0WHrWXaNy0DULTQ==}
306 |     engines: {node: '>=12'}
307 |     cpu: [x64]
308 |     os: [netbsd]
309 |     requiresBuild: true
310 |     dev: true
311 |     optional: true
312 | 
313 |   /esbuild-openbsd-64/0.15.7:
314 |     resolution: {integrity: sha512-GsimbwC4FSR4lN3wf8XmTQ+r8/0YSQo21rWDL0XFFhLHKlzEA4SsT1Tl8bPYu00IU6UWSJ+b3fG/8SB69rcuEQ==}
315 |     engines: {node: '>=12'}
316 |     cpu: [x64]
317 |     os: [openbsd]
318 |     requiresBuild: true
319 |     dev: true
320 |     optional: true
321 | 
322 |   /esbuild-sunos-64/0.15.7:
323 |     resolution: {integrity: sha512-8CDI1aL/ts0mDGbWzjEOGKXnU7p3rDzggHSBtVryQzkSOsjCHRVe0iFYUuhczlxU1R3LN/E7HgUO4NXzGGP/Ag==}
324 |     engines: {node: '>=12'}
325 |     cpu: [x64]
326 |     os: [sunos]
327 |     requiresBuild: true
328 |     dev: true
329 |     optional: true
330 | 
331 |   /esbuild-windows-32/0.15.7:
332 |     resolution: {integrity: sha512-cOnKXUEPS8EGCzRSFa1x6NQjGhGsFlVgjhqGEbLTPsA7x4RRYiy2RKoArNUU4iR2vHmzqS5Gr84MEumO/wxYKA==}
333 |     engines: {node: '>=12'}
334 |     cpu: [ia32]
335 |     os: [win32]
336 |     requiresBuild: true
337 |     dev: true
338 |     optional: true
339 | 
340 |   /esbuild-windows-64/0.15.7:
341 |     resolution: {integrity: sha512-7MI08Ec2sTIDv+zH6StNBKO+2hGUYIT42GmFyW6MBBWWtJhTcQLinKS6ldIN1d52MXIbiJ6nXyCJ+LpL4jBm3Q==}
342 |     engines: {node: '>=12'}
343 |     cpu: [x64]
344 |     os: [win32]
345 |     requiresBuild: true
346 |     dev: true
347 |     optional: true
348 | 
349 |   /esbuild-windows-arm64/0.15.7:
350 |     resolution: {integrity: sha512-R06nmqBlWjKHddhRJYlqDd3Fabx9LFdKcjoOy08YLimwmsswlFBJV4rXzZCxz/b7ZJXvrZgj8DDv1ewE9+StMw==}
351 |     engines: {node: '>=12'}
352 |     cpu: [arm64]
353 |     os: [win32]
354 |     requiresBuild: true
355 |     dev: true
356 |     optional: true
357 | 
358 |   /esbuild/0.15.7:
359 |     resolution: {integrity: sha512-7V8tzllIbAQV1M4QoE52ImKu8hT/NLGlGXkiDsbEU5PS6K8Mn09ZnYoS+dcmHxOS9CRsV4IRAMdT3I67IyUNXw==}
360 |     engines: {node: '>=12'}
361 |     hasBin: true
362 |     requiresBuild: true
363 |     optionalDependencies:
364 |       '@esbuild/linux-loong64': 0.15.7
365 |       esbuild-android-64: 0.15.7
366 |       esbuild-android-arm64: 0.15.7
367 |       esbuild-darwin-64: 0.15.7
368 |       esbuild-darwin-arm64: 0.15.7
369 |       esbuild-freebsd-64: 0.15.7
370 |       esbuild-freebsd-arm64: 0.15.7
371 |       esbuild-linux-32: 0.15.7
372 |       esbuild-linux-64: 0.15.7
373 |       esbuild-linux-arm: 0.15.7
374 |       esbuild-linux-arm64: 0.15.7
375 |       esbuild-linux-mips64le: 0.15.7
376 |       esbuild-linux-ppc64le: 0.15.7
377 |       esbuild-linux-riscv64: 0.15.7
378 |       esbuild-linux-s390x: 0.15.7
379 |       esbuild-netbsd-64: 0.15.7
380 |       esbuild-openbsd-64: 0.15.7
381 |       esbuild-sunos-64: 0.15.7
382 |       esbuild-windows-32: 0.15.7
383 |       esbuild-windows-64: 0.15.7
384 |       esbuild-windows-arm64: 0.15.7
385 |     dev: true
386 | 
387 |   /estree-walker/2.0.2:
388 |     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
389 | 
390 |   /fsevents/2.3.2:
391 |     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
392 |     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
393 |     os: [darwin]
394 |     requiresBuild: true
395 |     dev: true
396 |     optional: true
397 | 
398 |   /function-bind/1.1.1:
399 |     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
400 |     dev: true
401 | 
402 |   /has/1.0.3:
403 |     resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
404 |     engines: {node: '>= 0.4.0'}
405 |     dependencies:
406 |       function-bind: 1.1.1
407 |     dev: true
408 | 
409 |   /is-core-module/2.10.0:
410 |     resolution: {integrity: sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==}
411 |     dependencies:
412 |       has: 1.0.3
413 |     dev: true
414 | 
415 |   /lru-cache/6.0.0:
416 |     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
417 |     engines: {node: '>=10'}
418 |     dependencies:
419 |       yallist: 4.0.0
420 |     dev: true
421 | 
422 |   /magic-string/0.25.9:
423 |     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
424 |     dependencies:
425 |       sourcemap-codec: 1.4.8
426 | 
427 |   /nanoid/3.3.4:
428 |     resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
429 |     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
430 |     hasBin: true
431 | 
432 |   /path-parse/1.0.7:
433 |     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
434 |     dev: true
435 | 
436 |   /picocolors/1.0.0:
437 |     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
438 | 
439 |   /postcss/8.4.16:
440 |     resolution: {integrity: sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==}
441 |     engines: {node: ^10 || ^12 || >=14}
442 |     dependencies:
443 |       nanoid: 3.3.4
444 |       picocolors: 1.0.0
445 |       source-map-js: 1.0.2
446 | 
447 |   /resolve/1.22.1:
448 |     resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
449 |     hasBin: true
450 |     dependencies:
451 |       is-core-module: 2.10.0
452 |       path-parse: 1.0.7
453 |       supports-preserve-symlinks-flag: 1.0.0
454 |     dev: true
455 | 
456 |   /rollup/2.78.1:
457 |     resolution: {integrity: sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==}
458 |     engines: {node: '>=10.0.0'}
459 |     hasBin: true
460 |     optionalDependencies:
461 |       fsevents: 2.3.2
462 |     dev: true
463 | 
464 |   /semver/7.3.7:
465 |     resolution: {integrity: sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==}
466 |     engines: {node: '>=10'}
467 |     hasBin: true
468 |     dependencies:
469 |       lru-cache: 6.0.0
470 |     dev: true
471 | 
472 |   /source-map-js/1.0.2:
473 |     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
474 |     engines: {node: '>=0.10.0'}
475 | 
476 |   /source-map/0.6.1:
477 |     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
478 |     engines: {node: '>=0.10.0'}
479 | 
480 |   /sourcemap-codec/1.4.8:
481 |     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
482 | 
483 |   /supports-preserve-symlinks-flag/1.0.0:
484 |     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
485 |     engines: {node: '>= 0.4'}
486 |     dev: true
487 | 
488 |   /to-fast-properties/2.0.0:
489 |     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
490 |     engines: {node: '>=4'}
491 | 
492 |   /typescript/4.8.2:
493 |     resolution: {integrity: sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw==}
494 |     engines: {node: '>=4.2.0'}
495 |     hasBin: true
496 |     dev: true
497 | 
498 |   /vite/3.1.0:
499 |     resolution: {integrity: sha512-YBg3dUicDpDWFCGttmvMbVyS9ydjntwEjwXRj2KBFwSB8SxmGcudo1yb8FW5+M/G86aS8x828ujnzUVdsLjs9g==}
500 |     engines: {node: ^14.18.0 || >=16.0.0}
501 |     hasBin: true
502 |     peerDependencies:
503 |       less: '*'
504 |       sass: '*'
505 |       stylus: '*'
506 |       terser: ^5.4.0
507 |     peerDependenciesMeta:
508 |       less:
509 |         optional: true
510 |       sass:
511 |         optional: true
512 |       stylus:
513 |         optional: true
514 |       terser:
515 |         optional: true
516 |     dependencies:
517 |       esbuild: 0.15.7
518 |       postcss: 8.4.16
519 |       resolve: 1.22.1
520 |       rollup: 2.78.1
521 |     optionalDependencies:
522 |       fsevents: 2.3.2
523 |     dev: true
524 | 
525 |   /vue-tsc/0.40.11_typescript@4.8.2:
526 |     resolution: {integrity: sha512-kjlyW5hbN9sha7n4R9mBN3DhESMua3Oy0duCj3Mm8+zgCI8C1q0JfEfmqsdF5kwFZ1QMJomMenNCoYYuO0rWQg==}
527 |     hasBin: true
528 |     peerDependencies:
529 |       typescript: '*'
530 |     dependencies:
531 |       '@volar/vue-language-core': 0.40.11
532 |       '@volar/vue-typescript': 0.40.11
533 |       typescript: 4.8.2
534 |     dev: true
535 | 
536 |   /vue/3.2.38:
537 |     resolution: {integrity: sha512-hHrScEFSmDAWL0cwO4B6WO7D3sALZPbfuThDsGBebthrNlDxdJZpGR3WB87VbjpPh96mep1+KzukYEhpHDFa8Q==}
538 |     dependencies:
539 |       '@vue/compiler-dom': 3.2.38
540 |       '@vue/compiler-sfc': 3.2.38
541 |       '@vue/runtime-dom': 3.2.38
542 |       '@vue/server-renderer': 3.2.38_vue@3.2.38
543 |       '@vue/shared': 3.2.38
544 | 
545 |   /yallist/4.0.0:
546 |     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
547 |     dev: true
548 | 


--------------------------------------------------------------------------------
/docs/assets/index.ca74979d.js:
--------------------------------------------------------------------------------
1 | (function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))s(i);new MutationObserver(i=>{for(const r of i)if(r.type==="childList")for(const o of r.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&s(o)}).observe(document,{childList:!0,subtree:!0});function n(i){const r={};return i.integrity&&(r.integrity=i.integrity),i.referrerpolicy&&(r.referrerPolicy=i.referrerpolicy),i.crossorigin==="use-credentials"?r.credentials="include":i.crossorigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function s(i){if(i.ep)return;i.ep=!0;const r=n(i);fetch(i.href,r)}})();function Kn(e,t){const n=Object.create(null),s=e.split(",");for(let i=0;i<s.length;i++)n[s[i]]=!0;return t?i=>!!n[i.toLowerCase()]:i=>!!n[i]}const Qi="itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly",Gi=Kn(Qi);function Xs(e){return!!e||e===""}function nn(e){if($(e)){const t={};for(let n=0;n<e.length;n++){const s=e[n],i=ce(s)?nr(s):nn(s);if(i)for(const r in i)t[r]=i[r]}return t}else{if(ce(e))return e;if(q(e))return e}}const er=/;(?![^(]*\))/g,tr=/:(.+)/;function nr(e){const t={};return e.split(er).forEach(n=>{if(n){const s=n.split(tr);s.length>1&&(t[s[0].trim()]=s[1].trim())}}),t}function St(e){let t="";if(ce(e))t=e;else if($(e))for(let n=0;n<e.length;n++){const s=St(e[n]);s&&(t+=s+" ")}else if(q(e))for(const n in e)e[n]&&(t+=n+" ");return t.trim()}function sr(e,t){if(e.length!==t.length)return!1;let n=!0;for(let s=0;n&&s<e.length;s++)n=sn(e[s],t[s]);return n}function sn(e,t){if(e===t)return!0;let n=gs(e),s=gs(t);if(n||s)return n&&s?e.getTime()===t.getTime():!1;if(n=Ft(e),s=Ft(t),n||s)return e===t;if(n=$(e),s=$(t),n||s)return n&&s?sr(e,t):!1;if(n=q(e),s=q(t),n||s){if(!n||!s)return!1;const i=Object.keys(e).length,r=Object.keys(t).length;if(i!==r)return!1;for(const o in e){const c=e.hasOwnProperty(o),f=t.hasOwnProperty(o);if(c&&!f||!c&&f||!sn(e[o],t[o]))return!1}}return String(e)===String(t)}function ir(e,t){return e.findIndex(n=>sn(n,t))}const K={},pt=[],Ee=()=>{},rr=()=>!1,or=/^on[^a-z]/,rn=e=>or.test(e),zn=e=>e.startsWith("onUpdate:"),ie=Object.assign,Wn=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},lr=Object.prototype.hasOwnProperty,S=(e,t)=>lr.call(e,t),$=Array.isArray,$t=e=>Dt(e)==="[object Map]",Vn=e=>Dt(e)==="[object Set]",gs=e=>Dt(e)==="[object Date]",P=e=>typeof e=="function",ce=e=>typeof e=="string",Ft=e=>typeof e=="symbol",q=e=>e!==null&&typeof e=="object",Qs=e=>q(e)&&P(e.then)&&P(e.catch),cr=Object.prototype.toString,Dt=e=>cr.call(e),fr=e=>Dt(e).slice(8,-1),ur=e=>Dt(e)==="[object Object]",qn=e=>ce(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,Wt=Kn(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),on=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},ar=/-(\w)/g,mt=on(e=>e.replace(ar,(t,n)=>n?n.toUpperCase():"")),dr=/\B([A-Z])/g,bt=on(e=>e.replace(dr,"-$1").toLowerCase()),Gs=on(e=>e.charAt(0).toUpperCase()+e.slice(1)),yn=on(e=>e?`on${Gs(e)}`:""),Lt=(e,t)=>!Object.is(e,t),Vt=(e,t)=>{for(let n=0;n<e.length;n++)e[n](t)},Jt=(e,t,n)=>{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},Jn=e=>{const t=parseFloat(e);return isNaN(t)?e:t};let ms;const pr=()=>ms||(ms=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});let Ae;class hr{constructor(t=!1){this.active=!0,this.effects=[],this.cleanups=[],!t&&Ae&&(this.parent=Ae,this.index=(Ae.scopes||(Ae.scopes=[])).push(this)-1)}run(t){if(this.active){const n=Ae;try{return Ae=this,t()}finally{Ae=n}}}on(){Ae=this}off(){Ae=this.parent}stop(t){if(this.active){let n,s;for(n=0,s=this.effects.length;n<s;n++)this.effects[n].stop();for(n=0,s=this.cleanups.length;n<s;n++)this.cleanups[n]();if(this.scopes)for(n=0,s=this.scopes.length;n<s;n++)this.scopes[n].stop(!0);if(this.parent&&!t){const i=this.parent.scopes.pop();i&&i!==this&&(this.parent.scopes[this.index]=i,i.index=this.index)}this.active=!1}}}function gr(e,t=Ae){t&&t.active&&t.effects.push(e)}const Yn=e=>{const t=new Set(e);return t.w=0,t.n=0,t},ei=e=>(e.w&qe)>0,ti=e=>(e.n&qe)>0,mr=({deps:e})=>{if(e.length)for(let t=0;t<e.length;t++)e[t].w|=qe},_r=e=>{const{deps:t}=e;if(t.length){let n=0;for(let s=0;s<t.length;s++){const i=t[s];ei(i)&&!ti(i)?i.delete(e):t[n++]=i,i.w&=~qe,i.n&=~qe}t.length=n}},Mn=new WeakMap;let At=0,qe=1;const On=30;let Ce;const ot=Symbol(""),Fn=Symbol("");class Zn{constructor(t,n=null,s){this.fn=t,this.scheduler=n,this.active=!0,this.deps=[],this.parent=void 0,gr(this,s)}run(){if(!this.active)return this.fn();let t=Ce,n=ze;for(;t;){if(t===this)return;t=t.parent}try{return this.parent=Ce,Ce=this,ze=!0,qe=1<<++At,At<=On?mr(this):_s(this),this.fn()}finally{At<=On&&_r(this),qe=1<<--At,Ce=this.parent,ze=n,this.parent=void 0,this.deferStop&&this.stop()}}stop(){Ce===this?this.deferStop=!0:this.active&&(_s(this),this.onStop&&this.onStop(),this.active=!1)}}function _s(e){const{deps:t}=e;if(t.length){for(let n=0;n<t.length;n++)t[n].delete(e);t.length=0}}let ze=!0;const ni=[];function xt(){ni.push(ze),ze=!1}function yt(){const e=ni.pop();ze=e===void 0?!0:e}function me(e,t,n){if(ze&&Ce){let s=Mn.get(e);s||Mn.set(e,s=new Map);let i=s.get(n);i||s.set(n,i=Yn()),si(i)}}function si(e,t){let n=!1;At<=On?ti(e)||(e.n|=qe,n=!ei(e)):n=!e.has(Ce),n&&(e.add(Ce),Ce.deps.push(e))}function Ne(e,t,n,s,i,r){const o=Mn.get(e);if(!o)return;let c=[];if(t==="clear")c=[...o.values()];else if(n==="length"&&$(e))o.forEach((f,a)=>{(a==="length"||a>=s)&&c.push(f)});else switch(n!==void 0&&c.push(o.get(n)),t){case"add":$(e)?qn(n)&&c.push(o.get("length")):(c.push(o.get(ot)),$t(e)&&c.push(o.get(Fn)));break;case"delete":$(e)||(c.push(o.get(ot)),$t(e)&&c.push(o.get(Fn)));break;case"set":$t(e)&&c.push(o.get(ot));break}if(c.length===1)c[0]&&Ln(c[0]);else{const f=[];for(const a of c)a&&f.push(...a);Ln(Yn(f))}}function Ln(e,t){const n=$(e)?e:[...e];for(const s of n)s.computed&&vs(s);for(const s of n)s.computed||vs(s)}function vs(e,t){(e!==Ce||e.allowRecurse)&&(e.scheduler?e.scheduler():e.run())}const vr=Kn("__proto__,__v_isRef,__isVue"),ii=new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(Ft)),br=Xn(),xr=Xn(!1,!0),yr=Xn(!0),bs=Cr();function Cr(){const e={};return["includes","indexOf","lastIndexOf"].forEach(t=>{e[t]=function(...n){const s=H(this);for(let r=0,o=this.length;r<o;r++)me(s,"get",r+"");const i=s[t](...n);return i===-1||i===!1?s[t](...n.map(H)):i}}),["push","pop","shift","unshift","splice"].forEach(t=>{e[t]=function(...n){xt();const s=H(this)[t].apply(this,n);return yt(),s}}),e}function Xn(e=!1,t=!1){return function(s,i,r){if(i==="__v_isReactive")return!e;if(i==="__v_isReadonly")return e;if(i==="__v_isShallow")return t;if(i==="__v_raw"&&r===(e?t?Dr:fi:t?ci:li).get(s))return s;const o=$(s);if(!e&&o&&S(bs,i))return Reflect.get(bs,i,r);const c=Reflect.get(s,i,r);return(Ft(i)?ii.has(i):vr(i))||(e||me(s,"get",i),t)?c:le(c)?o&&qn(i)?c:c.value:q(c)?e?ui(c):es(c):c}}const wr=ri(),Er=ri(!0);function ri(e=!1){return function(n,s,i,r){let o=n[s];if(_t(o)&&le(o)&&!le(i))return!1;if(!e&&(!Yt(i)&&!_t(i)&&(o=H(o),i=H(i)),!$(n)&&le(o)&&!le(i)))return o.value=i,!0;const c=$(n)&&qn(s)?Number(s)<n.length:S(n,s),f=Reflect.set(n,s,i,r);return n===H(r)&&(c?Lt(i,o)&&Ne(n,"set",s,i):Ne(n,"add",s,i)),f}}function Tr(e,t){const n=S(e,t);e[t];const s=Reflect.deleteProperty(e,t);return s&&n&&Ne(e,"delete",t,void 0),s}function Ir(e,t){const n=Reflect.has(e,t);return(!Ft(t)||!ii.has(t))&&me(e,"has",t),n}function Ar(e){return me(e,"iterate",$(e)?"length":ot),Reflect.ownKeys(e)}const oi={get:br,set:wr,deleteProperty:Tr,has:Ir,ownKeys:Ar},$r={get:yr,set(e,t){return!0},deleteProperty(e,t){return!0}},Mr=ie({},oi,{get:xr,set:Er}),Qn=e=>e,ln=e=>Reflect.getPrototypeOf(e);function jt(e,t,n=!1,s=!1){e=e.__v_raw;const i=H(e),r=H(t);n||(t!==r&&me(i,"get",t),me(i,"get",r));const{has:o}=ln(i),c=s?Qn:n?ns:Pt;if(o.call(i,t))return c(e.get(t));if(o.call(i,r))return c(e.get(r));e!==i&&e.get(t)}function kt(e,t=!1){const n=this.__v_raw,s=H(n),i=H(e);return t||(e!==i&&me(s,"has",e),me(s,"has",i)),e===i?n.has(e):n.has(e)||n.has(i)}function Ut(e,t=!1){return e=e.__v_raw,!t&&me(H(e),"iterate",ot),Reflect.get(e,"size",e)}function xs(e){e=H(e);const t=H(this);return ln(t).has.call(t,e)||(t.add(e),Ne(t,"add",e,e)),this}function ys(e,t){t=H(t);const n=H(this),{has:s,get:i}=ln(n);let r=s.call(n,e);r||(e=H(e),r=s.call(n,e));const o=i.call(n,e);return n.set(e,t),r?Lt(t,o)&&Ne(n,"set",e,t):Ne(n,"add",e,t),this}function Cs(e){const t=H(this),{has:n,get:s}=ln(t);let i=n.call(t,e);i||(e=H(e),i=n.call(t,e)),s&&s.call(t,e);const r=t.delete(e);return i&&Ne(t,"delete",e,void 0),r}function ws(){const e=H(this),t=e.size!==0,n=e.clear();return t&&Ne(e,"clear",void 0,void 0),n}function Kt(e,t){return function(s,i){const r=this,o=r.__v_raw,c=H(o),f=t?Qn:e?ns:Pt;return!e&&me(c,"iterate",ot),o.forEach((a,p)=>s.call(i,f(a),f(p),r))}}function zt(e,t,n){return function(...s){const i=this.__v_raw,r=H(i),o=$t(r),c=e==="entries"||e===Symbol.iterator&&o,f=e==="keys"&&o,a=i[e](...s),p=n?Qn:t?ns:Pt;return!t&&me(r,"iterate",f?Fn:ot),{next(){const{value:_,done:x}=a.next();return x?{value:_,done:x}:{value:c?[p(_[0]),p(_[1])]:p(_),done:x}},[Symbol.iterator](){return this}}}}function He(e){return function(...t){return e==="delete"?!1:this}}function Or(){const e={get(r){return jt(this,r)},get size(){return Ut(this)},has:kt,add:xs,set:ys,delete:Cs,clear:ws,forEach:Kt(!1,!1)},t={get(r){return jt(this,r,!1,!0)},get size(){return Ut(this)},has:kt,add:xs,set:ys,delete:Cs,clear:ws,forEach:Kt(!1,!0)},n={get(r){return jt(this,r,!0)},get size(){return Ut(this,!0)},has(r){return kt.call(this,r,!0)},add:He("add"),set:He("set"),delete:He("delete"),clear:He("clear"),forEach:Kt(!0,!1)},s={get(r){return jt(this,r,!0,!0)},get size(){return Ut(this,!0)},has(r){return kt.call(this,r,!0)},add:He("add"),set:He("set"),delete:He("delete"),clear:He("clear"),forEach:Kt(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach(r=>{e[r]=zt(r,!1,!1),n[r]=zt(r,!0,!1),t[r]=zt(r,!1,!0),s[r]=zt(r,!0,!0)}),[e,n,t,s]}const[Fr,Lr,Pr,Br]=Or();function Gn(e,t){const n=t?e?Br:Pr:e?Lr:Fr;return(s,i,r)=>i==="__v_isReactive"?!e:i==="__v_isReadonly"?e:i==="__v_raw"?s:Reflect.get(S(n,i)&&i in s?n:s,i,r)}const Nr={get:Gn(!1,!1)},Rr={get:Gn(!1,!0)},Sr={get:Gn(!0,!1)},li=new WeakMap,ci=new WeakMap,fi=new WeakMap,Dr=new WeakMap;function Hr(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function jr(e){return e.__v_skip||!Object.isExtensible(e)?0:Hr(fr(e))}function es(e){return _t(e)?e:ts(e,!1,oi,Nr,li)}function kr(e){return ts(e,!1,Mr,Rr,ci)}function ui(e){return ts(e,!0,$r,Sr,fi)}function ts(e,t,n,s,i){if(!q(e)||e.__v_raw&&!(t&&e.__v_isReactive))return e;const r=i.get(e);if(r)return r;const o=jr(e);if(o===0)return e;const c=new Proxy(e,o===2?s:n);return i.set(e,c),c}function ht(e){return _t(e)?ht(e.__v_raw):!!(e&&e.__v_isReactive)}function _t(e){return!!(e&&e.__v_isReadonly)}function Yt(e){return!!(e&&e.__v_isShallow)}function ai(e){return ht(e)||_t(e)}function H(e){const t=e&&e.__v_raw;return t?H(t):e}function di(e){return Jt(e,"__v_skip",!0),e}const Pt=e=>q(e)?es(e):e,ns=e=>q(e)?ui(e):e;function pi(e){ze&&Ce&&(e=H(e),si(e.dep||(e.dep=Yn())))}function hi(e,t){e=H(e),e.dep&&Ln(e.dep)}function le(e){return!!(e&&e.__v_isRef===!0)}function $e(e){return Ur(e,!1)}function Ur(e,t){return le(e)?e:new Kr(e,t)}class Kr{constructor(t,n){this.__v_isShallow=n,this.dep=void 0,this.__v_isRef=!0,this._rawValue=n?t:H(t),this._value=n?t:Pt(t)}get value(){return pi(this),this._value}set value(t){const n=this.__v_isShallow||Yt(t)||_t(t);t=n?t:H(t),Lt(t,this._rawValue)&&(this._rawValue=t,this._value=n?t:Pt(t),hi(this))}}function zr(e){return le(e)?e.value:e}const Wr={get:(e,t,n)=>zr(Reflect.get(e,t,n)),set:(e,t,n,s)=>{const i=e[t];return le(i)&&!le(n)?(i.value=n,!0):Reflect.set(e,t,n,s)}};function gi(e){return ht(e)?e:new Proxy(e,Wr)}var mi;class Vr{constructor(t,n,s,i){this._setter=n,this.dep=void 0,this.__v_isRef=!0,this[mi]=!1,this._dirty=!0,this.effect=new Zn(t,()=>{this._dirty||(this._dirty=!0,hi(this))}),this.effect.computed=this,this.effect.active=this._cacheable=!i,this.__v_isReadonly=s}get value(){const t=H(this);return pi(t),(t._dirty||!t._cacheable)&&(t._dirty=!1,t._value=t.effect.run()),t._value}set value(t){this._setter(t)}}mi="__v_isReadonly";function qr(e,t,n=!1){let s,i;const r=P(e);return r?(s=e,i=Ee):(s=e.get,i=e.set),new Vr(s,i,r||!i,n)}function We(e,t,n,s){let i;try{i=s?e(...s):e()}catch(r){cn(r,t,n)}return i}function be(e,t,n,s){if(P(e)){const r=We(e,t,n,s);return r&&Qs(r)&&r.catch(o=>{cn(o,t,n)}),r}const i=[];for(let r=0;r<e.length;r++)i.push(be(e[r],t,n,s));return i}function cn(e,t,n,s=!0){const i=t?t.vnode:null;if(t){let r=t.parent;const o=t.proxy,c=n;for(;r;){const a=r.ec;if(a){for(let p=0;p<a.length;p++)if(a[p](e,o,c)===!1)return}r=r.parent}const f=t.appContext.config.errorHandler;if(f){We(f,null,10,[e,o,c]);return}}Jr(e,n,i,s)}function Jr(e,t,n,s=!0){console.error(e)}let Zt=!1,Pn=!1;const oe=[];let Oe=0;const gt=[];let Be=null,nt=0;const _i=Promise.resolve();let ss=null;function Yr(e){const t=ss||_i;return e?t.then(this?e.bind(this):e):t}function Zr(e){let t=Oe+1,n=oe.length;for(;t<n;){const s=t+n>>>1;Bt(oe[s])<e?t=s+1:n=s}return t}function is(e){(!oe.length||!oe.includes(e,Zt&&e.allowRecurse?Oe+1:Oe))&&(e.id==null?oe.push(e):oe.splice(Zr(e.id),0,e),vi())}function vi(){!Zt&&!Pn&&(Pn=!0,ss=_i.then(xi))}function Xr(e){const t=oe.indexOf(e);t>Oe&&oe.splice(t,1)}function Qr(e){$(e)?gt.push(...e):(!Be||!Be.includes(e,e.allowRecurse?nt+1:nt))&&gt.push(e),vi()}function Es(e,t=Oe){for(;t<oe.length;t++){const n=oe[t];n&&n.pre&&(oe.splice(t,1),t--,n())}}function bi(e){if(gt.length){const t=[...new Set(gt)];if(gt.length=0,Be){Be.push(...t);return}for(Be=t,Be.sort((n,s)=>Bt(n)-Bt(s)),nt=0;nt<Be.length;nt++)Be[nt]();Be=null,nt=0}}const Bt=e=>e.id==null?1/0:e.id,Gr=(e,t)=>{const n=Bt(e)-Bt(t);if(n===0){if(e.pre&&!t.pre)return-1;if(t.pre&&!e.pre)return 1}return n};function xi(e){Pn=!1,Zt=!0,oe.sort(Gr);const t=Ee;try{for(Oe=0;Oe<oe.length;Oe++){const n=oe[Oe];n&&n.active!==!1&&We(n,null,14)}}finally{Oe=0,oe.length=0,bi(),Zt=!1,ss=null,(oe.length||gt.length)&&xi()}}function eo(e,t,...n){if(e.isUnmounted)return;const s=e.vnode.props||K;let i=n;const r=t.startsWith("update:"),o=r&&t.slice(7);if(o&&o in s){const p=`${o==="modelValue"?"model":o}Modifiers`,{number:_,trim:x}=s[p]||K;x&&(i=n.map(w=>w.trim())),_&&(i=n.map(Jn))}let c,f=s[c=yn(t)]||s[c=yn(mt(t))];!f&&r&&(f=s[c=yn(bt(t))]),f&&be(f,e,6,i);const a=s[c+"Once"];if(a){if(!e.emitted)e.emitted={};else if(e.emitted[c])return;e.emitted[c]=!0,be(a,e,6,i)}}function yi(e,t,n=!1){const s=t.emitsCache,i=s.get(e);if(i!==void 0)return i;const r=e.emits;let o={},c=!1;if(!P(e)){const f=a=>{const p=yi(a,t,!0);p&&(c=!0,ie(o,p))};!n&&t.mixins.length&&t.mixins.forEach(f),e.extends&&f(e.extends),e.mixins&&e.mixins.forEach(f)}return!r&&!c?(q(e)&&s.set(e,null),null):($(r)?r.forEach(f=>o[f]=null):ie(o,r),q(e)&&s.set(e,o),o)}function fn(e,t){return!e||!rn(t)?!1:(t=t.slice(2).replace(/Once$/,""),S(e,t[0].toLowerCase()+t.slice(1))||S(e,bt(t))||S(e,t))}let de=null,un=null;function Xt(e){const t=de;return de=e,un=e&&e.type.__scopeId||null,t}function an(e){un=e}function dn(){un=null}function ee(e,t=de,n){if(!t||e._n)return e;const s=(...i)=>{s._d&&Bs(-1);const r=Xt(t),o=e(...i);return Xt(r),s._d&&Bs(1),o};return s._n=!0,s._c=!0,s._d=!0,s}function Cn(e){const{type:t,vnode:n,proxy:s,withProxy:i,props:r,propsOptions:[o],slots:c,attrs:f,emit:a,render:p,renderCache:_,data:x,setupState:w,ctx:M,inheritAttrs:F}=e;let L,N;const fe=Xt(e);try{if(n.shapeFlag&4){const J=i||s;L=Me(p.call(J,J,_,r,w,x,M)),N=f}else{const J=t;L=Me(J.length>1?J(r,{attrs:f,slots:c,emit:a}):J(r,null)),N=t.props?f:to(f)}}catch(J){Ot.length=0,cn(J,e,1),L=j(xe)}let Q=L;if(N&&F!==!1){const J=Object.keys(N),{shapeFlag:re}=Q;J.length&&re&7&&(o&&J.some(zn)&&(N=no(N,o)),Q=Je(Q,N))}return n.dirs&&(Q=Je(Q),Q.dirs=Q.dirs?Q.dirs.concat(n.dirs):n.dirs),n.transition&&(Q.transition=n.transition),L=Q,Xt(fe),L}const to=e=>{let t;for(const n in e)(n==="class"||n==="style"||rn(n))&&((t||(t={}))[n]=e[n]);return t},no=(e,t)=>{const n={};for(const s in e)(!zn(s)||!(s.slice(9)in t))&&(n[s]=e[s]);return n};function so(e,t,n){const{props:s,children:i,component:r}=e,{props:o,children:c,patchFlag:f}=t,a=r.emitsOptions;if(t.dirs||t.transition)return!0;if(n&&f>=0){if(f&1024)return!0;if(f&16)return s?Ts(s,o,a):!!o;if(f&8){const p=t.dynamicProps;for(let _=0;_<p.length;_++){const x=p[_];if(o[x]!==s[x]&&!fn(a,x))return!0}}}else return(i||c)&&(!c||!c.$stable)?!0:s===o?!1:s?o?Ts(s,o,a):!0:!!o;return!1}function Ts(e,t,n){const s=Object.keys(t);if(s.length!==Object.keys(e).length)return!0;for(let i=0;i<s.length;i++){const r=s[i];if(t[r]!==e[r]&&!fn(n,r))return!0}return!1}function io({vnode:e,parent:t},n){for(;t&&t.subTree===e;)(e=t.vnode).el=n,t=t.parent}const ro=e=>e.__isSuspense;function oo(e,t){t&&t.pendingBranch?$(e)?t.effects.push(...e):t.effects.push(e):Qr(e)}function lo(e,t){if(se){let n=se.provides;const s=se.parent&&se.parent.provides;s===n&&(n=se.provides=Object.create(s)),n[e]=t}}function wn(e,t,n=!1){const s=se||de;if(s){const i=s.parent==null?s.vnode.appContext&&s.vnode.appContext.provides:s.parent.provides;if(i&&e in i)return i[e];if(arguments.length>1)return n&&P(t)?t.call(s.proxy):t}}const Is={};function En(e,t,n){return Ci(e,t,n)}function Ci(e,t,{immediate:n,deep:s,flush:i,onTrack:r,onTrigger:o}=K){const c=se;let f,a=!1,p=!1;if(le(e)?(f=()=>e.value,a=Yt(e)):ht(e)?(f=()=>e,s=!0):$(e)?(p=!0,a=e.some(N=>ht(N)||Yt(N)),f=()=>e.map(N=>{if(le(N))return N.value;if(ht(N))return rt(N);if(P(N))return We(N,c,2)})):P(e)?t?f=()=>We(e,c,2):f=()=>{if(!(c&&c.isUnmounted))return _&&_(),be(e,c,3,[x])}:f=Ee,t&&s){const N=f;f=()=>rt(N())}let _,x=N=>{_=L.onStop=()=>{We(N,c,4)}};if(Rt)return x=Ee,t?n&&be(t,c,3,[f(),p?[]:void 0,x]):f(),Ee;let w=p?[]:Is;const M=()=>{if(!!L.active)if(t){const N=L.run();(s||a||(p?N.some((fe,Q)=>Lt(fe,w[Q])):Lt(N,w)))&&(_&&_(),be(t,c,3,[N,w===Is?void 0:w,x]),w=N)}else L.run()};M.allowRecurse=!!t;let F;i==="sync"?F=M:i==="post"?F=()=>pe(M,c&&c.suspense):(M.pre=!0,c&&(M.id=c.uid),F=()=>is(M));const L=new Zn(f,F);return t?n?M():w=L.run():i==="post"?pe(L.run.bind(L),c&&c.suspense):L.run(),()=>{L.stop(),c&&c.scope&&Wn(c.scope.effects,L)}}function co(e,t,n){const s=this.proxy,i=ce(e)?e.includes(".")?wi(s,e):()=>s[e]:e.bind(s,s);let r;P(t)?r=t:(r=t.handler,n=t);const o=se;vt(this);const c=Ci(i,r.bind(s),n);return o?vt(o):lt(),c}function wi(e,t){const n=t.split(".");return()=>{let s=e;for(let i=0;i<n.length&&s;i++)s=s[n[i]];return s}}function rt(e,t){if(!q(e)||e.__v_skip||(t=t||new Set,t.has(e)))return e;if(t.add(e),le(e))rt(e.value,t);else if($(e))for(let n=0;n<e.length;n++)rt(e[n],t);else if(Vn(e)||$t(e))e.forEach(n=>{rt(n,t)});else if(ur(e))for(const n in e)rt(e[n],t);return e}function fo(){const e={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return $i(()=>{e.isMounted=!0}),Mi(()=>{e.isUnmounting=!0}),e}const ve=[Function,Array],uo={name:"BaseTransition",props:{mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:ve,onEnter:ve,onAfterEnter:ve,onEnterCancelled:ve,onBeforeLeave:ve,onLeave:ve,onAfterLeave:ve,onLeaveCancelled:ve,onBeforeAppear:ve,onAppear:ve,onAfterAppear:ve,onAppearCancelled:ve},setup(e,{slots:t}){const n=Jo(),s=fo();let i;return()=>{const r=t.default&&Ii(t.default(),!0);if(!r||!r.length)return;let o=r[0];if(r.length>1){for(const F of r)if(F.type!==xe){o=F;break}}const c=H(e),{mode:f}=c;if(s.isLeaving)return Tn(o);const a=As(o);if(!a)return Tn(o);const p=Bn(a,c,s,n);Nn(a,p);const _=n.subTree,x=_&&As(_);let w=!1;const{getTransitionKey:M}=a.type;if(M){const F=M();i===void 0?i=F:F!==i&&(i=F,w=!0)}if(x&&x.type!==xe&&(!st(a,x)||w)){const F=Bn(x,c,s,n);if(Nn(x,F),f==="out-in")return s.isLeaving=!0,F.afterLeave=()=>{s.isLeaving=!1,n.update()},Tn(o);f==="in-out"&&a.type!==xe&&(F.delayLeave=(L,N,fe)=>{const Q=Ti(s,x);Q[String(x.key)]=x,L._leaveCb=()=>{N(),L._leaveCb=void 0,delete p.delayedLeave},p.delayedLeave=fe})}return o}}},Ei=uo;function Ti(e,t){const{leavingVNodes:n}=e;let s=n.get(t.type);return s||(s=Object.create(null),n.set(t.type,s)),s}function Bn(e,t,n,s){const{appear:i,mode:r,persisted:o=!1,onBeforeEnter:c,onEnter:f,onAfterEnter:a,onEnterCancelled:p,onBeforeLeave:_,onLeave:x,onAfterLeave:w,onLeaveCancelled:M,onBeforeAppear:F,onAppear:L,onAfterAppear:N,onAppearCancelled:fe}=t,Q=String(e.key),J=Ti(n,e),re=(R,z)=>{R&&be(R,s,9,z)},Se=(R,z)=>{const Y=z[1];re(R,z),$(R)?R.every(te=>te.length<=1)&&Y():R.length<=1&&Y()},Fe={mode:r,persisted:o,beforeEnter(R){let z=c;if(!n.isMounted)if(i)z=F||c;else return;R._leaveCb&&R._leaveCb(!0);const Y=J[Q];Y&&st(e,Y)&&Y.el._leaveCb&&Y.el._leaveCb(),re(z,[R])},enter(R){let z=f,Y=a,te=p;if(!n.isMounted)if(i)z=L||f,Y=N||a,te=fe||p;else return;let T=!1;const Z=R._enterCb=_e=>{T||(T=!0,_e?re(te,[R]):re(Y,[R]),Fe.delayedLeave&&Fe.delayedLeave(),R._enterCb=void 0)};z?Se(z,[R,Z]):Z()},leave(R,z){const Y=String(e.key);if(R._enterCb&&R._enterCb(!0),n.isUnmounting)return z();re(_,[R]);let te=!1;const T=R._leaveCb=Z=>{te||(te=!0,z(),Z?re(M,[R]):re(w,[R]),R._leaveCb=void 0,J[Y]===e&&delete J[Y])};J[Y]=e,x?Se(x,[R,T]):T()},clone(R){return Bn(R,t,n,s)}};return Fe}function Tn(e){if(pn(e))return e=Je(e),e.children=null,e}function As(e){return pn(e)?e.children?e.children[0]:void 0:e}function Nn(e,t){e.shapeFlag&6&&e.component?Nn(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 Ii(e,t=!1,n){let s=[],i=0;for(let r=0;r<e.length;r++){let o=e[r];const c=n==null?o.key:String(n)+String(o.key!=null?o.key:r);o.type===he?(o.patchFlag&128&&i++,s=s.concat(Ii(o.children,t,c))):(t||o.type!==xe)&&s.push(c!=null?Je(o,{key:c}):o)}if(i>1)for(let r=0;r<s.length;r++)s[r].patchFlag=-2;return s}function ct(e){return P(e)?{setup:e,name:e.name}:e}const Mt=e=>!!e.type.__asyncLoader,pn=e=>e.type.__isKeepAlive;function ao(e,t){Ai(e,"a",t)}function po(e,t){Ai(e,"da",t)}function Ai(e,t,n=se){const s=e.__wdc||(e.__wdc=()=>{let i=n;for(;i;){if(i.isDeactivated)return;i=i.parent}return e()});if(hn(t,s,n),n){let i=n.parent;for(;i&&i.parent;)pn(i.parent.vnode)&&ho(s,t,n,i),i=i.parent}}function ho(e,t,n,s){const i=hn(t,e,s,!0);Oi(()=>{Wn(s[t],i)},n)}function hn(e,t,n=se,s=!1){if(n){const i=n[e]||(n[e]=[]),r=t.__weh||(t.__weh=(...o)=>{if(n.isUnmounted)return;xt(),vt(n);const c=be(t,n,e,o);return lt(),yt(),c});return s?i.unshift(r):i.push(r),r}}const Re=e=>(t,n=se)=>(!Rt||e==="sp")&&hn(e,t,n),go=Re("bm"),$i=Re("m"),mo=Re("bu"),_o=Re("u"),Mi=Re("bum"),Oi=Re("um"),vo=Re("sp"),bo=Re("rtg"),xo=Re("rtc");function yo(e,t=se){hn("ec",e,t)}function Co(e,t){const n=de;if(n===null)return e;const s=_n(n)||n.proxy,i=e.dirs||(e.dirs=[]);for(let r=0;r<t.length;r++){let[o,c,f,a=K]=t[r];P(o)&&(o={mounted:o,updated:o}),o.deep&&rt(c),i.push({dir:o,instance:s,value:c,oldValue:void 0,arg:f,modifiers:a})}return e}function Ze(e,t,n,s){const i=e.dirs,r=t&&t.dirs;for(let o=0;o<i.length;o++){const c=i[o];r&&(c.oldValue=r[o].value);let f=c.dir[s];f&&(xt(),be(f,n,8,[e.el,c,e,t]),yt())}}const wo=Symbol();function Tt(e,t,n={},s,i){if(de.isCE||de.parent&&Mt(de.parent)&&de.parent.isCE)return j("slot",t==="default"?null:{name:t},s&&s());let r=e[t];r&&r._c&&(r._d=!1),X();const o=r&&Fi(r(n)),c=Ve(he,{key:n.key||o&&o.key||`_${t}`},o||(s?s():[]),o&&e._===1?64:-2);return!i&&c.scopeId&&(c.slotScopeIds=[c.scopeId+"-s"]),r&&r._c&&(r._d=!0),c}function Fi(e){return e.some(t=>en(t)?!(t.type===xe||t.type===he&&!Fi(t.children)):!0)?e:null}const Rn=e=>e?Ki(e)?_n(e)||e.proxy:Rn(e.parent):null,Qt=ie(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=>Rn(e.parent),$root:e=>Rn(e.root),$emit:e=>e.emit,$options:e=>Pi(e),$forceUpdate:e=>e.f||(e.f=()=>is(e.update)),$nextTick:e=>e.n||(e.n=Yr.bind(e.proxy)),$watch:e=>co.bind(e)}),Eo={get({_:e},t){const{ctx:n,setupState:s,data:i,props:r,accessCache:o,type:c,appContext:f}=e;let a;if(t[0]!=="$"){const w=o[t];if(w!==void 0)switch(w){case 1:return s[t];case 2:return i[t];case 4:return n[t];case 3:return r[t]}else{if(s!==K&&S(s,t))return o[t]=1,s[t];if(i!==K&&S(i,t))return o[t]=2,i[t];if((a=e.propsOptions[0])&&S(a,t))return o[t]=3,r[t];if(n!==K&&S(n,t))return o[t]=4,n[t];Sn&&(o[t]=0)}}const p=Qt[t];let _,x;if(p)return t==="$attrs"&&me(e,"get",t),p(e);if((_=c.__cssModules)&&(_=_[t]))return _;if(n!==K&&S(n,t))return o[t]=4,n[t];if(x=f.config.globalProperties,S(x,t))return x[t]},set({_:e},t,n){const{data:s,setupState:i,ctx:r}=e;return i!==K&&S(i,t)?(i[t]=n,!0):s!==K&&S(s,t)?(s[t]=n,!0):S(e.props,t)||t[0]==="$"&&t.slice(1)in e?!1:(r[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:s,appContext:i,propsOptions:r}},o){let c;return!!n[o]||e!==K&&S(e,o)||t!==K&&S(t,o)||(c=r[0])&&S(c,o)||S(s,o)||S(Qt,o)||S(i.config.globalProperties,o)},defineProperty(e,t,n){return n.get!=null?e._.accessCache[t]=0:S(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}};let Sn=!0;function To(e){const t=Pi(e),n=e.proxy,s=e.ctx;Sn=!1,t.beforeCreate&&$s(t.beforeCreate,e,"bc");const{data:i,computed:r,methods:o,watch:c,provide:f,inject:a,created:p,beforeMount:_,mounted:x,beforeUpdate:w,updated:M,activated:F,deactivated:L,beforeDestroy:N,beforeUnmount:fe,destroyed:Q,unmounted:J,render:re,renderTracked:Se,renderTriggered:Fe,errorCaptured:R,serverPrefetch:z,expose:Y,inheritAttrs:te,components:T,directives:Z,filters:_e}=t;if(a&&Io(a,s,null,e.appContext.config.unwrapInjectedRef),o)for(const G in o){const W=o[G];P(W)&&(s[G]=W.bind(n))}if(i){const G=i.call(n,n);q(G)&&(e.data=es(G))}if(Sn=!0,r)for(const G in r){const W=r[G],Le=P(W)?W.bind(n,n):P(W.get)?W.get.bind(n,n):Ee,vn=!P(W)&&P(W.set)?W.set.bind(n):Ee,wt=el({get:Le,set:vn});Object.defineProperty(s,G,{enumerable:!0,configurable:!0,get:()=>wt.value,set:ut=>wt.value=ut})}if(c)for(const G in c)Li(c[G],s,n,G);if(f){const G=P(f)?f.call(n):f;Reflect.ownKeys(G).forEach(W=>{lo(W,G[W])})}p&&$s(p,e,"c");function ne(G,W){$(W)?W.forEach(Le=>G(Le.bind(n))):W&&G(W.bind(n))}if(ne(go,_),ne($i,x),ne(mo,w),ne(_o,M),ne(ao,F),ne(po,L),ne(yo,R),ne(xo,Se),ne(bo,Fe),ne(Mi,fe),ne(Oi,J),ne(vo,z),$(Y))if(Y.length){const G=e.exposed||(e.exposed={});Y.forEach(W=>{Object.defineProperty(G,W,{get:()=>n[W],set:Le=>n[W]=Le})})}else e.exposed||(e.exposed={});re&&e.render===Ee&&(e.render=re),te!=null&&(e.inheritAttrs=te),T&&(e.components=T),Z&&(e.directives=Z)}function Io(e,t,n=Ee,s=!1){$(e)&&(e=Dn(e));for(const i in e){const r=e[i];let o;q(r)?"default"in r?o=wn(r.from||i,r.default,!0):o=wn(r.from||i):o=wn(r),le(o)&&s?Object.defineProperty(t,i,{enumerable:!0,configurable:!0,get:()=>o.value,set:c=>o.value=c}):t[i]=o}}function $s(e,t,n){be($(e)?e.map(s=>s.bind(t.proxy)):e.bind(t.proxy),t,n)}function Li(e,t,n,s){const i=s.includes(".")?wi(n,s):()=>n[s];if(ce(e)){const r=t[e];P(r)&&En(i,r)}else if(P(e))En(i,e.bind(n));else if(q(e))if($(e))e.forEach(r=>Li(r,t,n,s));else{const r=P(e.handler)?e.handler.bind(n):t[e.handler];P(r)&&En(i,r,e)}}function Pi(e){const t=e.type,{mixins:n,extends:s}=t,{mixins:i,optionsCache:r,config:{optionMergeStrategies:o}}=e.appContext,c=r.get(t);let f;return c?f=c:!i.length&&!n&&!s?f=t:(f={},i.length&&i.forEach(a=>Gt(f,a,o,!0)),Gt(f,t,o)),q(t)&&r.set(t,f),f}function Gt(e,t,n,s=!1){const{mixins:i,extends:r}=t;r&&Gt(e,r,n,!0),i&&i.forEach(o=>Gt(e,o,n,!0));for(const o in t)if(!(s&&o==="expose")){const c=Ao[o]||n&&n[o];e[o]=c?c(e[o],t[o]):t[o]}return e}const Ao={data:Ms,props:et,emits:et,methods:et,computed:et,beforeCreate:ue,created:ue,beforeMount:ue,mounted:ue,beforeUpdate:ue,updated:ue,beforeDestroy:ue,beforeUnmount:ue,destroyed:ue,unmounted:ue,activated:ue,deactivated:ue,errorCaptured:ue,serverPrefetch:ue,components:et,directives:et,watch:Mo,provide:Ms,inject:$o};function Ms(e,t){return t?e?function(){return ie(P(e)?e.call(this,this):e,P(t)?t.call(this,this):t)}:t:e}function $o(e,t){return et(Dn(e),Dn(t))}function Dn(e){if($(e)){const t={};for(let n=0;n<e.length;n++)t[e[n]]=e[n];return t}return e}function ue(e,t){return e?[...new Set([].concat(e,t))]:t}function et(e,t){return e?ie(ie(Object.create(null),e),t):t}function Mo(e,t){if(!e)return t;if(!t)return e;const n=ie(Object.create(null),e);for(const s in t)n[s]=ue(e[s],t[s]);return n}function Oo(e,t,n,s=!1){const i={},r={};Jt(r,gn,1),e.propsDefaults=Object.create(null),Bi(e,t,i,r);for(const o in e.propsOptions[0])o in i||(i[o]=void 0);n?e.props=s?i:kr(i):e.type.props?e.props=i:e.props=r,e.attrs=r}function Fo(e,t,n,s){const{props:i,attrs:r,vnode:{patchFlag:o}}=e,c=H(i),[f]=e.propsOptions;let a=!1;if((s||o>0)&&!(o&16)){if(o&8){const p=e.vnode.dynamicProps;for(let _=0;_<p.length;_++){let x=p[_];if(fn(e.emitsOptions,x))continue;const w=t[x];if(f)if(S(r,x))w!==r[x]&&(r[x]=w,a=!0);else{const M=mt(x);i[M]=Hn(f,c,M,w,e,!1)}else w!==r[x]&&(r[x]=w,a=!0)}}}else{Bi(e,t,i,r)&&(a=!0);let p;for(const _ in c)(!t||!S(t,_)&&((p=bt(_))===_||!S(t,p)))&&(f?n&&(n[_]!==void 0||n[p]!==void 0)&&(i[_]=Hn(f,c,_,void 0,e,!0)):delete i[_]);if(r!==c)for(const _ in r)(!t||!S(t,_)&&!0)&&(delete r[_],a=!0)}a&&Ne(e,"set","$attrs")}function Bi(e,t,n,s){const[i,r]=e.propsOptions;let o=!1,c;if(t)for(let f in t){if(Wt(f))continue;const a=t[f];let p;i&&S(i,p=mt(f))?!r||!r.includes(p)?n[p]=a:(c||(c={}))[p]=a:fn(e.emitsOptions,f)||(!(f in s)||a!==s[f])&&(s[f]=a,o=!0)}if(r){const f=H(n),a=c||K;for(let p=0;p<r.length;p++){const _=r[p];n[_]=Hn(i,f,_,a[_],e,!S(a,_))}}return o}function Hn(e,t,n,s,i,r){const o=e[n];if(o!=null){const c=S(o,"default");if(c&&s===void 0){const f=o.default;if(o.type!==Function&&P(f)){const{propsDefaults:a}=i;n in a?s=a[n]:(vt(i),s=a[n]=f.call(null,t),lt())}else s=f}o[0]&&(r&&!c?s=!1:o[1]&&(s===""||s===bt(n))&&(s=!0))}return s}function Ni(e,t,n=!1){const s=t.propsCache,i=s.get(e);if(i)return i;const r=e.props,o={},c=[];let f=!1;if(!P(e)){const p=_=>{f=!0;const[x,w]=Ni(_,t,!0);ie(o,x),w&&c.push(...w)};!n&&t.mixins.length&&t.mixins.forEach(p),e.extends&&p(e.extends),e.mixins&&e.mixins.forEach(p)}if(!r&&!f)return q(e)&&s.set(e,pt),pt;if($(r))for(let p=0;p<r.length;p++){const _=mt(r[p]);Os(_)&&(o[_]=K)}else if(r)for(const p in r){const _=mt(p);if(Os(_)){const x=r[p],w=o[_]=$(x)||P(x)?{type:x}:x;if(w){const M=Ps(Boolean,w.type),F=Ps(String,w.type);w[0]=M>-1,w[1]=F<0||M<F,(M>-1||S(w,"default"))&&c.push(_)}}}const a=[o,c];return q(e)&&s.set(e,a),a}function Os(e){return e[0]!=="$"}function Fs(e){const t=e&&e.toString().match(/^\s*function (\w+)/);return t?t[1]:e===null?"null":""}function Ls(e,t){return Fs(e)===Fs(t)}function Ps(e,t){return $(t)?t.findIndex(n=>Ls(n,e)):P(t)&&Ls(t,e)?0:-1}const Ri=e=>e[0]==="_"||e==="$stable",rs=e=>$(e)?e.map(Me):[Me(e)],Lo=(e,t,n)=>{if(t._n)return t;const s=ee((...i)=>rs(t(...i)),n);return s._c=!1,s},Si=(e,t,n)=>{const s=e._ctx;for(const i in e){if(Ri(i))continue;const r=e[i];if(P(r))t[i]=Lo(i,r,s);else if(r!=null){const o=rs(r);t[i]=()=>o}}},Di=(e,t)=>{const n=rs(t);e.slots.default=()=>n},Po=(e,t)=>{if(e.vnode.shapeFlag&32){const n=t._;n?(e.slots=H(t),Jt(t,"_",n)):Si(t,e.slots={})}else e.slots={},t&&Di(e,t);Jt(e.slots,gn,1)},Bo=(e,t,n)=>{const{vnode:s,slots:i}=e;let r=!0,o=K;if(s.shapeFlag&32){const c=t._;c?n&&c===1?r=!1:(ie(i,t),!n&&c===1&&delete i._):(r=!t.$stable,Si(t,i)),o=t}else t&&(Di(e,t),o={default:1});if(r)for(const c in i)!Ri(c)&&!(c in o)&&delete i[c]};function Hi(){return{app:null,config:{isNativeTag:rr,performance:!1,globalProperties:{},optionMergeStrategies:{},errorHandler:void 0,warnHandler:void 0,compilerOptions:{}},mixins:[],components:{},directives:{},provides:Object.create(null),optionsCache:new WeakMap,propsCache:new WeakMap,emitsCache:new WeakMap}}let No=0;function Ro(e,t){return function(s,i=null){P(s)||(s=Object.assign({},s)),i!=null&&!q(i)&&(i=null);const r=Hi(),o=new Set;let c=!1;const f=r.app={_uid:No++,_component:s,_props:i,_container:null,_context:r,_instance:null,version:nl,get config(){return r.config},set config(a){},use(a,...p){return o.has(a)||(a&&P(a.install)?(o.add(a),a.install(f,...p)):P(a)&&(o.add(a),a(f,...p))),f},mixin(a){return r.mixins.includes(a)||r.mixins.push(a),f},component(a,p){return p?(r.components[a]=p,f):r.components[a]},directive(a,p){return p?(r.directives[a]=p,f):r.directives[a]},mount(a,p,_){if(!c){const x=j(s,i);return x.appContext=r,p&&t?t(x,a):e(x,a,_),c=!0,f._container=a,a.__vue_app__=f,_n(x.component)||x.component.proxy}},unmount(){c&&(e(null,f._container),delete f._container.__vue_app__)},provide(a,p){return r.provides[a]=p,f}};return f}}function jn(e,t,n,s,i=!1){if($(e)){e.forEach((x,w)=>jn(x,t&&($(t)?t[w]:t),n,s,i));return}if(Mt(s)&&!i)return;const r=s.shapeFlag&4?_n(s.component)||s.component.proxy:s.el,o=i?null:r,{i:c,r:f}=e,a=t&&t.r,p=c.refs===K?c.refs={}:c.refs,_=c.setupState;if(a!=null&&a!==f&&(ce(a)?(p[a]=null,S(_,a)&&(_[a]=null)):le(a)&&(a.value=null)),P(f))We(f,c,12,[o,p]);else{const x=ce(f),w=le(f);if(x||w){const M=()=>{if(e.f){const F=x?p[f]:f.value;i?$(F)&&Wn(F,r):$(F)?F.includes(r)||F.push(r):x?(p[f]=[r],S(_,f)&&(_[f]=p[f])):(f.value=[r],e.k&&(p[e.k]=f.value))}else x?(p[f]=o,S(_,f)&&(_[f]=o)):w&&(f.value=o,e.k&&(p[e.k]=o))};o?(M.id=-1,pe(M,n)):M()}}}const pe=oo;function So(e){return Do(e)}function Do(e,t){const n=pr();n.__VUE__=!0;const{insert:s,remove:i,patchProp:r,createElement:o,createText:c,createComment:f,setText:a,setElementText:p,parentNode:_,nextSibling:x,setScopeId:w=Ee,cloneNode:M,insertStaticContent:F}=e,L=(l,u,d,g=null,h=null,b=null,C=!1,v=null,y=!!u.dynamicChildren)=>{if(l===u)return;l&&!st(l,u)&&(g=Ht(l),De(l,h,b,!0),l=null),u.patchFlag===-2&&(y=!1,u.dynamicChildren=null);const{type:m,ref:I,shapeFlag:E}=u;switch(m){case os:N(l,u,d,g);break;case xe:fe(l,u,d,g);break;case In:l==null&&Q(u,d,g,C);break;case he:Z(l,u,d,g,h,b,C,v,y);break;default:E&1?Se(l,u,d,g,h,b,C,v,y):E&6?_e(l,u,d,g,h,b,C,v,y):(E&64||E&128)&&m.process(l,u,d,g,h,b,C,v,y,at)}I!=null&&h&&jn(I,l&&l.ref,b,u||l,!u)},N=(l,u,d,g)=>{if(l==null)s(u.el=c(u.children),d,g);else{const h=u.el=l.el;u.children!==l.children&&a(h,u.children)}},fe=(l,u,d,g)=>{l==null?s(u.el=f(u.children||""),d,g):u.el=l.el},Q=(l,u,d,g)=>{[l.el,l.anchor]=F(l.children,u,d,g,l.el,l.anchor)},J=({el:l,anchor:u},d,g)=>{let h;for(;l&&l!==u;)h=x(l),s(l,d,g),l=h;s(u,d,g)},re=({el:l,anchor:u})=>{let d;for(;l&&l!==u;)d=x(l),i(l),l=d;i(u)},Se=(l,u,d,g,h,b,C,v,y)=>{C=C||u.type==="svg",l==null?Fe(u,d,g,h,b,C,v,y):Y(l,u,h,b,C,v,y)},Fe=(l,u,d,g,h,b,C,v)=>{let y,m;const{type:I,props:E,shapeFlag:A,transition:O,patchFlag:D,dirs:k}=l;if(l.el&&M!==void 0&&D===-1)y=l.el=M(l.el);else{if(y=l.el=o(l.type,b,E&&E.is,E),A&8?p(y,l.children):A&16&&z(l.children,y,null,g,h,b&&I!=="foreignObject",C,v),k&&Ze(l,null,g,"created"),E){for(const V in E)V!=="value"&&!Wt(V)&&r(y,V,null,E[V],b,l.children,g,h,Pe);"value"in E&&r(y,"value",null,E.value),(m=E.onVnodeBeforeMount)&&Ie(m,g,l)}R(y,l,l.scopeId,C,g)}k&&Ze(l,null,g,"beforeMount");const U=(!h||h&&!h.pendingBranch)&&O&&!O.persisted;U&&O.beforeEnter(y),s(y,u,d),((m=E&&E.onVnodeMounted)||U||k)&&pe(()=>{m&&Ie(m,g,l),U&&O.enter(y),k&&Ze(l,null,g,"mounted")},h)},R=(l,u,d,g,h)=>{if(d&&w(l,d),g)for(let b=0;b<g.length;b++)w(l,g[b]);if(h){let b=h.subTree;if(u===b){const C=h.vnode;R(l,C,C.scopeId,C.slotScopeIds,h.parent)}}},z=(l,u,d,g,h,b,C,v,y=0)=>{for(let m=y;m<l.length;m++){const I=l[m]=v?Ue(l[m]):Me(l[m]);L(null,I,u,d,g,h,b,C,v)}},Y=(l,u,d,g,h,b,C)=>{const v=u.el=l.el;let{patchFlag:y,dynamicChildren:m,dirs:I}=u;y|=l.patchFlag&16;const E=l.props||K,A=u.props||K;let O;d&&Xe(d,!1),(O=A.onVnodeBeforeUpdate)&&Ie(O,d,u,l),I&&Ze(u,l,d,"beforeUpdate"),d&&Xe(d,!0);const D=h&&u.type!=="foreignObject";if(m?te(l.dynamicChildren,m,v,d,g,D,b):C||Le(l,u,v,null,d,g,D,b,!1),y>0){if(y&16)T(v,u,E,A,d,g,h);else if(y&2&&E.class!==A.class&&r(v,"class",null,A.class,h),y&4&&r(v,"style",E.style,A.style,h),y&8){const k=u.dynamicProps;for(let U=0;U<k.length;U++){const V=k[U],ye=E[V],dt=A[V];(dt!==ye||V==="value")&&r(v,V,ye,dt,h,l.children,d,g,Pe)}}y&1&&l.children!==u.children&&p(v,u.children)}else!C&&m==null&&T(v,u,E,A,d,g,h);((O=A.onVnodeUpdated)||I)&&pe(()=>{O&&Ie(O,d,u,l),I&&Ze(u,l,d,"updated")},g)},te=(l,u,d,g,h,b,C)=>{for(let v=0;v<u.length;v++){const y=l[v],m=u[v],I=y.el&&(y.type===he||!st(y,m)||y.shapeFlag&70)?_(y.el):d;L(y,m,I,null,g,h,b,C,!0)}},T=(l,u,d,g,h,b,C)=>{if(d!==g){for(const v in g){if(Wt(v))continue;const y=g[v],m=d[v];y!==m&&v!=="value"&&r(l,v,m,y,C,u.children,h,b,Pe)}if(d!==K)for(const v in d)!Wt(v)&&!(v in g)&&r(l,v,d[v],null,C,u.children,h,b,Pe);"value"in g&&r(l,"value",d.value,g.value)}},Z=(l,u,d,g,h,b,C,v,y)=>{const m=u.el=l?l.el:c(""),I=u.anchor=l?l.anchor:c("");let{patchFlag:E,dynamicChildren:A,slotScopeIds:O}=u;O&&(v=v?v.concat(O):O),l==null?(s(m,d,g),s(I,d,g),z(u.children,d,I,h,b,C,v,y)):E>0&&E&64&&A&&l.dynamicChildren?(te(l.dynamicChildren,A,d,h,b,C,v),(u.key!=null||h&&u===h.subTree)&&ji(l,u,!0)):Le(l,u,d,I,h,b,C,v,y)},_e=(l,u,d,g,h,b,C,v,y)=>{u.slotScopeIds=v,l==null?u.shapeFlag&512?h.ctx.activate(u,d,g,C,y):ft(u,d,g,h,b,C,y):ne(l,u,y)},ft=(l,u,d,g,h,b,C)=>{const v=l.component=qo(l,g,h);if(pn(l)&&(v.ctx.renderer=at),Yo(v),v.asyncDep){if(h&&h.registerDep(v,G),!l.el){const y=v.subTree=j(xe);fe(null,y,u,d)}return}G(v,l,u,d,h,b,C)},ne=(l,u,d)=>{const g=u.component=l.component;if(so(l,u,d))if(g.asyncDep&&!g.asyncResolved){W(g,u,d);return}else g.next=u,Xr(g.update),g.update();else u.el=l.el,g.vnode=u},G=(l,u,d,g,h,b,C)=>{const v=()=>{if(l.isMounted){let{next:I,bu:E,u:A,parent:O,vnode:D}=l,k=I,U;Xe(l,!1),I?(I.el=D.el,W(l,I,C)):I=D,E&&Vt(E),(U=I.props&&I.props.onVnodeBeforeUpdate)&&Ie(U,O,I,D),Xe(l,!0);const V=Cn(l),ye=l.subTree;l.subTree=V,L(ye,V,_(ye.el),Ht(ye),l,h,b),I.el=V.el,k===null&&io(l,V.el),A&&pe(A,h),(U=I.props&&I.props.onVnodeUpdated)&&pe(()=>Ie(U,O,I,D),h)}else{let I;const{el:E,props:A}=u,{bm:O,m:D,parent:k}=l,U=Mt(u);if(Xe(l,!1),O&&Vt(O),!U&&(I=A&&A.onVnodeBeforeMount)&&Ie(I,k,u),Xe(l,!0),E&&xn){const V=()=>{l.subTree=Cn(l),xn(E,l.subTree,l,h,null)};U?u.type.__asyncLoader().then(()=>!l.isUnmounted&&V()):V()}else{const V=l.subTree=Cn(l);L(null,V,d,g,l,h,b),u.el=V.el}if(D&&pe(D,h),!U&&(I=A&&A.onVnodeMounted)){const V=u;pe(()=>Ie(I,k,V),h)}(u.shapeFlag&256||k&&Mt(k.vnode)&&k.vnode.shapeFlag&256)&&l.a&&pe(l.a,h),l.isMounted=!0,u=d=g=null}},y=l.effect=new Zn(v,()=>is(m),l.scope),m=l.update=()=>y.run();m.id=l.uid,Xe(l,!0),m()},W=(l,u,d)=>{u.component=l;const g=l.vnode.props;l.vnode=u,l.next=null,Fo(l,u.props,g,d),Bo(l,u.children,d),xt(),Es(),yt()},Le=(l,u,d,g,h,b,C,v,y=!1)=>{const m=l&&l.children,I=l?l.shapeFlag:0,E=u.children,{patchFlag:A,shapeFlag:O}=u;if(A>0){if(A&128){wt(m,E,d,g,h,b,C,v,y);return}else if(A&256){vn(m,E,d,g,h,b,C,v,y);return}}O&8?(I&16&&Pe(m,h,b),E!==m&&p(d,E)):I&16?O&16?wt(m,E,d,g,h,b,C,v,y):Pe(m,h,b,!0):(I&8&&p(d,""),O&16&&z(E,d,g,h,b,C,v,y))},vn=(l,u,d,g,h,b,C,v,y)=>{l=l||pt,u=u||pt;const m=l.length,I=u.length,E=Math.min(m,I);let A;for(A=0;A<E;A++){const O=u[A]=y?Ue(u[A]):Me(u[A]);L(l[A],O,d,null,h,b,C,v,y)}m>I?Pe(l,h,b,!0,!1,E):z(u,d,g,h,b,C,v,y,E)},wt=(l,u,d,g,h,b,C,v,y)=>{let m=0;const I=u.length;let E=l.length-1,A=I-1;for(;m<=E&&m<=A;){const O=l[m],D=u[m]=y?Ue(u[m]):Me(u[m]);if(st(O,D))L(O,D,d,null,h,b,C,v,y);else break;m++}for(;m<=E&&m<=A;){const O=l[E],D=u[A]=y?Ue(u[A]):Me(u[A]);if(st(O,D))L(O,D,d,null,h,b,C,v,y);else break;E--,A--}if(m>E){if(m<=A){const O=A+1,D=O<I?u[O].el:g;for(;m<=A;)L(null,u[m]=y?Ue(u[m]):Me(u[m]),d,D,h,b,C,v,y),m++}}else if(m>A)for(;m<=E;)De(l[m],h,b,!0),m++;else{const O=m,D=m,k=new Map;for(m=D;m<=A;m++){const ge=u[m]=y?Ue(u[m]):Me(u[m]);ge.key!=null&&k.set(ge.key,m)}let U,V=0;const ye=A-D+1;let dt=!1,ds=0;const Et=new Array(ye);for(m=0;m<ye;m++)Et[m]=0;for(m=O;m<=E;m++){const ge=l[m];if(V>=ye){De(ge,h,b,!0);continue}let Te;if(ge.key!=null)Te=k.get(ge.key);else for(U=D;U<=A;U++)if(Et[U-D]===0&&st(ge,u[U])){Te=U;break}Te===void 0?De(ge,h,b,!0):(Et[Te-D]=m+1,Te>=ds?ds=Te:dt=!0,L(ge,u[Te],d,null,h,b,C,v,y),V++)}const ps=dt?Ho(Et):pt;for(U=ps.length-1,m=ye-1;m>=0;m--){const ge=D+m,Te=u[ge],hs=ge+1<I?u[ge+1].el:g;Et[m]===0?L(null,Te,d,hs,h,b,C,v,y):dt&&(U<0||m!==ps[U]?ut(Te,d,hs,2):U--)}}},ut=(l,u,d,g,h=null)=>{const{el:b,type:C,transition:v,children:y,shapeFlag:m}=l;if(m&6){ut(l.component.subTree,u,d,g);return}if(m&128){l.suspense.move(u,d,g);return}if(m&64){C.move(l,u,d,at);return}if(C===he){s(b,u,d);for(let E=0;E<y.length;E++)ut(y[E],u,d,g);s(l.anchor,u,d);return}if(C===In){J(l,u,d);return}if(g!==2&&m&1&&v)if(g===0)v.beforeEnter(b),s(b,u,d),pe(()=>v.enter(b),h);else{const{leave:E,delayLeave:A,afterLeave:O}=v,D=()=>s(b,u,d),k=()=>{E(b,()=>{D(),O&&O()})};A?A(b,D,k):k()}else s(b,u,d)},De=(l,u,d,g=!1,h=!1)=>{const{type:b,props:C,ref:v,children:y,dynamicChildren:m,shapeFlag:I,patchFlag:E,dirs:A}=l;if(v!=null&&jn(v,null,d,l,!0),I&256){u.ctx.deactivate(l);return}const O=I&1&&A,D=!Mt(l);let k;if(D&&(k=C&&C.onVnodeBeforeUnmount)&&Ie(k,u,l),I&6)Xi(l.component,d,g);else{if(I&128){l.suspense.unmount(d,g);return}O&&Ze(l,null,u,"beforeUnmount"),I&64?l.type.remove(l,u,d,h,at,g):m&&(b!==he||E>0&&E&64)?Pe(m,u,d,!1,!0):(b===he&&E&384||!h&&I&16)&&Pe(y,u,d),g&&us(l)}(D&&(k=C&&C.onVnodeUnmounted)||O)&&pe(()=>{k&&Ie(k,u,l),O&&Ze(l,null,u,"unmounted")},d)},us=l=>{const{type:u,el:d,anchor:g,transition:h}=l;if(u===he){Zi(d,g);return}if(u===In){re(l);return}const b=()=>{i(d),h&&!h.persisted&&h.afterLeave&&h.afterLeave()};if(l.shapeFlag&1&&h&&!h.persisted){const{leave:C,delayLeave:v}=h,y=()=>C(d,b);v?v(l.el,b,y):y()}else b()},Zi=(l,u)=>{let d;for(;l!==u;)d=x(l),i(l),l=d;i(u)},Xi=(l,u,d)=>{const{bum:g,scope:h,update:b,subTree:C,um:v}=l;g&&Vt(g),h.stop(),b&&(b.active=!1,De(C,l,u,d)),v&&pe(v,u),pe(()=>{l.isUnmounted=!0},u),u&&u.pendingBranch&&!u.isUnmounted&&l.asyncDep&&!l.asyncResolved&&l.suspenseId===u.pendingId&&(u.deps--,u.deps===0&&u.resolve())},Pe=(l,u,d,g=!1,h=!1,b=0)=>{for(let C=b;C<l.length;C++)De(l[C],u,d,g,h)},Ht=l=>l.shapeFlag&6?Ht(l.component.subTree):l.shapeFlag&128?l.suspense.next():x(l.anchor||l.el),as=(l,u,d)=>{l==null?u._vnode&&De(u._vnode,null,null,!0):L(u._vnode||null,l,u,null,null,null,d),Es(),bi(),u._vnode=l},at={p:L,um:De,m:ut,r:us,mt:ft,mc:z,pc:Le,pbc:te,n:Ht,o:e};let bn,xn;return t&&([bn,xn]=t(at)),{render:as,hydrate:bn,createApp:Ro(as,bn)}}function Xe({effect:e,update:t},n){e.allowRecurse=t.allowRecurse=n}function ji(e,t,n=!1){const s=e.children,i=t.children;if($(s)&&$(i))for(let r=0;r<s.length;r++){const o=s[r];let c=i[r];c.shapeFlag&1&&!c.dynamicChildren&&((c.patchFlag<=0||c.patchFlag===32)&&(c=i[r]=Ue(i[r]),c.el=o.el),n||ji(o,c))}}function Ho(e){const t=e.slice(),n=[0];let s,i,r,o,c;const f=e.length;for(s=0;s<f;s++){const a=e[s];if(a!==0){if(i=n[n.length-1],e[i]<a){t[s]=i,n.push(s);continue}for(r=0,o=n.length-1;r<o;)c=r+o>>1,e[n[c]]<a?r=c+1:o=c;a<e[n[r]]&&(r>0&&(t[s]=n[r-1]),n[r]=s)}}for(r=n.length,o=n[r-1];r-- >0;)n[r]=o,o=t[o];return n}const jo=e=>e.__isTeleport,he=Symbol(void 0),os=Symbol(void 0),xe=Symbol(void 0),In=Symbol(void 0),Ot=[];let we=null;function X(e=!1){Ot.push(we=e?null:[])}function ko(){Ot.pop(),we=Ot[Ot.length-1]||null}let Nt=1;function Bs(e){Nt+=e}function ki(e){return e.dynamicChildren=Nt>0?we||pt:null,ko(),Nt>0&&we&&we.push(e),e}function ae(e,t,n,s,i,r){return ki(B(e,t,n,s,i,r,!0))}function Ve(e,t,n,s,i){return ki(j(e,t,n,s,i,!0))}function en(e){return e?e.__v_isVNode===!0:!1}function st(e,t){return e.type===t.type&&e.key===t.key}const gn="__vInternal",Ui=({key:e})=>e!=null?e:null,qt=({ref:e,ref_key:t,ref_for:n})=>e!=null?ce(e)||le(e)||P(e)?{i:de,r:e,k:t,f:!!n}:e:null;function B(e,t=null,n=null,s=0,i=null,r=e===he?0:1,o=!1,c=!1){const f={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&Ui(t),ref:t&&qt(t),scopeId:un,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:r,patchFlag:s,dynamicProps:i,dynamicChildren:null,appContext:null};return c?(ls(f,n),r&128&&e.normalize(f)):n&&(f.shapeFlag|=ce(n)?8:16),Nt>0&&!o&&we&&(f.patchFlag>0||r&6)&&f.patchFlag!==32&&we.push(f),f}const j=Uo;function Uo(e,t=null,n=null,s=0,i=null,r=!1){if((!e||e===wo)&&(e=xe),en(e)){const c=Je(e,t,!0);return n&&ls(c,n),Nt>0&&!r&&we&&(c.shapeFlag&6?we[we.indexOf(e)]=c:we.push(c)),c.patchFlag|=-2,c}if(Go(e)&&(e=e.__vccOpts),t){t=Ko(t);let{class:c,style:f}=t;c&&!ce(c)&&(t.class=St(c)),q(f)&&(ai(f)&&!$(f)&&(f=ie({},f)),t.style=nn(f))}const o=ce(e)?1:ro(e)?128:jo(e)?64:q(e)?4:P(e)?2:0;return B(e,t,n,s,i,o,r,!0)}function Ko(e){return e?ai(e)||gn in e?ie({},e):e:null}function Je(e,t,n=!1){const{props:s,ref:i,patchFlag:r,children:o}=e,c=t?mn(s||{},t):s;return{__v_isVNode:!0,__v_skip:!0,type:e.type,props:c,key:c&&Ui(c),ref:t&&t.ref?n&&i?$(i)?i.concat(qt(t)):[i,qt(t)]:qt(t):i,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:o,target:e.target,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==he?r===-1?16:r|16:r,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:e.transition,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&Je(e.ssContent),ssFallback:e.ssFallback&&Je(e.ssFallback),el:e.el,anchor:e.anchor}}function zo(e=" ",t=0){return j(os,null,e,t)}function tt(e="",t=!1){return t?(X(),Ve(xe,null,e)):j(xe,null,e)}function Me(e){return e==null||typeof e=="boolean"?j(xe):$(e)?j(he,null,e.slice()):typeof e=="object"?Ue(e):j(os,null,String(e))}function Ue(e){return e.el===null||e.memo?e:Je(e)}function ls(e,t){let n=0;const{shapeFlag:s}=e;if(t==null)t=null;else if($(t))n=16;else if(typeof t=="object")if(s&65){const i=t.default;i&&(i._c&&(i._d=!1),ls(e,i()),i._c&&(i._d=!0));return}else{n=32;const i=t._;!i&&!(gn in t)?t._ctx=de:i===3&&de&&(de.slots._===1?t._=1:(t._=2,e.patchFlag|=1024))}else P(t)?(t={default:t,_ctx:de},n=32):(t=String(t),s&64?(n=16,t=[zo(t)]):n=8);e.children=t,e.shapeFlag|=n}function mn(...e){const t={};for(let n=0;n<e.length;n++){const s=e[n];for(const i in s)if(i==="class")t.class!==s.class&&(t.class=St([t.class,s.class]));else if(i==="style")t.style=nn([t.style,s.style]);else if(rn(i)){const r=t[i],o=s[i];o&&r!==o&&!($(r)&&r.includes(o))&&(t[i]=r?[].concat(r,o):o)}else i!==""&&(t[i]=s[i])}return t}function Ie(e,t,n,s=null){be(e,t,7,[n,s])}const Wo=Hi();let Vo=0;function qo(e,t,n){const s=e.type,i=(t?t.appContext:e.appContext)||Wo,r={uid:Vo++,vnode:e,type:s,parent:t,appContext:i,root:null,next:null,subTree:null,effect:null,update:null,scope:new hr(!0),render:null,proxy:null,exposed:null,exposeProxy:null,withProxy:null,provides:t?t.provides:Object.create(i.provides),accessCache:null,renderCache:[],components:null,directives:null,propsOptions:Ni(s,i),emitsOptions:yi(s,i),emit:null,emitted:null,propsDefaults:K,inheritAttrs:s.inheritAttrs,ctx:K,data:K,props:K,attrs:K,slots:K,refs:K,setupState:K,setupContext:null,suspense:n,suspenseId:n?n.pendingId:0,asyncDep:null,asyncResolved:!1,isMounted:!1,isUnmounted:!1,isDeactivated:!1,bc:null,c:null,bm:null,m:null,bu:null,u:null,um:null,bum:null,da:null,a:null,rtg:null,rtc:null,ec:null,sp:null};return r.ctx={_:r},r.root=t?t.root:r,r.emit=eo.bind(null,r),e.ce&&e.ce(r),r}let se=null;const Jo=()=>se||de,vt=e=>{se=e,e.scope.on()},lt=()=>{se&&se.scope.off(),se=null};function Ki(e){return e.vnode.shapeFlag&4}let Rt=!1;function Yo(e,t=!1){Rt=t;const{props:n,children:s}=e.vnode,i=Ki(e);Oo(e,n,i,t),Po(e,s);const r=i?Zo(e,t):void 0;return Rt=!1,r}function Zo(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=di(new Proxy(e.ctx,Eo));const{setup:s}=n;if(s){const i=e.setupContext=s.length>1?Qo(e):null;vt(e),xt();const r=We(s,e,0,[e.props,i]);if(yt(),lt(),Qs(r)){if(r.then(lt,lt),t)return r.then(o=>{Ns(e,o,t)}).catch(o=>{cn(o,e,0)});e.asyncDep=r}else Ns(e,r,t)}else zi(e,t)}function Ns(e,t,n){P(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:q(t)&&(e.setupState=gi(t)),zi(e,n)}let Rs;function zi(e,t,n){const s=e.type;if(!e.render){if(!t&&Rs&&!s.render){const i=s.template;if(i){const{isCustomElement:r,compilerOptions:o}=e.appContext.config,{delimiters:c,compilerOptions:f}=s,a=ie(ie({isCustomElement:r,delimiters:c},o),f);s.render=Rs(i,a)}}e.render=s.render||Ee}vt(e),xt(),To(e),yt(),lt()}function Xo(e){return new Proxy(e.attrs,{get(t,n){return me(e,"get","$attrs"),t[n]}})}function Qo(e){const t=s=>{e.exposed=s||{}};let n;return{get attrs(){return n||(n=Xo(e))},slots:e.slots,emit:e.emit,expose:t}}function _n(e){if(e.exposed)return e.exposeProxy||(e.exposeProxy=new Proxy(gi(di(e.exposed)),{get(t,n){if(n in t)return t[n];if(n in Qt)return Qt[n](e)}}))}function Go(e){return P(e)&&"__vccOpts"in e}const el=(e,t)=>qr(e,t,Rt);function tl(e,t,n){const s=arguments.length;return s===2?q(t)&&!$(t)?en(t)?j(e,null,[t]):j(e,t):j(e,null,t):(s>3?n=Array.prototype.slice.call(arguments,2):s===3&&en(n)&&(n=[n]),j(e,t,n))}const nl="3.2.38",sl="http://www.w3.org/2000/svg",it=typeof document<"u"?document:null,Ss=it&&it.createElement("template"),il={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,s)=>{const i=t?it.createElementNS(sl,e):it.createElement(e,n?{is:n}:void 0);return e==="select"&&s&&s.multiple!=null&&i.setAttribute("multiple",s.multiple),i},createText:e=>it.createTextNode(e),createComment:e=>it.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>it.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},cloneNode(e){const t=e.cloneNode(!0);return"_value"in e&&(t._value=e._value),t},insertStaticContent(e,t,n,s,i,r){const o=n?n.previousSibling:t.lastChild;if(i&&(i===r||i.nextSibling))for(;t.insertBefore(i.cloneNode(!0),n),!(i===r||!(i=i.nextSibling)););else{Ss.innerHTML=s?`<svg>${e}</svg>`:e;const c=Ss.content;if(s){const f=c.firstChild;for(;f.firstChild;)c.appendChild(f.firstChild);c.removeChild(f)}t.insertBefore(c,n)}return[o?o.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}};function rl(e,t,n){const s=e._vtc;s&&(t=(t?[t,...s]:[...s]).join(" ")),t==null?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}function ol(e,t,n){const s=e.style,i=ce(n);if(n&&!i){for(const r in n)kn(s,r,n[r]);if(t&&!ce(t))for(const r in t)n[r]==null&&kn(s,r,"")}else{const r=s.display;i?t!==n&&(s.cssText=n):t&&e.removeAttribute("style"),"_vod"in e&&(s.display=r)}}const Ds=/\s*!important$/;function kn(e,t,n){if($(n))n.forEach(s=>kn(e,t,s));else if(n==null&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const s=ll(e,t);Ds.test(n)?e.setProperty(bt(s),n.replace(Ds,""),"important"):e[s]=n}}const Hs=["Webkit","Moz","ms"],An={};function ll(e,t){const n=An[t];if(n)return n;let s=mt(t);if(s!=="filter"&&s in e)return An[t]=s;s=Gs(s);for(let i=0;i<Hs.length;i++){const r=Hs[i]+s;if(r in e)return An[t]=r}return t}const js="http://www.w3.org/1999/xlink";function cl(e,t,n,s,i){if(s&&t.startsWith("xlink:"))n==null?e.removeAttributeNS(js,t.slice(6,t.length)):e.setAttributeNS(js,t,n);else{const r=Gi(t);n==null||r&&!Xs(n)?e.removeAttribute(t):e.setAttribute(t,r?"":n)}}function fl(e,t,n,s,i,r,o){if(t==="innerHTML"||t==="textContent"){s&&o(s,i,r),e[t]=n==null?"":n;return}if(t==="value"&&e.tagName!=="PROGRESS"&&!e.tagName.includes("-")){e._value=n;const f=n==null?"":n;(e.value!==f||e.tagName==="OPTION")&&(e.value=f),n==null&&e.removeAttribute(t);return}let c=!1;if(n===""||n==null){const f=typeof e[t];f==="boolean"?n=Xs(n):n==null&&f==="string"?(n="",c=!0):f==="number"&&(n=0,c=!0)}try{e[t]=n}catch{}c&&e.removeAttribute(t)}const[Wi,ul]=(()=>{let e=Date.now,t=!1;if(typeof window<"u"){Date.now()>document.createEvent("Event").timeStamp&&(e=performance.now.bind(performance));const n=navigator.userAgent.match(/firefox\/(\d+)/i);t=!!(n&&Number(n[1])<=53)}return[e,t]})();let Un=0;const al=Promise.resolve(),dl=()=>{Un=0},pl=()=>Un||(al.then(dl),Un=Wi());function Vi(e,t,n,s){e.addEventListener(t,n,s)}function hl(e,t,n,s){e.removeEventListener(t,n,s)}function gl(e,t,n,s,i=null){const r=e._vei||(e._vei={}),o=r[t];if(s&&o)o.value=s;else{const[c,f]=ml(t);if(s){const a=r[t]=_l(s,i);Vi(e,c,a,f)}else o&&(hl(e,c,o,f),r[t]=void 0)}}const ks=/(?:Once|Passive|Capture)$/;function ml(e){let t;if(ks.test(e)){t={};let s;for(;s=e.match(ks);)e=e.slice(0,e.length-s[0].length),t[s[0].toLowerCase()]=!0}return[e[2]===":"?e.slice(3):bt(e.slice(2)),t]}function _l(e,t){const n=s=>{const i=s.timeStamp||Wi();(ul||i>=n.attached-1)&&be(vl(s,n.value),t,5,[s])};return n.value=e,n.attached=pl(),n}function vl(e,t){if($(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map(s=>i=>!i._stopped&&s&&s(i))}else return t}const Us=/^on[a-z]/,bl=(e,t,n,s,i=!1,r,o,c,f)=>{t==="class"?rl(e,s,i):t==="style"?ol(e,n,s):rn(t)?zn(t)||gl(e,t,n,s,o):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):xl(e,t,s,i))?fl(e,t,s,r,o,c,f):(t==="true-value"?e._trueValue=s:t==="false-value"&&(e._falseValue=s),cl(e,t,s,i))};function xl(e,t,n,s){return s?!!(t==="innerHTML"||t==="textContent"||t in e&&Us.test(t)&&P(n)):t==="spellcheck"||t==="draggable"||t==="translate"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA"||Us.test(t)&&ce(n)?!1:t in e}const je="transition",It="animation",Ke=(e,{slots:t})=>tl(Ei,yl(e),t);Ke.displayName="Transition";const qi={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};Ke.props=ie({},Ei.props,qi);const Qe=(e,t=[])=>{$(e)?e.forEach(n=>n(...t)):e&&e(...t)},Ks=e=>e?$(e)?e.some(t=>t.length>1):e.length>1:!1;function yl(e){const t={};for(const T in e)T in qi||(t[T]=e[T]);if(e.css===!1)return t;const{name:n="v",type:s,duration:i,enterFromClass:r=`${n}-enter-from`,enterActiveClass:o=`${n}-enter-active`,enterToClass:c=`${n}-enter-to`,appearFromClass:f=r,appearActiveClass:a=o,appearToClass:p=c,leaveFromClass:_=`${n}-leave-from`,leaveActiveClass:x=`${n}-leave-active`,leaveToClass:w=`${n}-leave-to`}=e,M=Cl(i),F=M&&M[0],L=M&&M[1],{onBeforeEnter:N,onEnter:fe,onEnterCancelled:Q,onLeave:J,onLeaveCancelled:re,onBeforeAppear:Se=N,onAppear:Fe=fe,onAppearCancelled:R=Q}=t,z=(T,Z,_e)=>{Ge(T,Z?p:c),Ge(T,Z?a:o),_e&&_e()},Y=(T,Z)=>{T._isLeaving=!1,Ge(T,_),Ge(T,w),Ge(T,x),Z&&Z()},te=T=>(Z,_e)=>{const ft=T?Fe:fe,ne=()=>z(Z,T,_e);Qe(ft,[Z,ne]),zs(()=>{Ge(Z,T?f:r),ke(Z,T?p:c),Ks(ft)||Ws(Z,s,F,ne)})};return ie(t,{onBeforeEnter(T){Qe(N,[T]),ke(T,r),ke(T,o)},onBeforeAppear(T){Qe(Se,[T]),ke(T,f),ke(T,a)},onEnter:te(!1),onAppear:te(!0),onLeave(T,Z){T._isLeaving=!0;const _e=()=>Y(T,Z);ke(T,_),Tl(),ke(T,x),zs(()=>{!T._isLeaving||(Ge(T,_),ke(T,w),Ks(J)||Ws(T,s,L,_e))}),Qe(J,[T,_e])},onEnterCancelled(T){z(T,!1),Qe(Q,[T])},onAppearCancelled(T){z(T,!0),Qe(R,[T])},onLeaveCancelled(T){Y(T),Qe(re,[T])}})}function Cl(e){if(e==null)return null;if(q(e))return[$n(e.enter),$n(e.leave)];{const t=$n(e);return[t,t]}}function $n(e){return Jn(e)}function ke(e,t){t.split(/\s+/).forEach(n=>n&&e.classList.add(n)),(e._vtc||(e._vtc=new Set)).add(t)}function Ge(e,t){t.split(/\s+/).forEach(s=>s&&e.classList.remove(s));const{_vtc:n}=e;n&&(n.delete(t),n.size||(e._vtc=void 0))}function zs(e){requestAnimationFrame(()=>{requestAnimationFrame(e)})}let wl=0;function Ws(e,t,n,s){const i=e._endId=++wl,r=()=>{i===e._endId&&s()};if(n)return setTimeout(r,n);const{type:o,timeout:c,propCount:f}=El(e,t);if(!o)return s();const a=o+"end";let p=0;const _=()=>{e.removeEventListener(a,x),r()},x=w=>{w.target===e&&++p>=f&&_()};setTimeout(()=>{p<f&&_()},c+1),e.addEventListener(a,x)}function El(e,t){const n=window.getComputedStyle(e),s=M=>(n[M]||"").split(", "),i=s(je+"Delay"),r=s(je+"Duration"),o=Vs(i,r),c=s(It+"Delay"),f=s(It+"Duration"),a=Vs(c,f);let p=null,_=0,x=0;t===je?o>0&&(p=je,_=o,x=r.length):t===It?a>0&&(p=It,_=a,x=f.length):(_=Math.max(o,a),p=_>0?o>a?je:It:null,x=p?p===je?r.length:f.length:0);const w=p===je&&/\b(transform|all)(,|$)/.test(n[je+"Property"]);return{type:p,timeout:_,propCount:x,hasTransform:w}}function Vs(e,t){for(;e.length<t.length;)e=e.concat(e);return Math.max(...t.map((n,s)=>qs(n)+qs(e[s])))}function qs(e){return Number(e.slice(0,-1).replace(",","."))*1e3}function Tl(){return document.body.offsetHeight}const Js=e=>{const t=e.props["onUpdate:modelValue"]||!1;return $(t)?n=>Vt(t,n):t},Il={deep:!0,created(e,{value:t,modifiers:{number:n}},s){const i=Vn(t);Vi(e,"change",()=>{const r=Array.prototype.filter.call(e.options,o=>o.selected).map(o=>n?Jn(tn(o)):tn(o));e._assign(e.multiple?i?new Set(r):r:r[0])}),e._assign=Js(s)},mounted(e,{value:t}){Ys(e,t)},beforeUpdate(e,t,n){e._assign=Js(n)},updated(e,{value:t}){Ys(e,t)}};function Ys(e,t){const n=e.multiple;if(!(n&&!$(t)&&!Vn(t))){for(let s=0,i=e.options.length;s<i;s++){const r=e.options[s],o=tn(r);if(n)$(t)?r.selected=ir(t,o)>-1:r.selected=t.has(o);else if(sn(tn(r),t)){e.selectedIndex!==s&&(e.selectedIndex=s);return}}!n&&e.selectedIndex!==-1&&(e.selectedIndex=-1)}}function tn(e){return"_value"in e?e._value:e.value}const Al=ie({patchProp:bl},il);let Zs;function $l(){return Zs||(Zs=So(Al))}const Ml=(...e)=>{const t=$l().createApp(...e),{mount:n}=t;return t.mount=s=>{const i=Ol(s);if(!i)return;const r=t._component;!P(r)&&!r.render&&!r.template&&(r.template=i.innerHTML),i.innerHTML="";const o=n(i,!1,i instanceof SVGElement);return i instanceof Element&&(i.removeAttribute("v-cloak"),i.setAttribute("data-v-app","")),o},t};function Ol(e){return ce(e)?document.querySelector(e):e}const Fl="/v-dynamic-island/vite.svg",Ll="/v-dynamic-island/assets/vue.5532db34.svg",cs=e=>(an("data-v-1690c822"),e=e(),dn(),e),Pl=["href"],Bl={width:"80",height:"80",viewBox:"0 0 250 250",style:{fill:"#151513",color:"#fff",position:"absolute",top:"0",border:"0",right:"0"},"aria-hidden":"true"},Nl=cs(()=>B("path",{d:"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"},null,-1)),Rl=cs(()=>B("path",{d:"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2",fill:"currentColor",style:{"transform-origin":"130px 106px"},class:"octo-arm"},null,-1)),Sl=cs(()=>B("path",{d:"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z",fill:"currentColor",class:"octo-body"},null,-1)),Dl=[Nl,Rl,Sl],Hl=ct({__name:"GitHubCorner",props:["url"],setup(e){return(t,n)=>(X(),ae("a",{href:e.url,target:"_blank",class:"github-corner","aria-label":"View source on GitHub"},[(X(),ae("svg",Bl,Dl))],8,Pl))}});const Ye=(e,t)=>{const n=e.__vccOpts||e;for(const[s,i]of t)n[s]=i;return n},jl=Ye(Hl,[["__scopeId","data-v-1690c822"]]),kl=e=>(an("data-v-4268da68"),e=e(),dn(),e),Ul=kl(()=>B("div",{class:"forbidden"},null,-1)),Kl={class:"content"},zl={key:0,class:"leading slot transition"},Wl={key:0,class:"leading-bg transition"},Vl={key:0,class:"trailing slot transition"},ql={key:0,class:"trailing-bg transition"},Jl={key:0,class:"main slot transition"},Yl={class:"main-leading slot"},Zl={class:"main-trailing slot"},Xl={key:0,class:"main-bg transition"},Ql=ct({__name:"DynamicIsland",props:{deviceWidth:{default:Math.min(430,window.innerWidth)},shown:{type:Boolean},expanded:{type:Boolean},warning:{type:Boolean},superLeading:{type:[Boolean,null]},superTrailing:{type:[Boolean,null]}},setup(e){const t=(w,M)=>{if(!(!w||w===!0))return w[M]},n=$e(0),s=$e(!1),i=(w,M)=>{const{width:F}=w.getBoundingClientRect();n.value=F,M(),setTimeout(()=>{s.value=!0})},r=$e(0),o=$e(!1),c=(w,M)=>{const{width:F}=w.getBoundingClientRect();r.value=F,M(),setTimeout(()=>{o.value=!0})},f=92,a=$e(f),p=$e(!1),_=(w,M)=>{const{height:F}=w.getBoundingClientRect();a.value=Math.max(F,f),w.classList.add("main-init"),M(),setTimeout(()=>{p.value=!0})},x=()=>{p.value=!1};return(w,M)=>(X(),ae("div",{class:St(["container",[{"super-leading":e.superLeading,"super-trailing":e.superTrailing,shown:e.shown,warning:e.warning,expanded:e.expanded,"leading-ready":s.value,"trailing-ready":o.value,"main-ready":p.value}]]),style:nn({"--leading-width":n.value,"--trailing-width":r.value,"--main-height":a.value,"--device-width":e.deviceWidth,"--expanded-leading-size":t(e.superLeading,"size"),"--expanded-leading-top":t(e.superLeading,"top"),"--expanded-leading-left":t(e.superLeading,"left"),"--expanded-trailing-size":t(e.superTrailing,"size"),"--expanded-trailing-top":t(e.superTrailing,"top"),"--expanded-trailing-right":t(e.superTrailing,"right")})},[Ul,B("div",Kl,[j(Ke,{name:"leading",onEnter:i},{default:ee(()=>[e.shown?(X(),ae("div",zl,[Tt(w.$slots,"leading",{},void 0,!0)])):tt("",!0)]),_:3}),j(Ke,{name:"leading-bg"},{default:ee(()=>[e.shown?(X(),ae("div",Wl)):tt("",!0)]),_:1}),j(Ke,{name:"trailing",onEnter:c},{default:ee(()=>[e.shown?(X(),ae("div",Vl,[Tt(w.$slots,"trailing",{},void 0,!0)])):tt("",!0)]),_:3}),j(Ke,{name:"trailing-bg"},{default:ee(()=>[e.shown?(X(),ae("div",ql)):tt("",!0)]),_:1}),j(Ke,{name:"main",onEnter:_,onAfterLeave:x},{default:ee(()=>[e.shown&&e.expanded?(X(),ae("div",Jl,[B("div",Yl,[Tt(w.$slots,"expanded-leading",{},void 0,!0)]),B("div",Zl,[Tt(w.$slots,"expanded-trailing",{},void 0,!0)]),Tt(w.$slots,"expanded",{},void 0,!0)])):tt("",!0)]),_:3}),j(Ke,{name:"main-bg"},{default:ee(()=>[e.shown&&e.expanded?(X(),ae("div",Xl)):tt("",!0)]),_:1})])],6))}});const fs=Ye(Ql,[["__scopeId","data-v-4268da68"]]),Gl={name:"UilApple",props:{size:{type:Number,default:20}}},ec=["width","height"],tc=B("path",{fill:"currentColor",d:"M14.94 5.19A4.38 4.38 0 0 0 16 2a4.44 4.44 0 0 0-3 1.52a4.17 4.17 0 0 0-1 3.09a3.69 3.69 0 0 0 2.94-1.42Zm2.52 7.44a4.51 4.51 0 0 1 2.16-3.81a4.66 4.66 0 0 0-3.66-2c-1.56-.16-3 .91-3.83.91s-2-.89-3.3-.87a4.92 4.92 0 0 0-4.14 2.53C2.93 12.45 4.24 17 6 19.47c.8 1.21 1.8 2.58 3.12 2.53s1.75-.82 3.28-.82s2 .82 3.3.79s2.22-1.24 3.06-2.45a11 11 0 0 0 1.38-2.85a4.41 4.41 0 0 1-2.68-4.04Z"},null,-1),nc=[tc];function sc(e,t,n,s,i,r){return X(),ae("svg",{width:`${n.size}px`,height:`${n.size}px`,viewBox:"0 0 24 24"},nc,8,ec)}const Ji=Ye(Gl,[["render",sc]]),ic={name:"UilCapture",props:{size:{type:Number,default:20}}},rc=["width","height"],oc=B("path",{d:"M256 456c-110.3 0-200-89.7-200-200 0-54.8 21.7-105.9 61.2-144 6.4-6.2 16.6-6 22.7.4 6.2 6.4 6 16.6-.4 22.7-33.1 32-51.3 74.9-51.3 120.9 0 92.5 75.3 167.8 167.8 167.8S423.8 348.5 423.8 256c0-87.1-66.7-159-151.8-167.1v62.6c0 8.9-7.2 16.1-16.1 16.1s-16.1-7.2-16.1-16.1V72.1c0-8.9 7.2-16.1 16.1-16.1 110.3 0 200 89.7 200 200S366.3 456 256 456z",fill:"currentColor"},null,-1),lc=B("path",{d:"M175.9 161.9l99.5 71.5c13.5 9.7 16.7 28.5 7 42s-28.5 16.7-42 7c-2.8-2-5.2-4.4-7-7l-71.5-99.5c-3.2-4.5-2.2-10.8 2.3-14 3.6-2.6 8.3-2.4 11.7 0z",fill:"currentColor"},null,-1),cc=[oc,lc];function fc(e,t,n,s,i,r){return X(),ae("svg",{width:`${n.size}px`,height:`${n.size}px`,viewBox:"0 0 512 512"},cc,8,rc)}const Yi=Ye(ic,[["render",fc]]),uc=ct({__name:"DemoA",props:{shown:{type:Boolean},warning:{type:Boolean},expanded:{type:Boolean}},emits:["expand","collapse"],setup(e,{emit:t}){return(n,s)=>(X(),Ve(fs,mn({class:"island"},{shown:e.shown,expanded:e.shown&&e.expanded,warning:e.warning,superLeading:!0,superTrailing:!0}),{leading:ee(()=>[j(Ji,{onClick:s[0]||(s[0]=i=>t("expand")),style:{padding:"10px"}})]),trailing:ee(()=>[j(Yi,{onClick:s[1]||(s[1]=i=>t("expand")),style:{padding:"10px"}})]),expanded:ee(()=>[B("div",{onClick:s[2]||(s[2]=i=>t("collapse"))}," Click to collapse ")]),_:1},16))}}),ac=ct({__name:"DemoB",props:{shown:{type:Boolean},warning:{type:Boolean},expanded:{type:Boolean}},emits:["expand","collapse"],setup(e,{emit:t}){return(n,s)=>(X(),Ve(fs,mn({class:"island"},{shown:e.shown,expanded:e.shown&&e.expanded,warning:e.warning,superLeading:!0}),{leading:ee(()=>[j(Ji,{onClick:s[0]||(s[0]=i=>t("expand")),style:{padding:"10px"}})]),trailing:ee(()=>[B("div",{onClick:s[1]||(s[1]=i=>t("expand")),style:{padding:"10px"}},"Ring")]),expanded:ee(()=>[B("div",{onClick:s[2]||(s[2]=i=>t("collapse"))}," Click to collapse ")]),"expanded-trailing":ee(()=>[j(Yi,{size:60,style:{padding:"10px"}})]),_:1},16))}}),dc={},pc={style:{padding:"5px 10px"}},hc=B("img",{src:"https://github.com/jinjiang.png?size=200",style:{display:"block",width:"30px",height:"30px","border-radius":"5px"}},null,-1),gc=[hc];function mc(e,t){return X(),ae("div",pc,gc)}const _c=Ye(dc,[["render",mc]]),vc={},bc={style:{background:"rgba(255, 165, 0, .8)",padding:"5px 10px","border-radius":"5px"}};function xc(e,t){return X(),ae("div",bc," LABEL ")}const yc=Ye(vc,[["render",xc]]),Cc=e=>(an("data-v-5178ebfc"),e=e(),dn(),e),wc=Cc(()=>B("div",{class:"bottom"},null,-1)),Ec=ct({__name:"LargeContent",emits:["click"],setup(e,{emit:t}){return(n,s)=>(X(),ae(he,null,[B("div",{onClick:s[0]||(s[0]=i=>t("click"))}," Click to collapse "),wc],64))}});const Tc=Ye(Ec,[["__scopeId","data-v-5178ebfc"]]),Ic=B("div",{style:{padding:"10px"}},"Ring",-1),Ac=ct({__name:"DemoC",props:{shown:{type:Boolean},warning:{type:Boolean},expanded:{type:Boolean}},emits:["expand","collapse"],setup(e,{emit:t}){return(n,s)=>(X(),Ve(fs,mn({class:"island"},{shown:e.shown,expanded:e.shown&&e.expanded,warning:e.warning,superLeading:{top:60,left:60,size:100}}),{leading:ee(()=>[j(_c,{onClick:s[0]||(s[0]=i=>t("expand"))})]),trailing:ee(()=>[Ic]),expanded:ee(()=>[j(Tc,{onClick:s[1]||(s[1]=i=>t("collapse"))})]),"expanded-trailing":ee(()=>[j(yc)]),_:1},16))}}),Ct=e=>(an("data-v-bd2345cf"),e=e(),dn(),e),$c=Ct(()=>B("h1",null,"Vue Dynamic Island",-1)),Mc=Ct(()=>B("div",null,[B("a",{href:"https://vitejs.dev",target:"_blank"},[B("img",{src:Fl,class:"logo",alt:"Vite logo"})]),B("a",{href:"https://vuejs.org/",target:"_blank"},[B("img",{src:Ll,class:"logo vue",alt:"Vue logo"})])],-1)),Oc={class:"controls"},Fc=Ct(()=>B("option",{value:"A",selected:""},"Demo A",-1)),Lc=Ct(()=>B("option",{value:"B",selected:""},"Demo B",-1)),Pc=Ct(()=>B("option",{value:"C",selected:""},"Demo C",-1)),Bc=[Fc,Lc,Pc],Nc=["disabled"],Rc=Ct(()=>B("p",{class:"credits"},"The iPhone background image is from apple.com.",-1)),Sc=ct({__name:"App",setup(e){const t=$e(!1),n=$e(!1),s=$e(!1),i=window.innerWidth>430,r=$e("A"),o=()=>{t.value=!1,n.value=!1,s.value=!1};return(c,f)=>(X(),ae(he,null,[$c,Mc,B("div",Oc,[B("p",null,[Co(B("select",{"onUpdate:modelValue":f[0]||(f[0]=a=>r.value=a),onChange:o},Bc,544),[[Il,r.value]])]),B("p",null,[B("button",{onClick:f[1]||(f[1]=a=>(s.value=!1,t.value=!t.value,n.value=!1))},"Visible")]),B("p",null,[B("button",{disabled:!t.value||n.value||s.value,onClick:f[2]||(f[2]=a=>n.value=!0)},"Warn",8,Nc)])]),B("div",{class:St(["stage",{"has-background":i}])},[r.value==="A"?(X(),Ve(uc,{key:0,shown:t.value,warning:n.value,expanded:s.value,onExpand:f[3]||(f[3]=a=>s.value=!0),onCollapse:f[4]||(f[4]=a=>s.value=!1)},null,8,["shown","warning","expanded"])):r.value==="B"?(X(),Ve(ac,{key:1,shown:t.value,warning:n.value,expanded:s.value,onExpand:f[5]||(f[5]=a=>s.value=!0),onCollapse:f[6]||(f[6]=a=>s.value=!1)},null,8,["shown","warning","expanded"])):r.value==="C"?(X(),Ve(Ac,{key:2,shown:t.value,warning:n.value,expanded:s.value,onExpand:f[7]||(f[7]=a=>s.value=!0),onCollapse:f[8]||(f[8]=a=>s.value=!1)},null,8,["shown","warning","expanded"])):tt("",!0)],2),Rc,j(jl,{url:"https://github.com/Jinjiang/v-dynamic-island"})],64))}});const Dc=Ye(Sc,[["__scopeId","data-v-bd2345cf"]]);Ml(Dc).mount("#app");
2 | 


--------------------------------------------------------------------------------