File size: 2,155 Bytes
8fdc036 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 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 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { MarkdownCode } from "@gradio/markdown";
export let edit: boolean;
export let value: string | number = "";
export let display_value: string | null = null;
export let styling = "";
export let header = false;
export let datatype:
| "str"
| "markdown"
| "html"
| "number"
| "bool"
| "date" = "str";
export let latex_delimiters: {
left: string;
right: string;
display: boolean;
}[];
export let clear_on_focus = false;
export let select_on_focus = false;
export let line_breaks = true;
export let editable = true;
const dispatch = createEventDispatcher();
export let el: HTMLInputElement | null;
$: _value = value;
function use_focus(node: HTMLInputElement): any {
if (clear_on_focus) {
_value = "";
}
if (select_on_focus) {
node.select();
}
node.focus();
return {};
}
function handle_blur({
currentTarget
}: Event & {
currentTarget: HTMLInputElement;
}): void {
value = currentTarget.value;
dispatch("blur");
}
</script>
{#if edit}
<input
role="textbox"
bind:this={el}
bind:value={_value}
class:header
tabindex="-1"
on:blur={handle_blur}
use:use_focus
on:keydown
/>
{/if}
<span
on:dblclick
tabindex="-1"
role="button"
class:edit
on:focus|preventDefault
style={styling}
>
{#if datatype === "html"}
{@html value}
{:else if datatype === "markdown"}
<MarkdownCode
message={value.toLocaleString()}
{latex_delimiters}
{line_breaks}
chatbot={false}
/>
{:else}
{editable ? value : display_value || value}
{/if}
</span>
<style>
input {
position: absolute;
top: var(--size-2);
right: var(--size-2);
bottom: var(--size-2);
left: var(--size-2);
flex: 1 1 0%;
transform: translateX(-0.1px);
outline: none;
border: none;
background: transparent;
}
span {
flex: 1 1 0%;
outline: none;
padding: var(--size-2);
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.header {
transform: translateX(0);
font: var(--weight-bold);
}
.edit {
opacity: 0;
pointer-events: none;
}
</style>
|