mirror of
https://github.com/BradNut/svelte-library
synced 2025-09-08 17:40:21 +00:00
Init of Svelte Kit and Toggle button.
This commit is contained in:
parent
3ae68a9ac8
commit
51dc0785db
15 changed files with 2960 additions and 0 deletions
15
.eslintrc.cjs
Normal file
15
.eslintrc.cjs
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
extends: ['eslint:recommended', 'prettier'],
|
||||
plugins: ['svelte3'],
|
||||
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
|
||||
parserOptions: {
|
||||
sourceType: 'module',
|
||||
ecmaVersion: 2019
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
es2017: true,
|
||||
node: true
|
||||
}
|
||||
};
|
||||
1
.npmrc
Normal file
1
.npmrc
Normal file
|
|
@ -0,0 +1 @@
|
|||
engine-strict=true
|
||||
4
.prettierignore
Normal file
4
.prettierignore
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.svelte-kit/**
|
||||
static/**
|
||||
build/**
|
||||
node_modules/**
|
||||
6
.prettierrc
Normal file
6
.prettierrc
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"useTabs": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 100
|
||||
}
|
||||
10
jsconfig.json
Normal file
10
jsconfig.json
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"$lib": ["src/lib"],
|
||||
"$lib/*": ["src/lib/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
|
||||
}
|
||||
2799
package-lock.json
generated
Normal file
2799
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
21
package.json
Normal file
21
package.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"name": "~TODO~",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "svelte-kit dev",
|
||||
"build": "svelte-kit build",
|
||||
"preview": "svelte-kit preview",
|
||||
"lint": "prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
|
||||
"format": "prettier --write --plugin-search-dir=. ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/kit": "next",
|
||||
"eslint": "^7.22.0",
|
||||
"eslint-config-prettier": "^8.1.0",
|
||||
"eslint-plugin-svelte3": "^3.2.0",
|
||||
"prettier": "~2.2.1",
|
||||
"prettier-plugin-svelte": "^2.2.0",
|
||||
"svelte": "^3.34.0"
|
||||
},
|
||||
"type": "module"
|
||||
}
|
||||
12
src/app.html
Normal file
12
src/app.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%svelte.head%
|
||||
</head>
|
||||
<body>
|
||||
<div id="svelte">%svelte.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
1
src/global.d.ts
vendored
Normal file
1
src/global.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="@sveltejs/kit" />
|
||||
55
src/lib/Toggle.svelte
Normal file
55
src/lib/Toggle.svelte
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<script>
|
||||
export let label = "";
|
||||
export let isToggled = false;
|
||||
export let style = "";
|
||||
</script>
|
||||
|
||||
<label {style}>
|
||||
<input type="checkbox" bind:checked={isToggled} />
|
||||
<div class="toggle" />
|
||||
{label}
|
||||
</label>
|
||||
|
||||
<style>
|
||||
label {
|
||||
--width: 40px;
|
||||
--height: calc(var(--width) / 2);
|
||||
--radius: calc(var(--height) / 2);
|
||||
display: flex;
|
||||
}
|
||||
.toggle {
|
||||
position: relative;
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
border-radius: var(--radius);
|
||||
border: solid 1px #333;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-right: 5px;
|
||||
background-color: var(--toggleBackgroundColor, white);
|
||||
}
|
||||
.toggle::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--height);
|
||||
height: var(--height);
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--toggleButtonColor, aliceblue);
|
||||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input:checked + .toggle {
|
||||
background-color: var(--toggleCheckedBackgroundColor, green);
|
||||
}
|
||||
|
||||
input:checked + .toggle::after {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
|
||||
</style>
|
||||
9
src/lib/style.css
Normal file
9
src/lib/style.css
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
**::before,
|
||||
**::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
5
src/routes/__layout.svelte
Normal file
5
src/routes/__layout.svelte
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<script>
|
||||
import '$lib/style.css'
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
13
src/routes/index.svelte
Normal file
13
src/routes/index.svelte
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<script>
|
||||
import Toggle from '$lib/Toggle.svelte'
|
||||
let isToggled = false
|
||||
</script>
|
||||
|
||||
<h1>Welcome to Level Up UI</h1>
|
||||
|
||||
<Toggle bind:isToggled label="Beta" />
|
||||
<Toggle bind:isToggled label="Beta" style="--toggleBackgroundColor: red;" />
|
||||
|
||||
{#if isToggled}
|
||||
<h1>I'm toggled</h1>
|
||||
{/if}
|
||||
BIN
static/favicon.png
Normal file
BIN
static/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
9
svelte.config.js
Normal file
9
svelte.config.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
kit: {
|
||||
// hydrate the <div id="svelte"> element in src/app.html
|
||||
target: '#svelte'
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
Loading…
Reference in a new issue