@likable-hair/svelte 3.3.3 → 3.3.5
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/components/composed/forms/AsyncAutocomplete.svelte +8 -1
- package/dist/components/composed/forms/AsyncAutocomplete.svelte.d.ts +8 -1
- package/dist/components/simple/forms/Checkbox.svelte +2 -2
- package/dist/components/simple/forms/Checkbox.svelte.d.ts +1 -0
- package/dist/components/simple/forms/FileInputList.svelte +42 -38
- package/dist/components/simple/forms/FileInputList.svelte.d.ts +7 -1
- package/package.json +1 -1
|
@@ -43,4 +43,11 @@ $:
|
|
|
43
43
|
bind:disabled
|
|
44
44
|
searchFunction={() => true}
|
|
45
45
|
on:change
|
|
46
|
-
|
|
46
|
+
>
|
|
47
|
+
<div slot="chip-label" let:selection>
|
|
48
|
+
<slot name="chip-label" {selection}>{selection.label}</slot>
|
|
49
|
+
</div>
|
|
50
|
+
<div slot="item-label" let:item>
|
|
51
|
+
<slot name="item-label" {item}>{item.label}</slot>
|
|
52
|
+
</div>
|
|
53
|
+
</Autocomplete>
|
|
@@ -26,7 +26,14 @@ declare const __propDef: {
|
|
|
26
26
|
} & {
|
|
27
27
|
[evt: string]: CustomEvent<any>;
|
|
28
28
|
};
|
|
29
|
-
slots: {
|
|
29
|
+
slots: {
|
|
30
|
+
'chip-label': {
|
|
31
|
+
selection: Item;
|
|
32
|
+
};
|
|
33
|
+
'item-label': {
|
|
34
|
+
item: Item;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
30
37
|
};
|
|
31
38
|
export type AsyncAutocompleteProps = typeof __propDef.props;
|
|
32
39
|
export type AsyncAutocompleteEvents = typeof __propDef.events;
|
|
@@ -21,8 +21,8 @@ function handleKeyUp(event) {
|
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
let dispatch = createEventDispatcher(), shiftKeyPressed = false;
|
|
24
|
-
function handleChange() {
|
|
25
|
-
dispatch("change", { shiftKeyPressed });
|
|
24
|
+
function handleChange(e) {
|
|
25
|
+
dispatch("change", { shiftKeyPressed, nativeEvent: e });
|
|
26
26
|
}
|
|
27
27
|
</script>
|
|
28
28
|
|
|
@@ -7,7 +7,7 @@ import { createEventDispatcher } from "svelte";
|
|
|
7
7
|
let clazz = "";
|
|
8
8
|
export { clazz as class };
|
|
9
9
|
let dispatch = createEventDispatcher();
|
|
10
|
-
export let files = [], persistOverUpload = true, dropAreaActive = true, icon = "mdi-file-document", disabled = false, maxFiles = void 0;
|
|
10
|
+
export let files = [], persistOverUpload = true, dropAreaActive = true, icon = "mdi-file-document", message = "Drop file here or click to upload", disabled = false, maxFiles = void 0;
|
|
11
11
|
let fileActive = null;
|
|
12
12
|
function handleFileMouseEnter(file) {
|
|
13
13
|
dropAreaActive = false;
|
|
@@ -60,44 +60,48 @@ function handleFileSelect() {
|
|
|
60
60
|
>
|
|
61
61
|
<div class="body-container" class:active={dropAreaActive}>
|
|
62
62
|
{#if files.length == 0}
|
|
63
|
-
<
|
|
63
|
+
<slot name="message">
|
|
64
|
+
<span>{message}</span>
|
|
65
|
+
</slot>
|
|
64
66
|
{:else}
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
<
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
<
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
e
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
67
|
+
<slot name="file-list" {files}>
|
|
68
|
+
<table class="file-list">
|
|
69
|
+
{#each files as file}
|
|
70
|
+
<tr
|
|
71
|
+
on:click|stopPropagation={() => {
|
|
72
|
+
handleFileClick(file);
|
|
73
|
+
}}
|
|
74
|
+
on:mouseenter|stopPropagation={() => {
|
|
75
|
+
handleFileMouseEnter(file);
|
|
76
|
+
}}
|
|
77
|
+
on:mouseleave|stopPropagation={() => {
|
|
78
|
+
handleFileMouseLeave();
|
|
79
|
+
}}
|
|
80
|
+
class:file-active={fileActive == file}
|
|
81
|
+
>
|
|
82
|
+
<td>
|
|
83
|
+
<Icon name={icon} />
|
|
84
|
+
</td>
|
|
85
|
+
<td class="file-name">
|
|
86
|
+
{file.name}
|
|
87
|
+
</td>
|
|
88
|
+
<td>
|
|
89
|
+
{file.size}
|
|
90
|
+
</td>
|
|
91
|
+
<td style:width="10%" style:margin-right="10px">
|
|
92
|
+
<Button
|
|
93
|
+
buttonType="text"
|
|
94
|
+
icon="mdi-close"
|
|
95
|
+
on:click={(e) => {
|
|
96
|
+
e.detail.nativeEvent.stopPropagation();
|
|
97
|
+
handleRemove(file);
|
|
98
|
+
}}
|
|
99
|
+
/>
|
|
100
|
+
</td>
|
|
101
|
+
</tr>
|
|
102
|
+
{/each}
|
|
103
|
+
</table>
|
|
104
|
+
</slot>
|
|
101
105
|
{/if}
|
|
102
106
|
</div>
|
|
103
107
|
</span>
|
|
@@ -8,6 +8,7 @@ declare const __propDef: {
|
|
|
8
8
|
persistOverUpload?: boolean | undefined;
|
|
9
9
|
dropAreaActive?: boolean | undefined;
|
|
10
10
|
icon?: string | undefined;
|
|
11
|
+
message?: string | undefined;
|
|
11
12
|
disabled?: boolean | undefined;
|
|
12
13
|
maxFiles?: number | undefined;
|
|
13
14
|
};
|
|
@@ -27,7 +28,12 @@ declare const __propDef: {
|
|
|
27
28
|
} & {
|
|
28
29
|
[evt: string]: CustomEvent<any>;
|
|
29
30
|
};
|
|
30
|
-
slots: {
|
|
31
|
+
slots: {
|
|
32
|
+
message: {};
|
|
33
|
+
'file-list': {
|
|
34
|
+
files: File[];
|
|
35
|
+
};
|
|
36
|
+
};
|
|
31
37
|
};
|
|
32
38
|
export type FileInputListProps = typeof __propDef.props;
|
|
33
39
|
export type FileInputListEvents = typeof __propDef.events;
|