@emamid/svelte-data-table 0.0.14 → 0.0.15
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/MultiSelectCell.doc.d.ts +8 -0
- package/dist/cells/MultiSelectCell.doc.js +8 -0
- package/dist/cells/MultiSelectCell.svelte +30 -0
- package/dist/cells/MultiSelectCell.svelte.d.ts +27 -0
- package/dist/cells/RangeCell.doc.d.ts +1 -1
- package/dist/cells/RangeCell.doc.js +1 -1
- package/dist/cells/RangeCell.svelte +2 -2
- package/dist/cells/RatingCell.doc.d.ts +7 -0
- package/dist/cells/RatingCell.doc.js +7 -0
- package/dist/cells/RatingCell.svelte +13 -0
- package/dist/cells/RatingCell.svelte.d.ts +22 -0
- package/dist/cells/index.d.ts +4 -0
- package/dist/cells/index.js +4 -0
- package/package.json +1 -1
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export {};
|
|
2
|
+
/**
|
|
3
|
+
* Cell containing a MultiSelect ({@link https://flowbite-svelte.com/docs/forms/select#MultiSelect}) component.
|
|
4
|
+
* @typedef {object} MultiSelectCell
|
|
5
|
+
* @property {string} [displayProp] - Property within items which displays in the list. Defaults to 'name'.
|
|
6
|
+
* @property {string} [valueProp] - Property within tems used to populate the cell's value when picked. Defaults to 'id'.
|
|
7
|
+
* @property {any[]} items - Array of objects the user can select from.
|
|
8
|
+
*/
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
/**
|
|
3
|
+
* Cell containing a MultiSelect ({@link https://flowbite-svelte.com/docs/forms/select#MultiSelect}) component.
|
|
4
|
+
* @typedef {object} MultiSelectCell
|
|
5
|
+
* @property {string} [displayProp] - Property within items which displays in the list. Defaults to 'name'.
|
|
6
|
+
* @property {string} [valueProp] - Property within tems used to populate the cell's value when picked. Defaults to 'id'.
|
|
7
|
+
* @property {any[]} items - Array of objects the user can select from.
|
|
8
|
+
*/
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<script>import { createEventDispatcher } from "svelte";
|
|
2
|
+
import { MultiSelect } from "flowbite-svelte";
|
|
3
|
+
import TabWrapper from "./TabWrapper.svelte";
|
|
4
|
+
export let item;
|
|
5
|
+
export let column;
|
|
6
|
+
export let displayProp = "name";
|
|
7
|
+
export let valueProp = "id";
|
|
8
|
+
export let items = [];
|
|
9
|
+
export let value;
|
|
10
|
+
let newValue = value;
|
|
11
|
+
const dispatch = createEventDispatcher();
|
|
12
|
+
$:
|
|
13
|
+
if (value !== newValue) {
|
|
14
|
+
dispatch("cellChanged", {
|
|
15
|
+
column,
|
|
16
|
+
item,
|
|
17
|
+
oldValue: value,
|
|
18
|
+
newValue
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
<TabWrapper {column} {item} on:prevTab on:nextTab>
|
|
24
|
+
<MultiSelect
|
|
25
|
+
{...$$props}
|
|
26
|
+
items={items.map((item) => ({ value: item[valueProp], name: item[displayProp] }))}
|
|
27
|
+
bind:value={newValue}
|
|
28
|
+
autofocus
|
|
29
|
+
/>
|
|
30
|
+
</TabWrapper>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import type { ColumnConfig } from '../common.ts';
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
[x: string]: any;
|
|
6
|
+
item: any;
|
|
7
|
+
column: ColumnConfig;
|
|
8
|
+
displayProp?: string | undefined;
|
|
9
|
+
valueProp?: string | undefined;
|
|
10
|
+
items?: any[] | undefined;
|
|
11
|
+
value: any;
|
|
12
|
+
};
|
|
13
|
+
events: {
|
|
14
|
+
prevTab: CustomEvent<any>;
|
|
15
|
+
nextTab: CustomEvent<any>;
|
|
16
|
+
cellChanged: CustomEvent<any>;
|
|
17
|
+
} & {
|
|
18
|
+
[evt: string]: CustomEvent<any>;
|
|
19
|
+
};
|
|
20
|
+
slots: {};
|
|
21
|
+
};
|
|
22
|
+
export type MultiSelectCellProps = typeof __propDef.props;
|
|
23
|
+
export type MultiSelectCellEvents = typeof __propDef.events;
|
|
24
|
+
export type MultiSelectCellSlots = typeof __propDef.slots;
|
|
25
|
+
export default class MultiSelectCell extends SvelteComponent<MultiSelectCellProps, MultiSelectCellEvents, MultiSelectCellSlots> {
|
|
26
|
+
}
|
|
27
|
+
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export {};
|
|
2
2
|
/**
|
|
3
3
|
* Cell containing a range ({@link https://flowbite-svelte.com/docs/forms/range}) component.
|
|
4
|
-
* @typedef {object}
|
|
4
|
+
* @typedef {object} RangeCell
|
|
5
5
|
* @property {number} [min] - Passed through.
|
|
6
6
|
* @property {number} [max] - Passed through.
|
|
7
7
|
*/
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
/**
|
|
3
3
|
* Cell containing a range ({@link https://flowbite-svelte.com/docs/forms/range}) component.
|
|
4
|
-
* @typedef {object}
|
|
4
|
+
* @typedef {object} RangeCell
|
|
5
5
|
* @property {number} [min] - Passed through.
|
|
6
6
|
* @property {number} [max] - Passed through.
|
|
7
7
|
*/
|
|
@@ -6,7 +6,7 @@ export let item;
|
|
|
6
6
|
export let value;
|
|
7
7
|
let localValue = value;
|
|
8
8
|
const dispatch = createEventDispatcher();
|
|
9
|
-
const
|
|
9
|
+
const changed = () => {
|
|
10
10
|
dispatch("cellChanged", {
|
|
11
11
|
column,
|
|
12
12
|
item,
|
|
@@ -16,4 +16,4 @@ const toggleChanged = () => {
|
|
|
16
16
|
};
|
|
17
17
|
</script>
|
|
18
18
|
|
|
19
|
-
<Range {...$$props} bind:value={localValue} on:change={
|
|
19
|
+
<Range {...$$props} bind:value={localValue} on:change={changed}>{#if caption}{caption}{/if}</Range>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<script>import { Rating } from "flowbite-svelte";
|
|
2
|
+
export let column;
|
|
3
|
+
export let item;
|
|
4
|
+
export let value;
|
|
5
|
+
export let icon = null;
|
|
6
|
+
let localValue = value;
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
{#if icon}
|
|
10
|
+
<Rating {...$$props} bind:rating={localValue} {icon}/>
|
|
11
|
+
{:else}
|
|
12
|
+
<Rating {...$$props} bind:rating={localValue}/>
|
|
13
|
+
{/if}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import type { ComponentType } from 'svelte';
|
|
3
|
+
import type { ColumnConfig } from '../common.ts';
|
|
4
|
+
declare const __propDef: {
|
|
5
|
+
props: {
|
|
6
|
+
[x: string]: any;
|
|
7
|
+
column: ColumnConfig;
|
|
8
|
+
item: any;
|
|
9
|
+
value: any;
|
|
10
|
+
icon?: ComponentType | null | undefined;
|
|
11
|
+
};
|
|
12
|
+
events: {
|
|
13
|
+
[evt: string]: CustomEvent<any>;
|
|
14
|
+
};
|
|
15
|
+
slots: {};
|
|
16
|
+
};
|
|
17
|
+
export type RatingCellProps = typeof __propDef.props;
|
|
18
|
+
export type RatingCellEvents = typeof __propDef.events;
|
|
19
|
+
export type RatingCellSlots = typeof __propDef.slots;
|
|
20
|
+
export default class RatingCell extends SvelteComponent<RatingCellProps, RatingCellEvents, RatingCellSlots> {
|
|
21
|
+
}
|
|
22
|
+
export {};
|
package/dist/cells/index.d.ts
CHANGED
|
@@ -7,10 +7,14 @@ export * from './CheckboxCell.svelte';
|
|
|
7
7
|
export { default as CheckboxCell } from './CheckboxCell.svelte';
|
|
8
8
|
export * from './InputCell.svelte';
|
|
9
9
|
export { default as InputCell } from './InputCell.svelte';
|
|
10
|
+
export * from './MultiSelectCell.svelte';
|
|
11
|
+
export { default as MultiSelectCell } from './MultiSelectCell.svelte';
|
|
10
12
|
export * from './NumberInputCell.svelte';
|
|
11
13
|
export { default as NumberInputCell } from './NumberInputCell.svelte';
|
|
12
14
|
export * from './RangeCell.svelte';
|
|
13
15
|
export { default as RangeCell } from './RangeCell.svelte';
|
|
16
|
+
export * from './RatingCell.svelte';
|
|
17
|
+
export { default as RatingCell } from './RatingCell.svelte';
|
|
14
18
|
export * from './SelectCell.svelte';
|
|
15
19
|
export { default as SelectCell } from './SelectCell.svelte';
|
|
16
20
|
export * from './SpinCell.svelte';
|
package/dist/cells/index.js
CHANGED
|
@@ -7,10 +7,14 @@ export * from './CheckboxCell.svelte';
|
|
|
7
7
|
export { default as CheckboxCell } from './CheckboxCell.svelte';
|
|
8
8
|
export * from './InputCell.svelte';
|
|
9
9
|
export { default as InputCell } from './InputCell.svelte';
|
|
10
|
+
export * from './MultiSelectCell.svelte';
|
|
11
|
+
export { default as MultiSelectCell } from './MultiSelectCell.svelte';
|
|
10
12
|
export * from './NumberInputCell.svelte';
|
|
11
13
|
export { default as NumberInputCell } from './NumberInputCell.svelte';
|
|
12
14
|
export * from './RangeCell.svelte';
|
|
13
15
|
export { default as RangeCell } from './RangeCell.svelte';
|
|
16
|
+
export * from './RatingCell.svelte';
|
|
17
|
+
export { default as RatingCell } from './RatingCell.svelte';
|
|
14
18
|
export * from './SelectCell.svelte';
|
|
15
19
|
export { default as SelectCell } from './SelectCell.svelte';
|
|
16
20
|
export * from './SpinCell.svelte';
|