grav-svelte 0.0.8 → 0.0.10
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 +80 -15
- package/dist/CRUD/CrudWrapper.svelte +1 -1
- package/dist/CRUD/PaginationCRUD.svelte +81 -85
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,34 +1,99 @@
|
|
|
1
1
|
# Grav Svelte
|
|
2
2
|
|
|
3
|
-
A collection of Svelte components for building
|
|
3
|
+
A collection of reusable Svelte components for building modern web applications.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
### Form Inputs
|
|
8
|
+
A comprehensive set of form input components with consistent styling and behavior:
|
|
9
|
+
- Text inputs with various types
|
|
10
|
+
- Date and time pickers
|
|
11
|
+
- Color picker
|
|
12
|
+
- Boolean toggle
|
|
13
|
+
- Cascading selects
|
|
14
|
+
- Image upload with preview
|
|
15
|
+
|
|
16
|
+
### Modals
|
|
17
|
+
Flexible modal components for various use cases:
|
|
18
|
+
- Confirmation dialogs
|
|
19
|
+
- Form modals
|
|
20
|
+
- Custom content modals
|
|
21
|
+
- Responsive design
|
|
22
|
+
|
|
23
|
+
### CRUD Operations
|
|
24
|
+
Components for handling data operations:
|
|
25
|
+
- Data tables
|
|
26
|
+
- Create/Edit forms
|
|
27
|
+
- Delete confirmations
|
|
28
|
+
- Pagination
|
|
29
|
+
|
|
30
|
+
### Styling
|
|
31
|
+
Built with modern styling features:
|
|
32
|
+
- Tailwind CSS integration
|
|
33
|
+
- Consistent design system
|
|
34
|
+
- Responsive layouts
|
|
35
|
+
- Customizable themes
|
|
4
36
|
|
|
5
37
|
## Installation
|
|
6
38
|
|
|
39
|
+
First, install the needed dependencies:
|
|
40
|
+
```bash
|
|
41
|
+
npm install tailwindcss svelte-select xlsx @fortawesome/fontawesome-free
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
Then install Grav Svelte:
|
|
7
45
|
```bash
|
|
8
46
|
npm install grav-svelte
|
|
9
47
|
```
|
|
10
48
|
|
|
11
49
|
## Usage
|
|
12
50
|
|
|
13
|
-
|
|
51
|
+
Import and use components in your Svelte files:
|
|
14
52
|
|
|
15
|
-
### Method 1: Import from the package root
|
|
16
53
|
```svelte
|
|
17
|
-
|
|
18
|
-
import { Button } from 'grav-svelte';
|
|
19
|
-
</script>
|
|
54
|
+
import InputFormText from 'grav-svelte';
|
|
20
55
|
|
|
21
|
-
|
|
56
|
+
// In your component
|
|
57
|
+
<InputFormText label="Name" bind:valueVar={name} />
|
|
22
58
|
```
|
|
23
59
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
60
|
+
## Component Documentation
|
|
61
|
+
|
|
62
|
+
### Input Components
|
|
63
|
+
Available input types:
|
|
64
|
+
- `InputFormText` - Text input with validation
|
|
65
|
+
- `InputFormNumber` - Number input with min/max
|
|
66
|
+
- `InputFormBool` - Toggle switch
|
|
67
|
+
- `InputFormColor` - Color picker
|
|
68
|
+
- `InputFormDate` - Date picker
|
|
69
|
+
- `InputFormDateAndHours` - DateTime picker
|
|
70
|
+
- `InputFormImage` - Image upload with preview
|
|
71
|
+
- `InputFormSelect` - Dropdown select
|
|
72
|
+
- `InputFormTextArea` - Multi-line text input
|
|
73
|
+
- `InputFormTextWithSlide` - Text with slider
|
|
74
|
+
- `InputFormCascade` - Cascading dropdowns
|
|
75
|
+
|
|
76
|
+
### Modal Components
|
|
77
|
+
Features:
|
|
78
|
+
- Customizable header and footer
|
|
79
|
+
- Backdrop click to close
|
|
80
|
+
- Keyboard navigation (Esc to close)
|
|
81
|
+
- Responsive design
|
|
82
|
+
- Animation support
|
|
83
|
+
|
|
84
|
+
### CRUD Components
|
|
85
|
+
Available components:
|
|
86
|
+
- `DataTable` - Sortable and filterable tables
|
|
87
|
+
- `FormBuilder` - Dynamic form generation
|
|
88
|
+
- `Pagination` - Page navigation
|
|
89
|
+
- `SearchInput` - Search with debounce
|
|
90
|
+
|
|
91
|
+
## Documentation
|
|
92
|
+
|
|
93
|
+
Explore our components and their usage in the following sections:
|
|
94
|
+
- [Input Components](/inputs) - View all available input components and their usage
|
|
95
|
+
- [Modal Components](/modals) - Explore different types of modal components
|
|
96
|
+
- [CRUD Components](/crud) - Learn about data management components
|
|
32
97
|
|
|
33
98
|
## Components
|
|
34
99
|
|
|
@@ -1,100 +1,96 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
import { createEventDispatcher } from "svelte";
|
|
3
|
+
const dispatch = createEventDispatcher();
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
export let perPage;
|
|
6
|
+
export let totalRows;
|
|
7
|
+
export let currentPage = 1;
|
|
8
|
+
export let theme = "black";
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
$: totalPages = Math.ceil(totalRows / perPage);
|
|
11
|
+
$: start = (currentPage - 1) * perPage;
|
|
12
|
+
$: end = Math.min(start + perPage - 1, totalRows - 1);
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
14
|
+
// Helper function to determine if a page number should be visible
|
|
15
|
+
function shouldShowPage(pageNum) {
|
|
16
|
+
if (totalPages <= 7) return true;
|
|
17
|
+
if (pageNum <= 2 || pageNum >= totalPages - 1) return true;
|
|
18
|
+
return Math.abs(pageNum - currentPage) <= 2;
|
|
19
|
+
}
|
|
20
20
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
function handlePageChange(page) {
|
|
22
|
+
currentPage = page;
|
|
23
|
+
dispatch("pageChange", { page, pageSize: perPage });
|
|
24
|
+
}
|
|
25
25
|
</script>
|
|
26
26
|
|
|
27
27
|
{#if totalRows && totalRows > perPage}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
39
|
-
<polyline points="11 17 6 12 11 7"></polyline>
|
|
40
|
-
</svg>
|
|
41
|
-
</button>
|
|
28
|
+
<div class="flex items-center justify-center p-3 pb-0">
|
|
29
|
+
<button
|
|
30
|
+
on:click={() => handlePageChange(1)}
|
|
31
|
+
disabled={currentPage === 1}
|
|
32
|
+
class="mr-auto p-2 text-xs hover:bg-black hover:text-white bg-white shadow-lg text-black border border-black tracking-wider rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
|
|
33
|
+
aria-label="Go to first page"
|
|
34
|
+
>
|
|
35
|
+
<i class="fas fa-chevron-left" />
|
|
36
|
+
<i class="fas fa-chevron-left" />
|
|
37
|
+
</button>
|
|
42
38
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
</svg>
|
|
52
|
-
</button>
|
|
39
|
+
<button
|
|
40
|
+
on:click={() => handlePageChange(currentPage - 1)}
|
|
41
|
+
disabled={currentPage === 1}
|
|
42
|
+
class="p-2 hover:bg-gray-100 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
|
|
43
|
+
aria-label="Go to previous page"
|
|
44
|
+
>
|
|
45
|
+
<i class="fas fa-chevron-left" />
|
|
46
|
+
</button>
|
|
53
47
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
48
|
+
{#each Array(totalPages) as _, i}
|
|
49
|
+
{@const pageNum = i + 1}
|
|
50
|
+
{#if shouldShowPage(pageNum)}
|
|
51
|
+
<button
|
|
52
|
+
on:click={() => handlePageChange(pageNum)}
|
|
53
|
+
class="p-1 w-8 text-center border-b-2 hover:bg-gray-200 cursor-pointer mr-1 {pageNum ===
|
|
54
|
+
currentPage
|
|
55
|
+
? 'border-black'
|
|
56
|
+
: ''}"
|
|
57
|
+
aria-label="Go to page {pageNum}"
|
|
58
|
+
aria-current={pageNum === currentPage ? "page" : undefined}
|
|
59
|
+
>
|
|
60
|
+
{pageNum}
|
|
61
|
+
</button>
|
|
62
|
+
{:else if shouldShowPage(i) && !shouldShowPage(i + 1)}
|
|
63
|
+
<span class="px-2">...</span>
|
|
64
|
+
{/if}
|
|
65
|
+
{/each}
|
|
69
66
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
</svg>
|
|
79
|
-
</button>
|
|
67
|
+
<button
|
|
68
|
+
on:click={() => handlePageChange(currentPage + 1)}
|
|
69
|
+
disabled={currentPage === totalPages}
|
|
70
|
+
class="p-2 hover:bg-gray-100 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
|
|
71
|
+
aria-label="Go to next page"
|
|
72
|
+
>
|
|
73
|
+
<i class="fas fa-chevron-right" />
|
|
74
|
+
</button>
|
|
80
75
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
<polyline points="13 17 18 12 13 7"></polyline>
|
|
92
|
-
<i class="fas fa-chevron-right" />
|
|
93
|
-
<i class="fas fa-chevron-right" />
|
|
94
|
-
</button>
|
|
95
|
-
</div>
|
|
76
|
+
<button
|
|
77
|
+
on:click={() => handlePageChange(totalPages)}
|
|
78
|
+
disabled={currentPage === totalPages}
|
|
79
|
+
class="ml-auto p-2 text-xs hover:bg-black hover:text-white bg-white shadow-lg text-black border border-black tracking-wider rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
|
|
80
|
+
aria-label="Go to last page"
|
|
81
|
+
>
|
|
82
|
+
<i class="fas fa-chevron-right" />
|
|
83
|
+
<i class="fas fa-chevron-right" />
|
|
84
|
+
</button>
|
|
85
|
+
</div>
|
|
96
86
|
{/if}
|
|
97
87
|
|
|
98
|
-
<div
|
|
99
|
-
|
|
88
|
+
<div
|
|
89
|
+
class="flex items-center justify-center my-2 {theme === 'black'
|
|
90
|
+
? 'text-black'
|
|
91
|
+
: 'text-white'}"
|
|
92
|
+
>
|
|
93
|
+
<p class="text-sm">
|
|
94
|
+
Mostrando: {start + 1} - {end + 1} de {totalRows} registros
|
|
95
|
+
</p>
|
|
100
96
|
</div>
|