@gandalan/weblibs 0.0.21 → 0.0.22
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/components/GanTable.svelte +96 -0
- package/package.json +6 -5
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import SvelteTable from "svelte-table";
|
|
3
|
+
|
|
4
|
+
export let columns;
|
|
5
|
+
/** @type {any[]} */
|
|
6
|
+
export let rows;
|
|
7
|
+
/** @type {string} */
|
|
8
|
+
export let sortBy = "";
|
|
9
|
+
/** @type {(string | number)[]} */
|
|
10
|
+
export let expanded = [];
|
|
11
|
+
/** @type {(string | number)[]} */
|
|
12
|
+
export let selected = [];
|
|
13
|
+
/** @type {string | null} */
|
|
14
|
+
export let rowKey = null;
|
|
15
|
+
/** @type {boolean} */
|
|
16
|
+
export let expandSingle = false;
|
|
17
|
+
/** @type {boolean} */
|
|
18
|
+
export let selectSingle = false;
|
|
19
|
+
/** @type {boolean} */
|
|
20
|
+
export let selectOnClick = false;
|
|
21
|
+
/** @type {boolean} */
|
|
22
|
+
export let showExpandIcon = false;
|
|
23
|
+
|
|
24
|
+
// Events
|
|
25
|
+
/** @type {function | null} */
|
|
26
|
+
export let clickCol = null;
|
|
27
|
+
/** @type {function | null} */
|
|
28
|
+
export let clickRow = null;
|
|
29
|
+
/** @type {function | null} */
|
|
30
|
+
export let clickExpand = null;
|
|
31
|
+
/** @type {function | null} */
|
|
32
|
+
export let clickCell = null;
|
|
33
|
+
</script>
|
|
34
|
+
|
|
35
|
+
<SvelteTable
|
|
36
|
+
bind:columns
|
|
37
|
+
bind:rows
|
|
38
|
+
bind:sortBy
|
|
39
|
+
bind:expanded
|
|
40
|
+
bind:selected
|
|
41
|
+
bind:rowKey
|
|
42
|
+
bind:expandSingle
|
|
43
|
+
bind:selectSingle
|
|
44
|
+
bind:selectOnClick
|
|
45
|
+
bind:showExpandIcon
|
|
46
|
+
on:clickCol={clickCol}
|
|
47
|
+
on:clickRow={clickRow}
|
|
48
|
+
on:clickExpand={clickExpand}
|
|
49
|
+
on:clickCell={clickCell}
|
|
50
|
+
classNameTable="gan-table border-2 border-collapse mt-4 mb-4"
|
|
51
|
+
classNameThead="gan-thead"
|
|
52
|
+
classNameTbody="gan-tbody"
|
|
53
|
+
classNameSelect="custom-select"
|
|
54
|
+
classNameInput="custom-input"
|
|
55
|
+
classNameRow="gan-row border-2 border-collapse cursor-pointer odd:bg-gray-100 hover:bg-gray-300"
|
|
56
|
+
classNameCell="gan-cell pr-4"
|
|
57
|
+
classNameRowSelected="row-selected !bg-gray-400"
|
|
58
|
+
classNameRowExpanded="row-expanded bg-gray-400"
|
|
59
|
+
classNameExpandedContent="expanded-content"
|
|
60
|
+
classNameCellExpand="cell-expand">
|
|
61
|
+
|
|
62
|
+
<!-- Wait for better workaround. See: https://github.com/sveltejs/svelte/issues/5604 -->
|
|
63
|
+
|
|
64
|
+
<!--<svelte:fragment slot="header" let:sortOrder let:sortBy>
|
|
65
|
+
<slot name="header" {sortOrder} {sortBy}></slot>
|
|
66
|
+
</svelte:fragment>
|
|
67
|
+
|
|
68
|
+
{#if $$slots.row}
|
|
69
|
+
<svelte:fragment slot="row" let:row let:n>
|
|
70
|
+
<slot name="row" {row} {n}></slot>
|
|
71
|
+
</svelte:fragment>
|
|
72
|
+
{/if}-->
|
|
73
|
+
|
|
74
|
+
<svelte:fragment slot="expanded" let:row let:n>
|
|
75
|
+
<slot name="expanded" {row} {n} />
|
|
76
|
+
</svelte:fragment>
|
|
77
|
+
|
|
78
|
+
</SvelteTable>
|
|
79
|
+
|
|
80
|
+
<style>
|
|
81
|
+
:global(.custom-select) {
|
|
82
|
+
font-weight: 400;
|
|
83
|
+
color: #495057;
|
|
84
|
+
vertical-align: middle;
|
|
85
|
+
border: 1px solid #ced4da;
|
|
86
|
+
border-radius: .25rem;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
:global(.custom-input) {
|
|
90
|
+
font-weight: 400;
|
|
91
|
+
color: #495057;
|
|
92
|
+
vertical-align: middle;
|
|
93
|
+
border: 1px solid #ced4da;
|
|
94
|
+
border-radius: .25rem;
|
|
95
|
+
}
|
|
96
|
+
</style>
|
package/package.json
CHANGED
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gandalan/weblibs",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.22",
|
|
4
4
|
"description": "WebLibs for Gandalan JS/TS/Svelte projects",
|
|
5
5
|
"author": "Philipp Reif",
|
|
6
6
|
"license": "ISC",
|
|
7
7
|
"main": "index.js",
|
|
8
8
|
"devDependencies": {
|
|
9
9
|
"chota": "^0.8.0",
|
|
10
|
-
"svelte": "^3.
|
|
11
|
-
"svelte-chota": "^1.8.
|
|
10
|
+
"svelte": "^3.49.0",
|
|
11
|
+
"svelte-chota": "^1.8.6"
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"@mdi/js": "^
|
|
15
|
-
"axios": "^0.
|
|
14
|
+
"@mdi/js": "^7.0.96",
|
|
15
|
+
"axios": "^0.27.2",
|
|
16
|
+
"svelte-table": "^0.5.0",
|
|
16
17
|
"uuid": "^8.3.2"
|
|
17
18
|
},
|
|
18
19
|
"repository": {
|