Updating dependencies and remove components as they are in lib.

This commit is contained in:
Bradley Shellnut 2022-07-04 22:40:10 -07:00
parent 85459d531e
commit b33306ab89
8 changed files with 79 additions and 654 deletions

View file

@ -12,24 +12,24 @@
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
},
"devDependencies": {
"@playwright/test": "^1.22.2",
"@playwright/test": "^1.23.1",
"@rgossiaux/svelte-headlessui": "1.0.0-beta.12",
"@sveltejs/adapter-auto": "1.0.0-next.51",
"@sveltejs/kit": "1.0.0-next.352",
"@types/cookie": "^0.5.1",
"@types/node": "^17.0.45",
"@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.29.0",
"@typescript-eslint/eslint-plugin": "^5.30.5",
"@typescript-eslint/parser": "^5.30.5",
"carbon-components-svelte": "^0.63.8",
"carbon-icons-svelte": "^11.1.0",
"eslint": "^8.18.0",
"eslint": "^8.19.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte3": "^3.4.1",
"prettier": "^2.7.1",
"prettier-plugin-svelte": "^2.7.0",
"sass": "^1.53.0",
"svelte": "^3.48.0",
"svelte-check": "^2.7.2",
"svelte-check": "^2.8.0",
"svelte-preprocess": "^4.10.7",
"tslib": "^2.4.0",
"typescript": "^4.7.4"

View file

@ -3,25 +3,25 @@ lockfileVersion: 5.4
specifiers:
'@fontsource/fira-mono': ^4.5.8
'@lukeed/uuid': ^2.0.0
'@playwright/test': ^1.22.2
'@playwright/test': ^1.23.1
'@rgossiaux/svelte-headlessui': 1.0.0-beta.12
'@sveltejs/adapter-auto': 1.0.0-next.51
'@sveltejs/kit': 1.0.0-next.352
'@types/cookie': ^0.5.1
'@types/node': ^17.0.45
'@typescript-eslint/eslint-plugin': ^5.29.0
'@typescript-eslint/parser': ^5.29.0
'@typescript-eslint/eslint-plugin': ^5.30.5
'@typescript-eslint/parser': ^5.30.5
carbon-components-svelte: ^0.63.8
carbon-icons-svelte: ^11.1.0
cookie: ^0.5.0
eslint: ^8.18.0
eslint: ^8.19.0
eslint-config-prettier: ^8.5.0
eslint-plugin-svelte3: ^3.4.1
prettier: ^2.7.1
prettier-plugin-svelte: ^2.7.0
sass: ^1.53.0
svelte: ^3.48.0
svelte-check: ^2.7.2
svelte-check: ^2.8.0
svelte-preprocess: ^4.10.7
tslib: ^2.4.0
typescript: ^4.7.4
@ -34,24 +34,24 @@ dependencies:
zod: 3.17.3
devDependencies:
'@playwright/test': 1.22.2
'@playwright/test': 1.23.1
'@rgossiaux/svelte-headlessui': 1.0.0-beta.12_svelte@3.48.0
'@sveltejs/adapter-auto': 1.0.0-next.51
'@sveltejs/kit': 1.0.0-next.352_sass@1.53.0+svelte@3.48.0
'@types/cookie': 0.5.1
'@types/node': 17.0.45
'@typescript-eslint/eslint-plugin': 5.29.0_qqmbkyiaixvppdwswpytuf2hgm
'@typescript-eslint/parser': 5.29.0_b5e7v2qnwxfo6hmiq56u52mz3e
'@typescript-eslint/eslint-plugin': 5.30.5_6zdoc3rn4mpiddqwhppni2mnnm
'@typescript-eslint/parser': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
carbon-components-svelte: 0.63.8
carbon-icons-svelte: 11.1.0
eslint: 8.18.0
eslint-config-prettier: 8.5.0_eslint@8.18.0
eslint-plugin-svelte3: 3.4.1_wy4erphnvhealet26qderqv6bu
eslint: 8.19.0
eslint-config-prettier: 8.5.0_eslint@8.19.0
eslint-plugin-svelte3: 3.4.1_m4jpobot6gi3xtcba7bv5cflma
prettier: 2.7.1
prettier-plugin-svelte: 2.7.0_nakrehnrzdf7fdea5k3a4dfy4m
sass: 1.53.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
tslib: 2.4.0
typescript: 4.7.4
@ -165,13 +165,13 @@ packages:
fastq: 1.13.0
dev: true
/@playwright/test/1.22.2:
resolution: {integrity: sha512-cCl96BEBGPtptFz7C2FOSN3PrTnJ3rPpENe+gYCMx4GNNDlN4tmo2D89y13feGKTMMAIVrXfSQ/UmaQKLy1XLA==}
/@playwright/test/1.23.1:
resolution: {integrity: sha512-dKplLPSYPZgnsBk1xxOophhpx3ZVg8DveoNJgLPe096lDCfmaIIreLsYF+4hqzy3PG61IP+aEnG5VAOjC3bhbA==}
engines: {node: '>=14'}
hasBin: true
dependencies:
'@types/node': 17.0.45
playwright-core: 1.22.2
playwright-core: 1.23.1
dev: true
/@rgossiaux/svelte-headlessui/1.0.0-beta.12_svelte@3.48.0:
@ -292,8 +292,8 @@ packages:
'@types/node': 17.0.45
dev: true
/@typescript-eslint/eslint-plugin/5.29.0_qqmbkyiaixvppdwswpytuf2hgm:
resolution: {integrity: sha512-kgTsISt9pM53yRFQmLZ4npj99yGl3x3Pl7z4eA66OuTzAGC4bQB5H5fuLwPnqTKU3yyrrg4MIhjF17UYnL4c0w==}
/@typescript-eslint/eslint-plugin/5.30.5_6zdoc3rn4mpiddqwhppni2mnnm:
resolution: {integrity: sha512-lftkqRoBvc28VFXEoRgyZuztyVUQ04JvUnATSPtIRFAccbXTWL6DEtXGYMcbg998kXw1NLUJm7rTQ9eUt+q6Ig==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
'@typescript-eslint/parser': ^5.0.0
@ -303,12 +303,12 @@ packages:
typescript:
optional: true
dependencies:
'@typescript-eslint/parser': 5.29.0_b5e7v2qnwxfo6hmiq56u52mz3e
'@typescript-eslint/scope-manager': 5.29.0
'@typescript-eslint/type-utils': 5.29.0_b5e7v2qnwxfo6hmiq56u52mz3e
'@typescript-eslint/utils': 5.29.0_b5e7v2qnwxfo6hmiq56u52mz3e
'@typescript-eslint/parser': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
'@typescript-eslint/scope-manager': 5.30.5
'@typescript-eslint/type-utils': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
'@typescript-eslint/utils': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
debug: 4.3.4
eslint: 8.18.0
eslint: 8.19.0
functional-red-black-tree: 1.0.1
ignore: 5.2.0
regexpp: 3.2.0
@ -319,8 +319,8 @@ packages:
- supports-color
dev: true
/@typescript-eslint/parser/5.29.0_b5e7v2qnwxfo6hmiq56u52mz3e:
resolution: {integrity: sha512-ruKWTv+x0OOxbzIw9nW5oWlUopvP/IQDjB5ZqmTglLIoDTctLlAJpAQFpNPJP/ZI7hTT9sARBosEfaKbcFuECw==}
/@typescript-eslint/parser/5.30.5_4x5o4skxv6sl53vpwefgt23khm:
resolution: {integrity: sha512-zj251pcPXI8GO9NDKWWmygP6+UjwWmrdf9qMW/L/uQJBM/0XbU2inxe5io/234y/RCvwpKEYjZ6c1YrXERkK4Q==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@ -329,26 +329,26 @@ packages:
typescript:
optional: true
dependencies:
'@typescript-eslint/scope-manager': 5.29.0
'@typescript-eslint/types': 5.29.0
'@typescript-eslint/typescript-estree': 5.29.0_typescript@4.7.4
'@typescript-eslint/scope-manager': 5.30.5
'@typescript-eslint/types': 5.30.5
'@typescript-eslint/typescript-estree': 5.30.5_typescript@4.7.4
debug: 4.3.4
eslint: 8.18.0
eslint: 8.19.0
typescript: 4.7.4
transitivePeerDependencies:
- supports-color
dev: true
/@typescript-eslint/scope-manager/5.29.0:
resolution: {integrity: sha512-etbXUT0FygFi2ihcxDZjz21LtC+Eps9V2xVx09zFoN44RRHPrkMflidGMI+2dUs821zR1tDS6Oc9IXxIjOUZwA==}
/@typescript-eslint/scope-manager/5.30.5:
resolution: {integrity: sha512-NJ6F+YHHFT/30isRe2UTmIGGAiXKckCyMnIV58cE3JkHmaD6e5zyEYm5hBDv0Wbin+IC0T1FWJpD3YqHUG/Ydg==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies:
'@typescript-eslint/types': 5.29.0
'@typescript-eslint/visitor-keys': 5.29.0
'@typescript-eslint/types': 5.30.5
'@typescript-eslint/visitor-keys': 5.30.5
dev: true
/@typescript-eslint/type-utils/5.29.0_b5e7v2qnwxfo6hmiq56u52mz3e:
resolution: {integrity: sha512-JK6bAaaiJozbox3K220VRfCzLa9n0ib/J+FHIwnaV3Enw/TO267qe0pM1b1QrrEuy6xun374XEAsRlA86JJnyg==}
/@typescript-eslint/type-utils/5.30.5_4x5o4skxv6sl53vpwefgt23khm:
resolution: {integrity: sha512-k9+ejlv1GgwN1nN7XjVtyCgE0BTzhzT1YsQF0rv4Vfj2U9xnslBgMYYvcEYAFVdvhuEscELJsB7lDkN7WusErw==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
eslint: '*'
@ -357,22 +357,22 @@ packages:
typescript:
optional: true
dependencies:
'@typescript-eslint/utils': 5.29.0_b5e7v2qnwxfo6hmiq56u52mz3e
'@typescript-eslint/utils': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
debug: 4.3.4
eslint: 8.18.0
eslint: 8.19.0
tsutils: 3.21.0_typescript@4.7.4
typescript: 4.7.4
transitivePeerDependencies:
- supports-color
dev: true
/@typescript-eslint/types/5.29.0:
resolution: {integrity: sha512-X99VbqvAXOMdVyfFmksMy3u8p8yoRGITgU1joBJPzeYa0rhdf5ok9S56/itRoUSh99fiDoMtarSIJXo7H/SnOg==}
/@typescript-eslint/types/5.30.5:
resolution: {integrity: sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dev: true
/@typescript-eslint/typescript-estree/5.29.0_typescript@4.7.4:
resolution: {integrity: sha512-mQvSUJ/JjGBdvo+1LwC+GY2XmSYjK1nAaVw2emp/E61wEVYEyibRHCqm1I1vEKbXCpUKuW4G7u9ZCaZhJbLoNQ==}
/@typescript-eslint/typescript-estree/5.30.5_typescript@4.7.4:
resolution: {integrity: sha512-qGTc7QZC801kbYjAr4AgdOfnokpwStqyhSbiQvqGBLixniAKyH+ib2qXIVo4P9NgGzwyfD9I0nlJN7D91E1VpQ==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
typescript: '*'
@ -380,8 +380,8 @@ packages:
typescript:
optional: true
dependencies:
'@typescript-eslint/types': 5.29.0
'@typescript-eslint/visitor-keys': 5.29.0
'@typescript-eslint/types': 5.30.5
'@typescript-eslint/visitor-keys': 5.30.5
debug: 4.3.4
globby: 11.1.0
is-glob: 4.0.3
@ -392,29 +392,29 @@ packages:
- supports-color
dev: true
/@typescript-eslint/utils/5.29.0_b5e7v2qnwxfo6hmiq56u52mz3e:
resolution: {integrity: sha512-3Eos6uP1nyLOBayc/VUdKZikV90HahXE5Dx9L5YlSd/7ylQPXhLk1BYb29SDgnBnTp+jmSZUU0QxUiyHgW4p7A==}
/@typescript-eslint/utils/5.30.5_4x5o4skxv6sl53vpwefgt23khm:
resolution: {integrity: sha512-o4SSUH9IkuA7AYIfAvatldovurqTAHrfzPApOZvdUq01hHojZojCFXx06D/aFpKCgWbMPRdJBWAC3sWp3itwTA==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
dependencies:
'@types/json-schema': 7.0.11
'@typescript-eslint/scope-manager': 5.29.0
'@typescript-eslint/types': 5.29.0
'@typescript-eslint/typescript-estree': 5.29.0_typescript@4.7.4
eslint: 8.18.0
'@typescript-eslint/scope-manager': 5.30.5
'@typescript-eslint/types': 5.30.5
'@typescript-eslint/typescript-estree': 5.30.5_typescript@4.7.4
eslint: 8.19.0
eslint-scope: 5.1.1
eslint-utils: 3.0.0_eslint@8.18.0
eslint-utils: 3.0.0_eslint@8.19.0
transitivePeerDependencies:
- supports-color
- typescript
dev: true
/@typescript-eslint/visitor-keys/5.29.0:
resolution: {integrity: sha512-Hpb/mCWsjILvikMQoZIE3voc9wtQcS0A9FUw3h8bhr9UxBdtI/tw1ZDZUOXHXLOVMedKCH5NxyzATwnU78bWCQ==}
/@typescript-eslint/visitor-keys/5.30.5:
resolution: {integrity: sha512-D+xtGo9HUMELzWIUqcQc0p2PO4NyvTrgIOK/VnSH083+8sq0tiLozNRKuLarwHYGRuA6TVBQSuuLwJUDWd3aaA==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies:
'@typescript-eslint/types': 5.29.0
'@typescript-eslint/types': 5.30.5
eslint-visitor-keys: 3.3.0
dev: true
@ -660,6 +660,11 @@ packages:
/debug/3.2.7:
resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
peerDependencies:
supports-color: '*'
peerDependenciesMeta:
supports-color:
optional: true
dependencies:
ms: 2.1.3
dev: true
@ -945,23 +950,23 @@ packages:
engines: {node: '>=10'}
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==}
hasBin: true
peerDependencies:
eslint: '>=7.0.0'
dependencies:
eslint: 8.18.0
eslint: 8.19.0
dev: true
/eslint-plugin-svelte3/3.4.1_wy4erphnvhealet26qderqv6bu:
/eslint-plugin-svelte3/3.4.1_m4jpobot6gi3xtcba7bv5cflma:
resolution: {integrity: sha512-7p59WG8qV8L6wLdl4d/c3mdjkgVglQCdv5XOTk/iNPBKXuuV+Q0eFP5Wa6iJd/G2M1qR3BkLPEzaANOqKAZczw==}
engines: {node: '>=10'}
peerDependencies:
eslint: '>=6.0.0'
svelte: ^3.2.0
dependencies:
eslint: 8.18.0
eslint: 8.19.0
svelte: 3.48.0
dev: true
@ -981,13 +986,13 @@ packages:
estraverse: 5.3.0
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==}
engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
peerDependencies:
eslint: '>=5'
dependencies:
eslint: 8.18.0
eslint: 8.19.0
eslint-visitor-keys: 2.1.0
dev: true
@ -1001,8 +1006,8 @@ packages:
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dev: true
/eslint/8.18.0:
resolution: {integrity: sha512-As1EfFMVk7Xc6/CvhssHUjsAQSkpfXvUGMFC3ce8JDe6WvqCgRrLOBQbVpsBFr1X1V+RACOadnzVvcUS5ni2bA==}
/eslint/8.19.0:
resolution: {integrity: sha512-SXOPj3x9VKvPe81TjjUJCYlV4oJjQw68Uek+AM0X4p+33dj2HY5bpTZOgnQHcG2eAm1mtCU9uNMnJi7exU/kYw==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
hasBin: true
dependencies:
@ -1015,7 +1020,7 @@ packages:
doctrine: 3.0.0
escape-string-regexp: 4.0.0
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
espree: 9.3.2
esquery: 1.4.0
@ -1572,6 +1577,8 @@ packages:
debug: 3.2.7
iconv-lite: 0.4.24
sax: 1.2.4
transitivePeerDependencies:
- supports-color
dev: true
/node-fetch/2.6.7:
@ -1606,6 +1613,8 @@ packages:
rimraf: 2.7.1
semver: 5.7.1
tar: 4.4.19
transitivePeerDependencies:
- supports-color
dev: true
/nopt/4.0.3:
@ -1745,8 +1754,8 @@ packages:
engines: {node: '>=8.6'}
dev: true
/playwright-core/1.22.2:
resolution: {integrity: sha512-w/hc/Ld0RM4pmsNeE6aL/fPNWw8BWit2tg+TfqJ3+p59c6s3B6C8mXvXrIPmfQEobkcFDc+4KirNzOQ+uBSP1Q==}
/playwright-core/1.23.1:
resolution: {integrity: sha512-9CXsE0gawph4KXl6oUaa0ehHRySZjHvly4TybcBXDvzK3N3o6L/eZ8Q6iVWUiMn0LLS5bRFxo1qEtOETlYJxjw==}
engines: {node: '>=14'}
hasBin: true
dev: true
@ -2081,8 +2090,8 @@ packages:
engines: {node: '>= 0.4'}
dev: true
/svelte-check/2.7.2_sass@1.53.0+svelte@3.48.0:
resolution: {integrity: sha512-TuVX4YtXHbRM8sVuK5Jk+mKWdm3f0d6hvAC6qCTp8yUszGZewpEBCo2V5fRWZCiz+0J4OCiDHOS+DFMxv39rJA==}
/svelte-check/2.8.0_sass@1.53.0+svelte@3.48.0:
resolution: {integrity: sha512-HRL66BxffMAZusqe5I5k26mRWQ+BobGd9Rxm3onh7ZVu0nTk8YTKJ9vu3LVPjUGLU9IX7zS+jmwPVhJYdXJ8vg==}
hasBin: true
peerDependencies:
svelte: ^3.24.0

View file

@ -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>

View file

@ -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}

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>