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