svelte-comp 1.0.6 β 1.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -15,17 +15,15 @@ npm install svelte-comp
|
|
|
15
15
|
|
|
16
16
|
## π§ Setup TailwindCSS
|
|
17
17
|
|
|
18
|
-
Install Tailwind and the Vite plugin:
|
|
19
|
-
|
|
20
18
|
```bash
|
|
21
19
|
npm install tailwindcss @tailwindcss/vite
|
|
22
20
|
```
|
|
23
21
|
|
|
24
|
-
|
|
22
|
+
`vite.config.ts`:
|
|
25
23
|
|
|
26
24
|
```ts
|
|
27
25
|
import { defineConfig } from "vite";
|
|
28
|
-
import svelte from "@
|
|
26
|
+
import { svelte } from "@sveltejs/vite-plugin-svelte";
|
|
29
27
|
import tailwindcss from "@tailwindcss/vite";
|
|
30
28
|
|
|
31
29
|
export default defineConfig({
|
|
@@ -36,7 +34,7 @@ export default defineConfig({
|
|
|
36
34
|
});
|
|
37
35
|
```
|
|
38
36
|
|
|
39
|
-
Add
|
|
37
|
+
Add to `src/app.css`:
|
|
40
38
|
|
|
41
39
|
```css
|
|
42
40
|
@import "tailwindcss";
|
|
@@ -47,18 +45,43 @@ Add global styles in `src/app.css` (or main stylesheet):
|
|
|
47
45
|
|
|
48
46
|
## π Components included
|
|
49
47
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
48
|
+
Accordion β’ Button β’ Card β’ Carousel β’ CheckBox β’ CodeView β’ ColorPicker
|
|
49
|
+
DatePicker β’ Dialog β’ Field β’ FilePicker β’ Form β’ Hamburger β’ Menu
|
|
50
|
+
PaginatedCard β’ Pagination β’ ProgressBar β’ Radio β’ Select β’ Slider
|
|
51
|
+
Splitter β’ Switch β’ Tabs β’ Table β’ ThemeToggle β’ TimePicker
|
|
52
|
+
Toast β’ Tooltip
|
|
54
53
|
|
|
55
54
|
Full component list in repository.
|
|
56
55
|
|
|
57
56
|
---
|
|
58
57
|
|
|
58
|
+
## π Quick example
|
|
59
|
+
|
|
60
|
+
Accordion usage:
|
|
61
|
+
|
|
62
|
+
```svelte
|
|
63
|
+
<script lang="ts">
|
|
64
|
+
import { Accordion } from "svelte-comp";
|
|
65
|
+
|
|
66
|
+
const items = [
|
|
67
|
+
{ title: "First", content: "This is the first item" },
|
|
68
|
+
{ title: "Second", content: "This is the second item" },
|
|
69
|
+
{ title: "Third", content: "This is the third item" }
|
|
70
|
+
];
|
|
71
|
+
|
|
72
|
+
const handleToggle = (index: number, open: boolean) => {
|
|
73
|
+
console.log(index, open);
|
|
74
|
+
};
|
|
75
|
+
</script>
|
|
76
|
+
|
|
77
|
+
<Accordion {items} multiple defaultOpen={[0]} sz="md" onToggle={handleToggle} />
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
59
82
|
## π License
|
|
60
83
|
|
|
61
|
-
MIT License
|
|
84
|
+
MIT License
|
|
62
85
|
|
|
63
86
|
---
|
|
64
87
|
|
package/package.json
CHANGED