parent
bdf179175a
commit
d55c758ad3
2 changed files with 47 additions and 20 deletions
|
@ -1,10 +1,12 @@
|
||||||
<script context="module" lang="ts">
|
<script context="module" lang="ts">
|
||||||
import mitt from 'mitt';
|
import mitt from 'mitt';
|
||||||
|
import type { Address } from '@upnd/upend/types';
|
||||||
|
|
||||||
export type AddEvents = {
|
export type AddEvents = {
|
||||||
choose: void;
|
choose: void;
|
||||||
files: File[];
|
files: File[];
|
||||||
urls: string[];
|
urls: string[];
|
||||||
|
destination: Address;
|
||||||
};
|
};
|
||||||
export const addEmitter = mitt<AddEvents>();
|
export const addEmitter = mitt<AddEvents>();
|
||||||
</script>
|
</script>
|
||||||
|
@ -44,6 +46,10 @@
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
addEmitter.on('destination', (ev) => {
|
||||||
|
destination = ev;
|
||||||
|
});
|
||||||
|
|
||||||
function onDestinationSelected(ev: CustomEvent<SelectorValue | undefined>) {
|
function onDestinationSelected(ev: CustomEvent<SelectorValue | undefined>) {
|
||||||
if (ev.detail?.t === 'Address') {
|
if (ev.detail?.t === 'Address') {
|
||||||
destination = ev.detail.c;
|
destination = ev.detail.c;
|
||||||
|
@ -180,6 +186,7 @@
|
||||||
<div class="controls-destination">
|
<div class="controls-destination">
|
||||||
<div class="label"><Icon plain name="download" /> {$i18n.t('Destination')}</div>
|
<div class="label"><Icon plain name="download" /> {$i18n.t('Destination')}</div>
|
||||||
<Selector
|
<Selector
|
||||||
|
initial={destination ? { t: 'Address', c: destination } : undefined}
|
||||||
types={['Address', 'NewAddress']}
|
types={['Address', 'NewAddress']}
|
||||||
placeholder={$i18n.t('Choose automatically') || ''}
|
placeholder={$i18n.t('Choose automatically') || ''}
|
||||||
on:input={onDestinationSelected}
|
on:input={onDestinationSelected}
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
import Selector, { type SelectorValue } from '../utils/Selector.svelte';
|
import Selector, { type SelectorValue } from '../utils/Selector.svelte';
|
||||||
import { createEventDispatcher } from 'svelte';
|
import { createEventDispatcher } from 'svelte';
|
||||||
import type { WidgetChange } from '$lib/types/base';
|
import type { WidgetChange } from '$lib/types/base';
|
||||||
|
import { addEmitter } from '$lib/components/AddModal.svelte';
|
||||||
import debug from 'debug';
|
import debug from 'debug';
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
const dbg = debug(`kestrel:EntityList`);
|
const dbg = debug(`kestrel:EntityList`);
|
||||||
|
@ -202,26 +203,39 @@
|
||||||
{#if address}
|
{#if address}
|
||||||
<div class="add">
|
<div class="add">
|
||||||
{#if adding}
|
{#if adding}
|
||||||
<Selector
|
<div class="main">
|
||||||
bind:this={addSelector}
|
<Selector
|
||||||
placeholder={$i18n.t('Search database or paste an URL') || ''}
|
bind:this={addSelector}
|
||||||
types={['Address', 'NewAddress']}
|
placeholder={$i18n.t('Add or create an entry') || ''}
|
||||||
on:input={addEntity}
|
types={['Address', 'NewAddress']}
|
||||||
on:focus={(ev) => {
|
on:input={addEntity}
|
||||||
if (!ev.detail) {
|
on:focus={(ev) => {
|
||||||
adding = false;
|
if (!ev.detail) {
|
||||||
}
|
adding = false;
|
||||||
}}
|
}
|
||||||
/>
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<IconButton
|
<div class="main">
|
||||||
name="plus-circle"
|
<IconButton
|
||||||
outline
|
name="plus-circle"
|
||||||
subdued
|
outline
|
||||||
on:click={() => {
|
subdued
|
||||||
adding = true;
|
on:click={() => {
|
||||||
}}
|
adding = true;
|
||||||
/>
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{#if address}
|
||||||
|
<IconButton
|
||||||
|
outline
|
||||||
|
subdued
|
||||||
|
name="upload"
|
||||||
|
title={$i18n.t('Upload a file') || ''}
|
||||||
|
on:click={() => addEmitter.emit('destination', address || '')}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -318,7 +332,13 @@
|
||||||
|
|
||||||
.add {
|
.add {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
gap: 0.5em;
|
||||||
|
|
||||||
|
& .main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.entitylist.style-grid .add {
|
.entitylist.style-grid .add {
|
||||||
|
|
Loading…
Reference in a new issue