1<script> 2 import { _ } from "../i18n"; 3 4 /** @type {Record<string,unknown>} */ 5 export let meta; 6 7 $: metakeys = Object.keys(meta).filter( 8 (key) => !key.startsWith("_") && key !== "filename" && key !== "lineno" 9 ); 10 11 /** 12 * @param {string} metakey 13 */ 14 function removeMetadata(metakey) { 15 delete meta[metakey]; 16 meta = meta; 17 } 18 19 /** 20 * @param {string} currentKey 21 * @param {string} newKey 22 */ 23 function updateMetakey(currentKey, newKey) { 24 meta = Object.keys(meta).reduce(( 25 /** @type {Record<string,unknown>} */ m, 26 key 27 ) => { 28 if (key === currentKey) { 29 m[newKey] = meta[currentKey]; 30 } else { 31 m[key] = meta[key]; 32 } 33 return m; 34 }, {}); 35 } 36 37 function addMetadata() { 38 meta[""] = ""; 39 meta = meta; 40 } 41</script> 42 43{#each metakeys as metakey, i} 44 <div class="flex-row"> 45 <button 46 class="muted round remove-row" 47 on:click={() => removeMetadata(metakey)} 48 type="button" 49 tabindex={-1}> × </button> 50 <input 51 type="text" 52 class="key" 53 placeholder={_("Key")} 54 value={metakey} 55 on:change={(event) => { 56 updateMetakey(metakey, event.target.value); 57 }} 58 required 59 /> 60 <input 61 type="text" 62 class="value" 63 placeholder={_("Value")} 64 bind:value={meta[metakey]} 65 /> 66 {#if i === metakeys.length - 1} 67 <button 68 class="muted round" 69 type="button" 70 on:click={addMetadata} 71 title={_("Add metadata")}> + </button> 72 {/if} 73 </div> 74{/each} 75 76<style> 77 div { 78 padding-left: 56px; 79 font-size: 0.8em; 80 } 81 82 input.key { 83 width: 10em; 84 } 85 86 input.value { 87 flex-grow: 1; 88 max-width: 15em; 89 } 90 91 @media (max-width: 767px) { 92 div { 93 padding-left: 0; 94 } 95 } 96</style> 97