@emamid/svelte-data-table 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/dist/cells/ActionsCell.svelte +14 -2
- package/dist/cells/ActionsCell.svelte.d.ts +14 -1
- package/dist/cells/InputCell.svelte +1 -2
- package/dist/cells/MultiSelectCell.svelte +8 -9
- package/dist/cells/NumberInputCell.svelte +1 -2
- package/dist/cells/SelectCell.svelte +8 -9
- package/package.json +3 -1
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
<script context="module"
|
|
1
|
+
<script context="module">import { Tooltip } from "flowbite-svelte";
|
|
2
|
+
import Icon from "@iconify/svelte";
|
|
3
|
+
</script>
|
|
2
4
|
|
|
3
5
|
<script>import { createEventDispatcher } from "svelte";
|
|
4
6
|
import { Button } from "flowbite-svelte";
|
|
@@ -25,7 +27,17 @@ const actionClicked = (action) => {
|
|
|
25
27
|
disabled={action.isDisabled?.(item, column, action)}
|
|
26
28
|
on:click={() => actionClicked(action)}
|
|
27
29
|
>
|
|
28
|
-
|
|
30
|
+
{#if action.icon}
|
|
31
|
+
<svelte:component this={action.icon} class={action.iconClass || iconClass} />
|
|
32
|
+
{/if}
|
|
33
|
+
{#if action.iconify}
|
|
34
|
+
<Icon
|
|
35
|
+
{...action.iconify}
|
|
36
|
+
/>
|
|
37
|
+
{/if}
|
|
29
38
|
{#if action.caption}{action.caption}{/if}
|
|
30
39
|
</Button>
|
|
40
|
+
{#if action.tooltip}
|
|
41
|
+
<Tooltip class="z-10">{action.tooltip}</Tooltip>
|
|
42
|
+
{/if}
|
|
31
43
|
{/each}
|
|
@@ -1,15 +1,28 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
2
|
import type { ColumnConfig } from '../common.js';
|
|
3
3
|
type ButtonColor = 'red' | 'yellow' | 'green' | 'purple' | 'blue' | 'light' | 'dark' | 'primary' | 'none' | 'alternative' | undefined;
|
|
4
|
+
type IconifyProps = {
|
|
5
|
+
color?: string;
|
|
6
|
+
flip?: string;
|
|
7
|
+
height?: string | number;
|
|
8
|
+
hFlip?: boolean;
|
|
9
|
+
icon: string;
|
|
10
|
+
inline?: boolean;
|
|
11
|
+
rotate?: number;
|
|
12
|
+
vFlip?: boolean;
|
|
13
|
+
width?: string | number;
|
|
14
|
+
};
|
|
4
15
|
export type ActionDisablementFunction = (item: any, column: ColumnConfig, action: Action) => boolean;
|
|
5
16
|
export interface Action {
|
|
6
17
|
buttonClass?: string;
|
|
7
18
|
buttonColor?: ButtonColor;
|
|
8
19
|
caption?: string;
|
|
9
20
|
name: string;
|
|
10
|
-
icon
|
|
21
|
+
icon?: ConstructorOfATypedSvelteComponent;
|
|
11
22
|
iconClass?: string;
|
|
23
|
+
iconify?: IconifyProps;
|
|
12
24
|
isDisabled?: ActionDisablementFunction;
|
|
25
|
+
tooltip?: string;
|
|
13
26
|
}
|
|
14
27
|
declare const __propDef: {
|
|
15
28
|
props: {
|
|
@@ -9,15 +9,14 @@ export let items = [];
|
|
|
9
9
|
export let value;
|
|
10
10
|
let newValue = value;
|
|
11
11
|
const dispatch = createEventDispatcher();
|
|
12
|
-
$:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
12
|
+
$: if (value !== newValue) {
|
|
13
|
+
dispatch("cellChanged", {
|
|
14
|
+
column,
|
|
15
|
+
item,
|
|
16
|
+
oldValue: value,
|
|
17
|
+
newValue
|
|
18
|
+
});
|
|
19
|
+
}
|
|
21
20
|
</script>
|
|
22
21
|
|
|
23
22
|
<TabWrapper {column} {item} on:prevTab on:nextTab>
|
|
@@ -9,15 +9,14 @@ export let items = [];
|
|
|
9
9
|
export let value;
|
|
10
10
|
let newValue = value;
|
|
11
11
|
const dispatch = createEventDispatcher();
|
|
12
|
-
$:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
12
|
+
$: if (value !== newValue) {
|
|
13
|
+
dispatch("cellChanged", {
|
|
14
|
+
column,
|
|
15
|
+
item,
|
|
16
|
+
oldValue: value,
|
|
17
|
+
newValue
|
|
18
|
+
});
|
|
19
|
+
}
|
|
21
20
|
</script>
|
|
22
21
|
|
|
23
22
|
<TabWrapper {column} {item} on:prevTab on:nextTab>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@emamid/svelte-data-table",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.22",
|
|
4
4
|
"homepage": "https://github.com/emamid/svelte-data-table",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vite dev",
|
|
@@ -30,6 +30,8 @@
|
|
|
30
30
|
"svelte": "^4.0.0"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
+
"@iconify/json": "^2.2.235",
|
|
34
|
+
"@iconify/svelte": "^4.0.2",
|
|
33
35
|
"@sveltejs/adapter-auto": "^3.0.0",
|
|
34
36
|
"@sveltejs/kit": "^2.0.0",
|
|
35
37
|
"@sveltejs/package": "^2.0.0",
|