@likable-hair/svelte 3.0.72 → 3.0.74
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.
|
@@ -130,16 +130,50 @@ $:
|
|
|
130
130
|
})
|
|
131
131
|
}}
|
|
132
132
|
on:click
|
|
133
|
-
|
|
133
|
+
>
|
|
134
|
+
<svelte:fragment slot="append" let:item let:doUpdateItem >
|
|
135
|
+
<slot name="append" item={item} {doUpdateItem}>
|
|
136
|
+
</slot>
|
|
137
|
+
</svelte:fragment>
|
|
138
|
+
<svelte:fragment slot="title" let:item let:doUpdateItem>
|
|
139
|
+
<slot name="title" item={item} {doUpdateItem}>
|
|
140
|
+
<input
|
|
141
|
+
value={item.title}
|
|
142
|
+
on:input|stopPropagation={(e) => {
|
|
143
|
+
// @ts-ignore
|
|
144
|
+
const { value } = e.target
|
|
145
|
+
|
|
146
|
+
item.title = value
|
|
147
|
+
doUpdateItem({
|
|
148
|
+
...item,
|
|
149
|
+
title: value
|
|
150
|
+
}, {})
|
|
151
|
+
|
|
152
|
+
dispatch('input', {
|
|
153
|
+
item: item
|
|
154
|
+
})
|
|
155
|
+
}}
|
|
156
|
+
/>
|
|
157
|
+
</slot>
|
|
158
|
+
</svelte:fragment>
|
|
159
|
+
</TreeEditorItem>
|
|
134
160
|
{/each}
|
|
135
161
|
</ul>
|
|
136
162
|
{/key}
|
|
137
163
|
|
|
138
164
|
<style>
|
|
139
|
-
|
|
140
165
|
.main-ul {
|
|
141
166
|
padding: 0px;
|
|
142
167
|
padding-bottom: 30px;
|
|
143
168
|
list-style: none;
|
|
144
169
|
}
|
|
170
|
+
|
|
171
|
+
input {
|
|
172
|
+
outline: none;
|
|
173
|
+
background-color: transparent;
|
|
174
|
+
font-size: inherit;
|
|
175
|
+
font-weight: inherit;
|
|
176
|
+
color: inherit;
|
|
177
|
+
border: none
|
|
178
|
+
}
|
|
145
179
|
</style>
|
|
@@ -39,7 +39,16 @@ declare const __propDef: {
|
|
|
39
39
|
} & {
|
|
40
40
|
[evt: string]: CustomEvent<any>;
|
|
41
41
|
};
|
|
42
|
-
slots: {
|
|
42
|
+
slots: {
|
|
43
|
+
append: {
|
|
44
|
+
item: any;
|
|
45
|
+
doUpdateItem: any;
|
|
46
|
+
};
|
|
47
|
+
title: {
|
|
48
|
+
item: any;
|
|
49
|
+
doUpdateItem: any;
|
|
50
|
+
};
|
|
51
|
+
};
|
|
43
52
|
};
|
|
44
53
|
export type TreeEditorProps = typeof __propDef.props;
|
|
45
54
|
export type TreeEditorEvents = typeof __propDef.events;
|
|
@@ -43,9 +43,10 @@ $:
|
|
|
43
43
|
if (!!subItems)
|
|
44
44
|
initSortable();
|
|
45
45
|
function doUpdateItem(item, inputData) {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
let newItem = item;
|
|
47
|
+
if (!!updateItem) {
|
|
48
|
+
newItem = updateItem({ item, inputData });
|
|
49
|
+
}
|
|
49
50
|
dispatch("input", { item: newItem });
|
|
50
51
|
}
|
|
51
52
|
</script>
|
|
@@ -74,19 +75,25 @@ function doUpdateItem(item, inputData) {
|
|
|
74
75
|
</div>
|
|
75
76
|
{/if}
|
|
76
77
|
{#if editable}
|
|
77
|
-
<
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
78
|
+
<slot name="title" item={currentItem} {doUpdateItem}>
|
|
79
|
+
<input
|
|
80
|
+
bind:value={title}
|
|
81
|
+
on:input|stopPropagation={(e) => {
|
|
82
|
+
dispatch('input', {
|
|
83
|
+
item: currentItem
|
|
84
|
+
})
|
|
85
|
+
}}
|
|
86
|
+
/>
|
|
87
|
+
</slot>
|
|
85
88
|
{:else}
|
|
86
89
|
{title}
|
|
87
90
|
{/if}
|
|
88
|
-
|
|
89
|
-
|
|
91
|
+
{#if !!$$slots.append}
|
|
92
|
+
<div style:margin-left="auto">
|
|
93
|
+
<slot name="append" item={currentItem} {doUpdateItem}>
|
|
94
|
+
</slot>
|
|
95
|
+
</div>
|
|
96
|
+
{/if}
|
|
90
97
|
</div>
|
|
91
98
|
<ul
|
|
92
99
|
class="list-container"
|
|
@@ -116,7 +123,33 @@ function doUpdateItem(item, inputData) {
|
|
|
116
123
|
}}
|
|
117
124
|
on:input
|
|
118
125
|
on:click
|
|
119
|
-
|
|
126
|
+
>
|
|
127
|
+
<svelte:fragment slot="append" let:item let:doUpdateItem >
|
|
128
|
+
<slot name="append" item={item} {doUpdateItem}>
|
|
129
|
+
</slot>
|
|
130
|
+
</svelte:fragment>
|
|
131
|
+
<svelte:fragment slot="title" let:item let:doUpdateItem>
|
|
132
|
+
<slot name="title" item={item} {doUpdateItem}>
|
|
133
|
+
<input
|
|
134
|
+
value={item.title}
|
|
135
|
+
on:input|stopPropagation={(e) => {
|
|
136
|
+
// @ts-ignore
|
|
137
|
+
const { value } = e.target
|
|
138
|
+
|
|
139
|
+
item.title = value
|
|
140
|
+
doUpdateItem({
|
|
141
|
+
...item,
|
|
142
|
+
title: value
|
|
143
|
+
}, {})
|
|
144
|
+
|
|
145
|
+
dispatch('input', {
|
|
146
|
+
item: item
|
|
147
|
+
})
|
|
148
|
+
}}
|
|
149
|
+
/>
|
|
150
|
+
</slot>
|
|
151
|
+
</svelte:fragment>
|
|
152
|
+
</svelte:self>
|
|
120
153
|
{/each}
|
|
121
154
|
{/if}
|
|
122
155
|
</ul>
|
|
@@ -37,9 +37,13 @@ declare const __propDef: {
|
|
|
37
37
|
[evt: string]: CustomEvent<any>;
|
|
38
38
|
};
|
|
39
39
|
slots: {
|
|
40
|
+
title: {
|
|
41
|
+
item: any;
|
|
42
|
+
doUpdateItem: any;
|
|
43
|
+
};
|
|
40
44
|
append: {
|
|
41
|
-
item:
|
|
42
|
-
doUpdateItem:
|
|
45
|
+
item: any;
|
|
46
|
+
doUpdateItem: any;
|
|
43
47
|
};
|
|
44
48
|
};
|
|
45
49
|
};
|