Skip to content

Commit f3c6237

Browse files
dvcoldvcol
committed
feat(button): adds initial setup & button component
1 parent a0f0ed1 commit f3c6237

25 files changed

+801
-49
lines changed

‎.github/workflows/deploy.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ jobs:
2222
runs-on: ubuntu-latest
2323

2424
environment:
25-
name: svelte-lib-template
26-
url: https://dvcol.github.io/svelte-lib-template/
25+
name: neo-svelte
26+
url: https://dvcol.github.io/neo-svelte/
2727

2828
steps:
2929
- name: ⛙ Checkout branch ${{ github.ref }}

‎.idea/inspectionProfiles/Project_Default.xml‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎README.md‎

Lines changed: 63 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,63 @@
1-
# svelte-lib-template
2-
A basic svelte pnpm library template
1+
# neo-svelte
2+
Neomorphic ui library for svelte 5
3+
4+
## TODO
5+
- buttons
6+
- toggle
7+
- skeleton
8+
- border loading
9+
- tags
10+
- badge
11+
- avatar
12+
- badge
13+
- button groups
14+
- card
15+
- border loading
16+
- skeleton
17+
- images
18+
- videos
19+
- carousel
20+
- navbar
21+
- switch
22+
- loading
23+
- border loading
24+
- skeleton
25+
- radio
26+
- checkbox
27+
- tooltip
28+
- popconfirm
29+
- popselect
30+
- Inputs
31+
- validation
32+
- loading
33+
- skeleton
34+
- Text Area
35+
- select
36+
- multiple
37+
- auto-complete
38+
- @ / # tags
39+
- numbers
40+
- animation ?
41+
- passwords
42+
- file picker
43+
- drag & drop ?
44+
- progress ?
45+
- slider
46+
- time/date
47+
48+
49+
- Progress/Loading
50+
- bar
51+
- circle
52+
- border
53+
- background
54+
- Alerts
55+
- notification
56+
- simple message
57+
- Modal/dialog
58+
- drawer/panel
59+
- collapsible
60+
- position
61+
- backdrop
62+
- click outside
63+
- scrollbar ?

‎demo/App.svelte‎

Lines changed: 64 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,69 @@
1-
<div class="column">Content Here</div>
1+
<script lang="ts">
2+
import '~/styles/reset.scss';
3+
import '~/styles/theme.scss';
4+
5+
import NeoButton from '~/buttons/NeoButton.svelte';
6+
import IconAccount from '~/icons/IconAccount.svelte';
7+
8+
const onClick = (...args: any) => {
9+
console.info(...args);
10+
};
11+
12+
let loading = $state(false);
13+
const onLoading = (...args: any) => {
14+
loading = !loading;
15+
setTimeout(() => {
16+
loading = !loading;
17+
}, 3000);
18+
onClick(...args);
19+
};
20+
</script>
21+
22+
<div class="container">
23+
<div class="column">
24+
<div class="row">
25+
<NeoButton onclick={onClick}>Hello</NeoButton>
26+
<NeoButton onclick={onClick}>Goodbye</NeoButton>
27+
<NeoButton disabled onclick={onClick}>Disabled</NeoButton>
28+
<NeoButton {loading} onclick={onLoading}>Loading</NeoButton>
29+
<NeoButton onclick={onClick}>
30+
{#snippet icon()}
31+
<IconAccount />
32+
{/snippet}
33+
Icon
34+
</NeoButton>
35+
<NeoButton reverse onclick={onClick}>
36+
{#snippet icon()}
37+
<IconAccount />
38+
{/snippet}
39+
Icon
40+
</NeoButton>
41+
<NeoButton rounded onclick={onClick}>Rounded</NeoButton>
42+
<NeoButton coalesce text {loading} onclick={onLoading}>Text</NeoButton>
43+
<NeoButton pulse flat {loading} onclick={onLoading}>Flat</NeoButton>
44+
</div>
45+
46+
<div class="row" style="gap: 5rem;">
47+
<NeoButton {loading} pulse rounded onclick={onLoading}>Pulse</NeoButton>
48+
<NeoButton coalesce rounded onclick={onClick}>Coalesce</NeoButton>
49+
</div>
50+
</div>
51+
</div>
252

353
<style lang="scss">
4-
.column {
5-
display: flex;
6-
flex: 1 1 auto;
7-
flex-direction: column;
8-
gap: 1rem;
9-
align-items: center;
10-
margin: auto;
54+
@use 'src/lib/styles/common/flex' as flex;
55+
56+
.container {
57+
@include flex.column;
58+
1159
padding: 1rem;
12-
border-radius: 0.5rem;
60+
}
61+
62+
.column {
63+
@include flex.column($center: true, $gap: var(--gap-lg));
64+
}
65+
66+
.row {
67+
@include flex.row;
1368
}
1469
</style>

‎index.html‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8" />
55
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<title>Svelte Simple Router</title>
7+
<title>Neo Svelte</title>
88
</head>
99
<body>
1010
<div id="app"></div>
@@ -13,9 +13,11 @@
1313
</html>
1414

1515
<style>
16-
html, body {
17-
color: rgb(235 235 235 / 64%);
18-
font-size: 1rem;
19-
background: #222729;
16+
#app {
17+
display: flex;
18+
align-items: center;
19+
justify-content: center;
20+
min-width: 100vw;
21+
min-height: 100dvh;
2022
}
2123
</style>

‎package.json‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,29 @@
11
{
2-
"name": "@dvcol/svelte-lib-template",
2+
"name": "@dvcol/neo-svelte",
33
"type": "module",
44
"version": "1.6.1",
55
"packageManager": "[email protected]",
6-
"description": "<description>",
7-
"homepage": "https://github.com/dvcol/svelte-lib-template",
8-
"bugs": "https://github.com/dvcol/svelte-lib-template/issues",
6+
"description": "Neomorphic ui library for svelte 5",
7+
"homepage": "https://github.com/dvcol/neo-svelte",
8+
"bugs": "https://github.com/dvcol/neo-svelte/issues",
99
"keywords": [
1010
"typescript",
1111
"library",
1212
"svelte",
1313
"svelte 5",
14-
"svelte-lib-template"
14+
"neo-svelte",
15+
"neomorphism",
16+
"glassmorphism",
17+
"components",
18+
"component-library",
19+
"ui",
20+
"ui-library"
1521
],
1622
"license": "MIT",
1723
"author": "dvcol",
1824
"repository": {
1925
"type": "git",
20-
"url": "https://github.com/dvcol/svelte-lib-template.git"
26+
"url": "https://github.com/dvcol/neo-svelte.git"
2127
},
2228
"engines": {
2329
"node": ">=20",
@@ -72,6 +78,8 @@
7278
"svelte": ">=5"
7379
},
7480
"dependencies": {
81+
"@dvcol/common-utils": "^1.18.1",
82+
"@dvcol/svelte-utils": "^1.1.0",
7583
"svelte": "^5.1.9",
7684
"vite": "^5.4.10"
7785
},

0 commit comments

Comments
 (0)