mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
Updating dependencies and remove components as they are in lib.
This commit is contained in:
Bradley Shellnut
parent
85459d531e
commit
b33306ab89
8 changed files with 79 additions and 654 deletions
10
package.json
10
package.json
|
|
@ -12,24 +12,24 @@
|
||||||
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
|
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@playwright/test": "^1.22.2",
|
"@playwright/test": "^1.23.1",
|
||||||
"@rgossiaux/svelte-headlessui": "1.0.0-beta.12",
|
"@rgossiaux/svelte-headlessui": "1.0.0-beta.12",
|
||||||
"@sveltejs/adapter-auto": "1.0.0-next.51",
|
"@sveltejs/adapter-auto": "1.0.0-next.51",
|
||||||
"@sveltejs/kit": "1.0.0-next.352",
|
"@sveltejs/kit": "1.0.0-next.352",
|
||||||
"@types/cookie": "^0.5.1",
|
"@types/cookie": "^0.5.1",
|
||||||
"@types/node": "^17.0.45",
|
"@types/node": "^17.0.45",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.29.0",
|
"@typescript-eslint/eslint-plugin": "^5.30.5",
|
||||||
"@typescript-eslint/parser": "^5.29.0",
|
"@typescript-eslint/parser": "^5.30.5",
|
||||||
"carbon-components-svelte": "^0.63.8",
|
"carbon-components-svelte": "^0.63.8",
|
||||||
"carbon-icons-svelte": "^11.1.0",
|
"carbon-icons-svelte": "^11.1.0",
|
||||||
"eslint": "^8.18.0",
|
"eslint": "^8.19.0",
|
||||||
"eslint-config-prettier": "^8.5.0",
|
"eslint-config-prettier": "^8.5.0",
|
||||||
"eslint-plugin-svelte3": "^3.4.1",
|
"eslint-plugin-svelte3": "^3.4.1",
|
||||||
"prettier": "^2.7.1",
|
"prettier": "^2.7.1",
|
||||||
"prettier-plugin-svelte": "^2.7.0",
|
"prettier-plugin-svelte": "^2.7.0",
|
||||||
"sass": "^1.53.0",
|
"sass": "^1.53.0",
|
||||||
"svelte": "^3.48.0",
|
"svelte": "^3.48.0",
|
||||||
"svelte-check": "^2.7.2",
|
"svelte-check": "^2.8.0",
|
||||||
"svelte-preprocess": "^4.10.7",
|
"svelte-preprocess": "^4.10.7",
|
||||||
"tslib": "^2.4.0",
|
"tslib": "^2.4.0",
|
||||||
"typescript": "^4.7.4"
|
"typescript": "^4.7.4"
|
||||||
|
|
|
||||||
139
pnpm-lock.yaml
139
pnpm-lock.yaml
|
|
@ -3,25 +3,25 @@ lockfileVersion: 5.4
|
||||||
specifiers:
|
specifiers:
|
||||||
'@fontsource/fira-mono': ^4.5.8
|
'@fontsource/fira-mono': ^4.5.8
|
||||||
'@lukeed/uuid': ^2.0.0
|
'@lukeed/uuid': ^2.0.0
|
||||||
'@playwright/test': ^1.22.2
|
'@playwright/test': ^1.23.1
|
||||||
'@rgossiaux/svelte-headlessui': 1.0.0-beta.12
|
'@rgossiaux/svelte-headlessui': 1.0.0-beta.12
|
||||||
'@sveltejs/adapter-auto': 1.0.0-next.51
|
'@sveltejs/adapter-auto': 1.0.0-next.51
|
||||||
'@sveltejs/kit': 1.0.0-next.352
|
'@sveltejs/kit': 1.0.0-next.352
|
||||||
'@types/cookie': ^0.5.1
|
'@types/cookie': ^0.5.1
|
||||||
'@types/node': ^17.0.45
|
'@types/node': ^17.0.45
|
||||||
'@typescript-eslint/eslint-plugin': ^5.29.0
|
'@typescript-eslint/eslint-plugin': ^5.30.5
|
||||||
'@typescript-eslint/parser': ^5.29.0
|
'@typescript-eslint/parser': ^5.30.5
|
||||||
carbon-components-svelte: ^0.63.8
|
carbon-components-svelte: ^0.63.8
|
||||||
carbon-icons-svelte: ^11.1.0
|
carbon-icons-svelte: ^11.1.0
|
||||||
cookie: ^0.5.0
|
cookie: ^0.5.0
|
||||||
eslint: ^8.18.0
|
eslint: ^8.19.0
|
||||||
eslint-config-prettier: ^8.5.0
|
eslint-config-prettier: ^8.5.0
|
||||||
eslint-plugin-svelte3: ^3.4.1
|
eslint-plugin-svelte3: ^3.4.1
|
||||||
prettier: ^2.7.1
|
prettier: ^2.7.1
|
||||||
prettier-plugin-svelte: ^2.7.0
|
prettier-plugin-svelte: ^2.7.0
|
||||||
sass: ^1.53.0
|
sass: ^1.53.0
|
||||||
svelte: ^3.48.0
|
svelte: ^3.48.0
|
||||||
svelte-check: ^2.7.2
|
svelte-check: ^2.8.0
|
||||||
svelte-preprocess: ^4.10.7
|
svelte-preprocess: ^4.10.7
|
||||||
tslib: ^2.4.0
|
tslib: ^2.4.0
|
||||||
typescript: ^4.7.4
|
typescript: ^4.7.4
|
||||||
|
|
@ -34,24 +34,24 @@ dependencies:
|
||||||
zod: 3.17.3
|
zod: 3.17.3
|
||||||
|
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@playwright/test': 1.22.2
|
'@playwright/test': 1.23.1
|
||||||
'@rgossiaux/svelte-headlessui': 1.0.0-beta.12_svelte@3.48.0
|
'@rgossiaux/svelte-headlessui': 1.0.0-beta.12_svelte@3.48.0
|
||||||
'@sveltejs/adapter-auto': 1.0.0-next.51
|
'@sveltejs/adapter-auto': 1.0.0-next.51
|
||||||
'@sveltejs/kit': 1.0.0-next.352_sass@1.53.0+svelte@3.48.0
|
'@sveltejs/kit': 1.0.0-next.352_sass@1.53.0+svelte@3.48.0
|
||||||
'@types/cookie': 0.5.1
|
'@types/cookie': 0.5.1
|
||||||
'@types/node': 17.0.45
|
'@types/node': 17.0.45
|
||||||
'@typescript-eslint/eslint-plugin': 5.29.0_qqmbkyiaixvppdwswpytuf2hgm
|
'@typescript-eslint/eslint-plugin': 5.30.5_6zdoc3rn4mpiddqwhppni2mnnm
|
||||||
'@typescript-eslint/parser': 5.29.0_b5e7v2qnwxfo6hmiq56u52mz3e
|
'@typescript-eslint/parser': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
|
||||||
carbon-components-svelte: 0.63.8
|
carbon-components-svelte: 0.63.8
|
||||||
carbon-icons-svelte: 11.1.0
|
carbon-icons-svelte: 11.1.0
|
||||||
eslint: 8.18.0
|
eslint: 8.19.0
|
||||||
eslint-config-prettier: 8.5.0_eslint@8.18.0
|
eslint-config-prettier: 8.5.0_eslint@8.19.0
|
||||||
eslint-plugin-svelte3: 3.4.1_wy4erphnvhealet26qderqv6bu
|
eslint-plugin-svelte3: 3.4.1_m4jpobot6gi3xtcba7bv5cflma
|
||||||
prettier: 2.7.1
|
prettier: 2.7.1
|
||||||
prettier-plugin-svelte: 2.7.0_nakrehnrzdf7fdea5k3a4dfy4m
|
prettier-plugin-svelte: 2.7.0_nakrehnrzdf7fdea5k3a4dfy4m
|
||||||
sass: 1.53.0
|
sass: 1.53.0
|
||||||
svelte: 3.48.0
|
svelte: 3.48.0
|
||||||
svelte-check: 2.7.2_sass@1.53.0+svelte@3.48.0
|
svelte-check: 2.8.0_sass@1.53.0+svelte@3.48.0
|
||||||
svelte-preprocess: 4.10.7_cskk2ketiwcmbharqp7ehzkhki
|
svelte-preprocess: 4.10.7_cskk2ketiwcmbharqp7ehzkhki
|
||||||
tslib: 2.4.0
|
tslib: 2.4.0
|
||||||
typescript: 4.7.4
|
typescript: 4.7.4
|
||||||
|
|
@ -165,13 +165,13 @@ packages:
|
||||||
fastq: 1.13.0
|
fastq: 1.13.0
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@playwright/test/1.22.2:
|
/@playwright/test/1.23.1:
|
||||||
resolution: {integrity: sha512-cCl96BEBGPtptFz7C2FOSN3PrTnJ3rPpENe+gYCMx4GNNDlN4tmo2D89y13feGKTMMAIVrXfSQ/UmaQKLy1XLA==}
|
resolution: {integrity: sha512-dKplLPSYPZgnsBk1xxOophhpx3ZVg8DveoNJgLPe096lDCfmaIIreLsYF+4hqzy3PG61IP+aEnG5VAOjC3bhbA==}
|
||||||
engines: {node: '>=14'}
|
engines: {node: '>=14'}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
dependencies:
|
dependencies:
|
||||||
'@types/node': 17.0.45
|
'@types/node': 17.0.45
|
||||||
playwright-core: 1.22.2
|
playwright-core: 1.23.1
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@rgossiaux/svelte-headlessui/1.0.0-beta.12_svelte@3.48.0:
|
/@rgossiaux/svelte-headlessui/1.0.0-beta.12_svelte@3.48.0:
|
||||||
|
|
@ -292,8 +292,8 @@ packages:
|
||||||
'@types/node': 17.0.45
|
'@types/node': 17.0.45
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@typescript-eslint/eslint-plugin/5.29.0_qqmbkyiaixvppdwswpytuf2hgm:
|
/@typescript-eslint/eslint-plugin/5.30.5_6zdoc3rn4mpiddqwhppni2mnnm:
|
||||||
resolution: {integrity: sha512-kgTsISt9pM53yRFQmLZ4npj99yGl3x3Pl7z4eA66OuTzAGC4bQB5H5fuLwPnqTKU3yyrrg4MIhjF17UYnL4c0w==}
|
resolution: {integrity: sha512-lftkqRoBvc28VFXEoRgyZuztyVUQ04JvUnATSPtIRFAccbXTWL6DEtXGYMcbg998kXw1NLUJm7rTQ9eUt+q6Ig==}
|
||||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
'@typescript-eslint/parser': ^5.0.0
|
'@typescript-eslint/parser': ^5.0.0
|
||||||
|
|
@ -303,12 +303,12 @@ packages:
|
||||||
typescript:
|
typescript:
|
||||||
optional: true
|
optional: true
|
||||||
dependencies:
|
dependencies:
|
||||||
'@typescript-eslint/parser': 5.29.0_b5e7v2qnwxfo6hmiq56u52mz3e
|
'@typescript-eslint/parser': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
|
||||||
'@typescript-eslint/scope-manager': 5.29.0
|
'@typescript-eslint/scope-manager': 5.30.5
|
||||||
'@typescript-eslint/type-utils': 5.29.0_b5e7v2qnwxfo6hmiq56u52mz3e
|
'@typescript-eslint/type-utils': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
|
||||||
'@typescript-eslint/utils': 5.29.0_b5e7v2qnwxfo6hmiq56u52mz3e
|
'@typescript-eslint/utils': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
|
||||||
debug: 4.3.4
|
debug: 4.3.4
|
||||||
eslint: 8.18.0
|
eslint: 8.19.0
|
||||||
functional-red-black-tree: 1.0.1
|
functional-red-black-tree: 1.0.1
|
||||||
ignore: 5.2.0
|
ignore: 5.2.0
|
||||||
regexpp: 3.2.0
|
regexpp: 3.2.0
|
||||||
|
|
@ -319,8 +319,8 @@ packages:
|
||||||
- supports-color
|
- supports-color
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@typescript-eslint/parser/5.29.0_b5e7v2qnwxfo6hmiq56u52mz3e:
|
/@typescript-eslint/parser/5.30.5_4x5o4skxv6sl53vpwefgt23khm:
|
||||||
resolution: {integrity: sha512-ruKWTv+x0OOxbzIw9nW5oWlUopvP/IQDjB5ZqmTglLIoDTctLlAJpAQFpNPJP/ZI7hTT9sARBosEfaKbcFuECw==}
|
resolution: {integrity: sha512-zj251pcPXI8GO9NDKWWmygP6+UjwWmrdf9qMW/L/uQJBM/0XbU2inxe5io/234y/RCvwpKEYjZ6c1YrXERkK4Q==}
|
||||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
|
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
|
||||||
|
|
@ -329,26 +329,26 @@ packages:
|
||||||
typescript:
|
typescript:
|
||||||
optional: true
|
optional: true
|
||||||
dependencies:
|
dependencies:
|
||||||
'@typescript-eslint/scope-manager': 5.29.0
|
'@typescript-eslint/scope-manager': 5.30.5
|
||||||
'@typescript-eslint/types': 5.29.0
|
'@typescript-eslint/types': 5.30.5
|
||||||
'@typescript-eslint/typescript-estree': 5.29.0_typescript@4.7.4
|
'@typescript-eslint/typescript-estree': 5.30.5_typescript@4.7.4
|
||||||
debug: 4.3.4
|
debug: 4.3.4
|
||||||
eslint: 8.18.0
|
eslint: 8.19.0
|
||||||
typescript: 4.7.4
|
typescript: 4.7.4
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@typescript-eslint/scope-manager/5.29.0:
|
/@typescript-eslint/scope-manager/5.30.5:
|
||||||
resolution: {integrity: sha512-etbXUT0FygFi2ihcxDZjz21LtC+Eps9V2xVx09zFoN44RRHPrkMflidGMI+2dUs821zR1tDS6Oc9IXxIjOUZwA==}
|
resolution: {integrity: sha512-NJ6F+YHHFT/30isRe2UTmIGGAiXKckCyMnIV58cE3JkHmaD6e5zyEYm5hBDv0Wbin+IC0T1FWJpD3YqHUG/Ydg==}
|
||||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@typescript-eslint/types': 5.29.0
|
'@typescript-eslint/types': 5.30.5
|
||||||
'@typescript-eslint/visitor-keys': 5.29.0
|
'@typescript-eslint/visitor-keys': 5.30.5
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@typescript-eslint/type-utils/5.29.0_b5e7v2qnwxfo6hmiq56u52mz3e:
|
/@typescript-eslint/type-utils/5.30.5_4x5o4skxv6sl53vpwefgt23khm:
|
||||||
resolution: {integrity: sha512-JK6bAaaiJozbox3K220VRfCzLa9n0ib/J+FHIwnaV3Enw/TO267qe0pM1b1QrrEuy6xun374XEAsRlA86JJnyg==}
|
resolution: {integrity: sha512-k9+ejlv1GgwN1nN7XjVtyCgE0BTzhzT1YsQF0rv4Vfj2U9xnslBgMYYvcEYAFVdvhuEscELJsB7lDkN7WusErw==}
|
||||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
eslint: '*'
|
eslint: '*'
|
||||||
|
|
@ -357,22 +357,22 @@ packages:
|
||||||
typescript:
|
typescript:
|
||||||
optional: true
|
optional: true
|
||||||
dependencies:
|
dependencies:
|
||||||
'@typescript-eslint/utils': 5.29.0_b5e7v2qnwxfo6hmiq56u52mz3e
|
'@typescript-eslint/utils': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
|
||||||
debug: 4.3.4
|
debug: 4.3.4
|
||||||
eslint: 8.18.0
|
eslint: 8.19.0
|
||||||
tsutils: 3.21.0_typescript@4.7.4
|
tsutils: 3.21.0_typescript@4.7.4
|
||||||
typescript: 4.7.4
|
typescript: 4.7.4
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@typescript-eslint/types/5.29.0:
|
/@typescript-eslint/types/5.30.5:
|
||||||
resolution: {integrity: sha512-X99VbqvAXOMdVyfFmksMy3u8p8yoRGITgU1joBJPzeYa0rhdf5ok9S56/itRoUSh99fiDoMtarSIJXo7H/SnOg==}
|
resolution: {integrity: sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw==}
|
||||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@typescript-eslint/typescript-estree/5.29.0_typescript@4.7.4:
|
/@typescript-eslint/typescript-estree/5.30.5_typescript@4.7.4:
|
||||||
resolution: {integrity: sha512-mQvSUJ/JjGBdvo+1LwC+GY2XmSYjK1nAaVw2emp/E61wEVYEyibRHCqm1I1vEKbXCpUKuW4G7u9ZCaZhJbLoNQ==}
|
resolution: {integrity: sha512-qGTc7QZC801kbYjAr4AgdOfnokpwStqyhSbiQvqGBLixniAKyH+ib2qXIVo4P9NgGzwyfD9I0nlJN7D91E1VpQ==}
|
||||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
typescript: '*'
|
typescript: '*'
|
||||||
|
|
@ -380,8 +380,8 @@ packages:
|
||||||
typescript:
|
typescript:
|
||||||
optional: true
|
optional: true
|
||||||
dependencies:
|
dependencies:
|
||||||
'@typescript-eslint/types': 5.29.0
|
'@typescript-eslint/types': 5.30.5
|
||||||
'@typescript-eslint/visitor-keys': 5.29.0
|
'@typescript-eslint/visitor-keys': 5.30.5
|
||||||
debug: 4.3.4
|
debug: 4.3.4
|
||||||
globby: 11.1.0
|
globby: 11.1.0
|
||||||
is-glob: 4.0.3
|
is-glob: 4.0.3
|
||||||
|
|
@ -392,29 +392,29 @@ packages:
|
||||||
- supports-color
|
- supports-color
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@typescript-eslint/utils/5.29.0_b5e7v2qnwxfo6hmiq56u52mz3e:
|
/@typescript-eslint/utils/5.30.5_4x5o4skxv6sl53vpwefgt23khm:
|
||||||
resolution: {integrity: sha512-3Eos6uP1nyLOBayc/VUdKZikV90HahXE5Dx9L5YlSd/7ylQPXhLk1BYb29SDgnBnTp+jmSZUU0QxUiyHgW4p7A==}
|
resolution: {integrity: sha512-o4SSUH9IkuA7AYIfAvatldovurqTAHrfzPApOZvdUq01hHojZojCFXx06D/aFpKCgWbMPRdJBWAC3sWp3itwTA==}
|
||||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
|
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
|
||||||
dependencies:
|
dependencies:
|
||||||
'@types/json-schema': 7.0.11
|
'@types/json-schema': 7.0.11
|
||||||
'@typescript-eslint/scope-manager': 5.29.0
|
'@typescript-eslint/scope-manager': 5.30.5
|
||||||
'@typescript-eslint/types': 5.29.0
|
'@typescript-eslint/types': 5.30.5
|
||||||
'@typescript-eslint/typescript-estree': 5.29.0_typescript@4.7.4
|
'@typescript-eslint/typescript-estree': 5.30.5_typescript@4.7.4
|
||||||
eslint: 8.18.0
|
eslint: 8.19.0
|
||||||
eslint-scope: 5.1.1
|
eslint-scope: 5.1.1
|
||||||
eslint-utils: 3.0.0_eslint@8.18.0
|
eslint-utils: 3.0.0_eslint@8.19.0
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
- typescript
|
- typescript
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@typescript-eslint/visitor-keys/5.29.0:
|
/@typescript-eslint/visitor-keys/5.30.5:
|
||||||
resolution: {integrity: sha512-Hpb/mCWsjILvikMQoZIE3voc9wtQcS0A9FUw3h8bhr9UxBdtI/tw1ZDZUOXHXLOVMedKCH5NxyzATwnU78bWCQ==}
|
resolution: {integrity: sha512-D+xtGo9HUMELzWIUqcQc0p2PO4NyvTrgIOK/VnSH083+8sq0tiLozNRKuLarwHYGRuA6TVBQSuuLwJUDWd3aaA==}
|
||||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@typescript-eslint/types': 5.29.0
|
'@typescript-eslint/types': 5.30.5
|
||||||
eslint-visitor-keys: 3.3.0
|
eslint-visitor-keys: 3.3.0
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
|
@ -660,6 +660,11 @@ packages:
|
||||||
|
|
||||||
/debug/3.2.7:
|
/debug/3.2.7:
|
||||||
resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
|
resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
|
||||||
|
peerDependencies:
|
||||||
|
supports-color: '*'
|
||||||
|
peerDependenciesMeta:
|
||||||
|
supports-color:
|
||||||
|
optional: true
|
||||||
dependencies:
|
dependencies:
|
||||||
ms: 2.1.3
|
ms: 2.1.3
|
||||||
dev: true
|
dev: true
|
||||||
|
|
@ -945,23 +950,23 @@ packages:
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/eslint-config-prettier/8.5.0_eslint@8.18.0:
|
/eslint-config-prettier/8.5.0_eslint@8.19.0:
|
||||||
resolution: {integrity: sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==}
|
resolution: {integrity: sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
eslint: '>=7.0.0'
|
eslint: '>=7.0.0'
|
||||||
dependencies:
|
dependencies:
|
||||||
eslint: 8.18.0
|
eslint: 8.19.0
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/eslint-plugin-svelte3/3.4.1_wy4erphnvhealet26qderqv6bu:
|
/eslint-plugin-svelte3/3.4.1_m4jpobot6gi3xtcba7bv5cflma:
|
||||||
resolution: {integrity: sha512-7p59WG8qV8L6wLdl4d/c3mdjkgVglQCdv5XOTk/iNPBKXuuV+Q0eFP5Wa6iJd/G2M1qR3BkLPEzaANOqKAZczw==}
|
resolution: {integrity: sha512-7p59WG8qV8L6wLdl4d/c3mdjkgVglQCdv5XOTk/iNPBKXuuV+Q0eFP5Wa6iJd/G2M1qR3BkLPEzaANOqKAZczw==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
eslint: '>=6.0.0'
|
eslint: '>=6.0.0'
|
||||||
svelte: ^3.2.0
|
svelte: ^3.2.0
|
||||||
dependencies:
|
dependencies:
|
||||||
eslint: 8.18.0
|
eslint: 8.19.0
|
||||||
svelte: 3.48.0
|
svelte: 3.48.0
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
|
@ -981,13 +986,13 @@ packages:
|
||||||
estraverse: 5.3.0
|
estraverse: 5.3.0
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/eslint-utils/3.0.0_eslint@8.18.0:
|
/eslint-utils/3.0.0_eslint@8.19.0:
|
||||||
resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
|
resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
|
||||||
engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
|
engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
eslint: '>=5'
|
eslint: '>=5'
|
||||||
dependencies:
|
dependencies:
|
||||||
eslint: 8.18.0
|
eslint: 8.19.0
|
||||||
eslint-visitor-keys: 2.1.0
|
eslint-visitor-keys: 2.1.0
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
|
@ -1001,8 +1006,8 @@ packages:
|
||||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/eslint/8.18.0:
|
/eslint/8.19.0:
|
||||||
resolution: {integrity: sha512-As1EfFMVk7Xc6/CvhssHUjsAQSkpfXvUGMFC3ce8JDe6WvqCgRrLOBQbVpsBFr1X1V+RACOadnzVvcUS5ni2bA==}
|
resolution: {integrity: sha512-SXOPj3x9VKvPe81TjjUJCYlV4oJjQw68Uek+AM0X4p+33dj2HY5bpTZOgnQHcG2eAm1mtCU9uNMnJi7exU/kYw==}
|
||||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
dependencies:
|
dependencies:
|
||||||
|
|
@ -1015,7 +1020,7 @@ packages:
|
||||||
doctrine: 3.0.0
|
doctrine: 3.0.0
|
||||||
escape-string-regexp: 4.0.0
|
escape-string-regexp: 4.0.0
|
||||||
eslint-scope: 7.1.1
|
eslint-scope: 7.1.1
|
||||||
eslint-utils: 3.0.0_eslint@8.18.0
|
eslint-utils: 3.0.0_eslint@8.19.0
|
||||||
eslint-visitor-keys: 3.3.0
|
eslint-visitor-keys: 3.3.0
|
||||||
espree: 9.3.2
|
espree: 9.3.2
|
||||||
esquery: 1.4.0
|
esquery: 1.4.0
|
||||||
|
|
@ -1572,6 +1577,8 @@ packages:
|
||||||
debug: 3.2.7
|
debug: 3.2.7
|
||||||
iconv-lite: 0.4.24
|
iconv-lite: 0.4.24
|
||||||
sax: 1.2.4
|
sax: 1.2.4
|
||||||
|
transitivePeerDependencies:
|
||||||
|
- supports-color
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/node-fetch/2.6.7:
|
/node-fetch/2.6.7:
|
||||||
|
|
@ -1606,6 +1613,8 @@ packages:
|
||||||
rimraf: 2.7.1
|
rimraf: 2.7.1
|
||||||
semver: 5.7.1
|
semver: 5.7.1
|
||||||
tar: 4.4.19
|
tar: 4.4.19
|
||||||
|
transitivePeerDependencies:
|
||||||
|
- supports-color
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/nopt/4.0.3:
|
/nopt/4.0.3:
|
||||||
|
|
@ -1745,8 +1754,8 @@ packages:
|
||||||
engines: {node: '>=8.6'}
|
engines: {node: '>=8.6'}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/playwright-core/1.22.2:
|
/playwright-core/1.23.1:
|
||||||
resolution: {integrity: sha512-w/hc/Ld0RM4pmsNeE6aL/fPNWw8BWit2tg+TfqJ3+p59c6s3B6C8mXvXrIPmfQEobkcFDc+4KirNzOQ+uBSP1Q==}
|
resolution: {integrity: sha512-9CXsE0gawph4KXl6oUaa0ehHRySZjHvly4TybcBXDvzK3N3o6L/eZ8Q6iVWUiMn0LLS5bRFxo1qEtOETlYJxjw==}
|
||||||
engines: {node: '>=14'}
|
engines: {node: '>=14'}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
dev: true
|
dev: true
|
||||||
|
|
@ -2081,8 +2090,8 @@ packages:
|
||||||
engines: {node: '>= 0.4'}
|
engines: {node: '>= 0.4'}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/svelte-check/2.7.2_sass@1.53.0+svelte@3.48.0:
|
/svelte-check/2.8.0_sass@1.53.0+svelte@3.48.0:
|
||||||
resolution: {integrity: sha512-TuVX4YtXHbRM8sVuK5Jk+mKWdm3f0d6hvAC6qCTp8yUszGZewpEBCo2V5fRWZCiz+0J4OCiDHOS+DFMxv39rJA==}
|
resolution: {integrity: sha512-HRL66BxffMAZusqe5I5k26mRWQ+BobGd9Rxm3onh7ZVu0nTk8YTKJ9vu3LVPjUGLU9IX7zS+jmwPVhJYdXJ8vg==}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
svelte: ^3.24.0
|
svelte: ^3.24.0
|
||||||
|
|
|
||||||
|
|
@ -1,80 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
export let labelText: string;
|
|
||||||
export let showLabel: boolean;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<label htmlFor={`${guest.id}`} className="checkbox">
|
|
||||||
<span class="checkbox__input">
|
|
||||||
<input
|
|
||||||
id={`${guest.id}`}
|
|
||||||
name={`${guest.id}`}
|
|
||||||
checked={inputs[`${guest.id}`].plusOne}
|
|
||||||
onChange={onChangePlusOne}
|
|
||||||
type="checkbox"
|
|
||||||
/>
|
|
||||||
<span class="checkbox__control">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
aria-hidden="true"
|
|
||||||
focusable="false"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="3"
|
|
||||||
d="M1.73 12.91l6.37 6.37L22.79 4.59"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span class="checkbox__label">Plus one? </span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.checkbox {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: min-content auto;
|
|
||||||
align-items: center;
|
|
||||||
align-content: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
font-size: 2rem;
|
|
||||||
|
|
||||||
.checkbox__input {
|
|
||||||
display: grid;
|
|
||||||
grid-template-areas: 'checkbox';
|
|
||||||
|
|
||||||
> * {
|
|
||||||
grid-area: checkbox;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox__input input:checked + .checkbox__control svg {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox__input input:focus + .checkbox__control {
|
|
||||||
box-shadow: var(--level-2-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox__control {
|
|
||||||
display: inline-grid;
|
|
||||||
width: 1em;
|
|
||||||
height: 1em;
|
|
||||||
border-radius: 0.1em;
|
|
||||||
border: 0.1em solid var(--lightViolet);
|
|
||||||
|
|
||||||
svg {
|
|
||||||
transition: transform 0.1s ease-in 25ms;
|
|
||||||
transform: scale(0);
|
|
||||||
transform-origin: bottom left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='checkbox'] {
|
|
||||||
opacity: 0;
|
|
||||||
width: 1em;
|
|
||||||
height: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,112 +0,0 @@
|
||||||
<script>
|
|
||||||
/**
|
|
||||||
* @event {boolean} check
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Specify the value of the checkbox
|
|
||||||
* @type {any}
|
|
||||||
*/
|
|
||||||
export let value = '';
|
|
||||||
|
|
||||||
/** Specify whether the checkbox is checked */
|
|
||||||
export let checked = false;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Specify the bound group
|
|
||||||
* @type {any[]}
|
|
||||||
*/
|
|
||||||
export let group = undefined;
|
|
||||||
|
|
||||||
/** Specify whether the checkbox is indeterminate */
|
|
||||||
export let indeterminate = false;
|
|
||||||
|
|
||||||
/** Set to `true` to display the skeleton state */
|
|
||||||
export let skeleton = false;
|
|
||||||
|
|
||||||
/** Set to `true` to mark the field as required */
|
|
||||||
export let required = false;
|
|
||||||
|
|
||||||
/** Set to `true` for the checkbox to be read-only */
|
|
||||||
export let readonly = false;
|
|
||||||
|
|
||||||
/** Set to `true` to disable the checkbox */
|
|
||||||
export let disabled = false;
|
|
||||||
|
|
||||||
/** Specify the label text */
|
|
||||||
export let labelText = '';
|
|
||||||
|
|
||||||
/** Set to `true` to visually hide the label text */
|
|
||||||
export let hideLabel = false;
|
|
||||||
|
|
||||||
/** Set a name for the input element */
|
|
||||||
export let name = '';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Specify the title attribute for the label element
|
|
||||||
* @type {string}
|
|
||||||
*/
|
|
||||||
export let title = undefined;
|
|
||||||
|
|
||||||
/** Set an id for the input label */
|
|
||||||
export let id = 'ccs-' + Math.random().toString(36);
|
|
||||||
|
|
||||||
/** Obtain a reference to the input HTML element */
|
|
||||||
export let ref = null;
|
|
||||||
|
|
||||||
import { createEventDispatcher } from 'svelte';
|
|
||||||
import CheckboxSkeleton from './CheckboxSkeleton.svelte';
|
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
|
|
||||||
$: useGroup = Array.isArray(group);
|
|
||||||
$: checked = useGroup ? group.includes(value) : checked;
|
|
||||||
$: dispatch('check', checked);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
|
||||||
{#if skeleton}
|
|
||||||
<CheckboxSkeleton {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave />
|
|
||||||
{:else}
|
|
||||||
<div
|
|
||||||
class:bx--form-item={true}
|
|
||||||
class:bx--checkbox-wrapper={true}
|
|
||||||
{...$$restProps}
|
|
||||||
on:click
|
|
||||||
on:mouseover
|
|
||||||
on:mouseenter
|
|
||||||
on:mouseleave
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
bind:this={ref}
|
|
||||||
type="checkbox"
|
|
||||||
{value}
|
|
||||||
{checked}
|
|
||||||
{disabled}
|
|
||||||
{id}
|
|
||||||
{indeterminate}
|
|
||||||
{name}
|
|
||||||
{required}
|
|
||||||
{readonly}
|
|
||||||
class:bx--checkbox={true}
|
|
||||||
on:change={() => {
|
|
||||||
if (useGroup) {
|
|
||||||
group = group.includes(value)
|
|
||||||
? group.filter((_value) => _value !== value)
|
|
||||||
: [...group, value];
|
|
||||||
} else {
|
|
||||||
checked = !checked;
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
on:change
|
|
||||||
on:blur
|
|
||||||
/>
|
|
||||||
<label for={id} {title} class:bx--checkbox-label={true}>
|
|
||||||
<span class:bx--checkbox-label-text={true} class:bx--visually-hidden={hideLabel}>
|
|
||||||
<slot name="labelText">
|
|
||||||
{labelText}
|
|
||||||
</slot>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { fade, fly } from 'svelte/transition';
|
|
||||||
import type { GameType } from '$lib/types';
|
|
||||||
|
|
||||||
export let game: GameType;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<article class="game-container" transition:fade>
|
|
||||||
<a class="thumbnail" href={game.url}>
|
|
||||||
<img width="140" height="140" src={game.thumb_url} alt={`Image of ${game.name}`} />
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="game-details">
|
|
||||||
<div class="game">
|
|
||||||
<div class="content">
|
|
||||||
<h2>{game.name}</h2>
|
|
||||||
<p>{game.year_published}</p>
|
|
||||||
<p>{game.players} {game.max_players === 1 ? 'player' : 'players'}</p>
|
|
||||||
<p>{game.playtime} minutes</p>
|
|
||||||
<p>Minimum Age: {game.min_age}</p>
|
|
||||||
<div class="description">{@html game.description}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.thumbnail {
|
|
||||||
align-self: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.game-container:hover {
|
|
||||||
background-color: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.game-container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: min-content 1fr;
|
|
||||||
gap: var(--spacing-16);
|
|
||||||
padding: var(--spacing-16) var(--spacing-16);
|
|
||||||
transition: all 0.3s;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,131 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { fade } from 'svelte/transition';
|
|
||||||
import {
|
|
||||||
Listbox,
|
|
||||||
ListboxButton,
|
|
||||||
ListboxOptions,
|
|
||||||
ListboxOption
|
|
||||||
} from '@rgossiaux/svelte-headlessui';
|
|
||||||
|
|
||||||
const shows = [
|
|
||||||
{ id: 1, name: 'Cowboy Bebop', completed: false },
|
|
||||||
{ id: 2, name: 'Naruto', completed: false },
|
|
||||||
{ id: 3, name: 'One Piece', completed: false },
|
|
||||||
{ id: 4, name: 'Fullmetal Alchemist', completed: true },
|
|
||||||
{ id: 5, name: 'One Punch Man', completed: true },
|
|
||||||
{ id: 6, name: 'Death Note', completed: true }
|
|
||||||
];
|
|
||||||
|
|
||||||
let selected = shows[0];
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<h4>Listbox</h4>
|
|
||||||
|
|
||||||
<div class="listbox">
|
|
||||||
<Listbox value={selected} on:change={(event) => (selected = event.detail)} let:open>
|
|
||||||
<ListboxButton class="button">
|
|
||||||
<span>{selected.name}</span>
|
|
||||||
<svg
|
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
class="arrows"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentColor"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fill-rule="evenodd"
|
|
||||||
d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</ListboxButton>
|
|
||||||
{#if open}
|
|
||||||
<div transition:fade={{ duration: 200 }}>
|
|
||||||
<ListboxOptions class="options">
|
|
||||||
{#each shows as anime (anime.id)}
|
|
||||||
<ListboxOption
|
|
||||||
class="option"
|
|
||||||
value={anime}
|
|
||||||
disabled={anime.completed}
|
|
||||||
let:active
|
|
||||||
let:selected
|
|
||||||
>
|
|
||||||
<span class:active class:selected>{anime.name}</span>
|
|
||||||
</ListboxOption>
|
|
||||||
{/each}
|
|
||||||
</ListboxOptions>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</Listbox>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ... -->
|
|
||||||
<style>
|
|
||||||
.listbox {
|
|
||||||
max-width: 280px;
|
|
||||||
position: relative;
|
|
||||||
font-weight: 500;
|
|
||||||
color: hsl(220, 20%, 98%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.listbox :global(.button) {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 1rem;
|
|
||||||
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
color: inherit;
|
|
||||||
|
|
||||||
background-color: hsl(220, 20%, 2%);
|
|
||||||
border: none;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.listbox :global(.arrows) {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.listbox :global(.options) {
|
|
||||||
position: absolute;
|
|
||||||
top: 44px;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
padding: 1rem;
|
|
||||||
background-color: hsl(220, 20%, 4%);
|
|
||||||
border-radius: 10px;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.listbox :global(.option) {
|
|
||||||
padding: 0.8rem 0.4rem;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.listbox :global(.option[aria-disabled='true']) {
|
|
||||||
color: hsl(220, 20%, 30%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.listbox :global(.active) {
|
|
||||||
color: hsl(220, 80%, 70%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.listbox :global(.active)::before {
|
|
||||||
content: '👉️ ';
|
|
||||||
}
|
|
||||||
|
|
||||||
.listbox :global(.selected) {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.listbox :global(.selected)::before {
|
|
||||||
content: '⭐️ ';
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,147 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { fade } from 'svelte/transition';
|
|
||||||
import { browser } from '$app/env';
|
|
||||||
import {
|
|
||||||
Listbox,
|
|
||||||
ListboxButton,
|
|
||||||
ListboxOption,
|
|
||||||
ListboxOptions
|
|
||||||
} from '@rgossiaux/svelte-headlessui';
|
|
||||||
|
|
||||||
const themes = {
|
|
||||||
'🌛 Night': { name: '🌛 Night' },
|
|
||||||
'☀️ Daylight': { name: '☀️ Daylight' },
|
|
||||||
'😎 Synthwave': { name: '😎 Synthwave' }
|
|
||||||
};
|
|
||||||
|
|
||||||
let selectedTheme = getTheme() ?? themes['🌛 Night'];
|
|
||||||
|
|
||||||
function getTheme() {
|
|
||||||
if (!browser) return;
|
|
||||||
|
|
||||||
const htmlElement = document.documentElement;
|
|
||||||
const userTheme = localStorage.theme;
|
|
||||||
const prefersDarkMode = window.matchMedia('prefers-color-scheme: dark').matches;
|
|
||||||
const prefersLightMode = window.matchMedia('prefers-color-scheme: light').matches;
|
|
||||||
|
|
||||||
// check if the user set a theme
|
|
||||||
if (userTheme) {
|
|
||||||
htmlElement.dataset.theme = userTheme;
|
|
||||||
return themes[userTheme];
|
|
||||||
}
|
|
||||||
|
|
||||||
// otherwise check for user preference
|
|
||||||
if (!userTheme && prefersDarkMode) {
|
|
||||||
htmlElement.dataset.theme = '🌛 Night';
|
|
||||||
localStorage.theme = '🌛 Night';
|
|
||||||
}
|
|
||||||
if (!userTheme && prefersLightMode) {
|
|
||||||
htmlElement.dataset.theme = '☀️ Daylight';
|
|
||||||
localStorage.theme = '☀️ Daylight';
|
|
||||||
}
|
|
||||||
|
|
||||||
// if nothing is set default to dark mode
|
|
||||||
if (!userTheme && !prefersDarkMode && !prefersLightMode) {
|
|
||||||
htmlElement.dataset.theme = '🌛 Night';
|
|
||||||
localStorage.theme = '🌛 Night';
|
|
||||||
}
|
|
||||||
|
|
||||||
return themes[userTheme];
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleChange(event: CustomEvent) {
|
|
||||||
selectedTheme = themes[event.detail.name];
|
|
||||||
|
|
||||||
const htmlElement = document.documentElement;
|
|
||||||
htmlElement.dataset.theme = selectedTheme.name;
|
|
||||||
localStorage.theme = selectedTheme.name;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="theme">
|
|
||||||
<span>Theme</span>
|
|
||||||
|
|
||||||
<div class="listbox">
|
|
||||||
<Listbox value={selectedTheme} on:change={handleChange} let:open>
|
|
||||||
<ListboxButton class="button">
|
|
||||||
<span>{selectedTheme.name}</span>
|
|
||||||
|
|
||||||
<span>
|
|
||||||
<svg
|
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
class="arrows"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentColor"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fill-rule="evenodd"
|
|
||||||
d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</ListboxButton>
|
|
||||||
|
|
||||||
{#if open}
|
|
||||||
<div transition:fade={{ duration: 100 }}>
|
|
||||||
<ListboxOptions class="options" static>
|
|
||||||
{#each Object.entries(themes) as [key, theme] (key)}
|
|
||||||
<ListboxOption value={theme} let:active let:selected>
|
|
||||||
<span class="option" class:active class:selected>
|
|
||||||
{theme.name}
|
|
||||||
</span>
|
|
||||||
</ListboxOption>
|
|
||||||
{/each}
|
|
||||||
</ListboxOptions>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</Listbox>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.listbox {
|
|
||||||
--width: 184px;
|
|
||||||
}
|
|
||||||
.listbox :global(.button) {
|
|
||||||
width: var(--width);
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: var(--spacing-16) var(--spacing-24);
|
|
||||||
font-weight: 700;
|
|
||||||
background-color: var(--clr-primary);
|
|
||||||
color: var(--clr-theme-txt);
|
|
||||||
border-radius: var(--rounded-20);
|
|
||||||
box-shadow: var(--shadow-sm);
|
|
||||||
}
|
|
||||||
.listbox :global(.arrows) {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.listbox :global(.options) {
|
|
||||||
width: var(--width);
|
|
||||||
position: absolute;
|
|
||||||
margin-top: 0.4rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--clr-theme-txt);
|
|
||||||
background-color: var(--clr-primary);
|
|
||||||
border-radius: var(--rounded-20);
|
|
||||||
box-shadow: var(--shadow-sm);
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
.listbox :global(.option) {
|
|
||||||
display: block;
|
|
||||||
padding: var(--spacing-16) var(--spacing-24);
|
|
||||||
border-radius: var(--rounded-20);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.listbox :global(.active) {
|
|
||||||
background-color: var(--clr-theme-active);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
<script>
|
|
||||||
import { Switch } from '@rgossiaux/svelte-headlessui';
|
|
||||||
let enabled = false;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Switch
|
|
||||||
checked={enabled}
|
|
||||||
on:change={(e) => (enabled = e.detail)}
|
|
||||||
class={enabled ? 'switch switch-enabled' : 'switch switch-disabled'}
|
|
||||||
>
|
|
||||||
<span class="sr-only">Dark Mode</span>
|
|
||||||
<span class="toggle" class:toggle-on={enabled} class:toggle-off={!enabled} />
|
|
||||||
</Switch>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
:global(.switch) {
|
|
||||||
position: relative;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 1rem;
|
|
||||||
border: 0;
|
|
||||||
height: 1.25rem;
|
|
||||||
width: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.switch-enabled) {
|
|
||||||
/* Blue */
|
|
||||||
background-color: hsla(0, 0%, 0%, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.switch-disabled) {
|
|
||||||
/* Gray */
|
|
||||||
background-color: hsla(0, 0%, 100%, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sr-only {
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
padding: 0;
|
|
||||||
margin: -1px;
|
|
||||||
overflow: hidden;
|
|
||||||
clip: rect(0, 0, 0, 0);
|
|
||||||
white-space: nowrap;
|
|
||||||
border-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1rem;
|
|
||||||
height: 1rem;
|
|
||||||
background-color: hsla(0, 0%, 100%, 1);
|
|
||||||
border-radius: 1rem;
|
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
transition-duration: 150ms;
|
|
||||||
transition-property: transform;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-on {
|
|
||||||
transform: translateX(1.4rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-off {
|
|
||||||
transform: translateX(0.1rem);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in a new issue