6 changed files with 67 additions and 17 deletions
@ -1,25 +1,33 @@ |
|||||||
<script> |
<script> |
||||||
import { name } from '../../vcard.js'; |
import LineEditor from '../../Components/LineEditor.svelte'; |
||||||
|
import { name } from '../../vcard.js'; |
||||||
|
import { t } from '../../translations.svelte'; |
||||||
|
|
||||||
let { vcard } = $props(); |
let { code, patch = (from, to) => true } = $props(); |
||||||
|
|
||||||
let n = $derived(name(vcard)); |
let n = $derived(name(code)); |
||||||
|
|
||||||
|
function onSet(oldVal,newVal){ |
||||||
|
console.log(`onset(${oldVal} → ${newVal})`); |
||||||
|
const newCode = code.replace(oldVal,newVal); |
||||||
|
return patch(code,newCode); |
||||||
|
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<div class="name"> |
<div class="name"> |
||||||
{#if n.prefix} |
{#if n.prefix} |
||||||
<span class="prefix">{n.prefix}</span> |
<LineEditor type="span" editable={true} value={n.prefix} onSet={newVal => onSet(n.prefix,newVal)} title={t('name_prefix')} /> |
||||||
{/if} |
{/if} |
||||||
{#if n.given} |
{#if n.given} |
||||||
<span class="given">{n.given}</span> |
<LineEditor type="span" editable={true} value={n.given} onSet={newVal => onSet(n.given,newVal)} title={t('given_name')} /> |
||||||
{/if} |
{/if} |
||||||
{#if n.additional} |
{#if n.additional} |
||||||
<span class="additional">{n.additional}</span> |
<LineEditor type="span" editable={true} value={n.additional} onSet={newVal => onSet(n.additional,newVal)} title={t('additional_name')} /> |
||||||
{/if} |
{/if} |
||||||
{#if n.family} |
{#if n.family} |
||||||
<span class="family">{n.family}</span> |
<LineEditor type="span" editable={true} value={n.family} onSet={newVal => onSet(n.family,newVal)} title={t('family_name')} /> |
||||||
{/if} |
{/if} |
||||||
{#if n.suffix} |
{#if n.suffix} |
||||||
<span class="suffix">{n.suffix}</span> |
<LineEditor type="span" editable={true} value={n.suffix} onSet={newVal => onSet(n.suffix,newVal)} title={t('<name_suffix></name_suffix>')} /> |
||||||
{/if} |
{/if} |
||||||
</div> |
</div> |
||||||
Loading…
Reference in new issue