File size: 3,247 Bytes
0bd62e5 |
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 125 126 127 128 129 130 |
<script lang="ts">
import type { Gradio } from "@gradio/utils";
import { Block, BlockTitle } from "@gradio/atoms";
import { StatusTracker } from "@gradio/statustracker";
import type { LoadingStatus } from "@gradio/statustracker";
import { afterUpdate, tick } from "svelte";
export let gradio: Gradio<{
change: never;
input: never;
submit: never;
blur: never;
focus: never;
clear_status: LoadingStatus;
}>;
export let label = gradio.i18n("number.number");
export let info: string | undefined = undefined;
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let container = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let value = 0;
export let show_label: boolean;
export let minimum: number | undefined = undefined;
export let maximum: number | undefined = undefined;
export let loading_status: LoadingStatus;
export let value_is_output = false;
export let step: number | null = null;
export let interactive: boolean;
function handle_change(): void {
if (!isNaN(value) && value !== null) {
gradio.dispatch("change");
if (!value_is_output) {
gradio.dispatch("input");
}
}
}
afterUpdate(() => {
value_is_output = false;
});
async function handle_keypress(e: KeyboardEvent): Promise<void> {
await tick();
if (e.key === "Enter") {
e.preventDefault();
gradio.dispatch("submit");
}
}
$: value, handle_change();
$: disabled = !interactive;
</script>
<Block
{visible}
{elem_id}
{elem_classes}
padding={container}
allow_overflow={false}
{scale}
{min_width}
>
<StatusTracker
autoscroll={gradio.autoscroll}
i18n={gradio.i18n}
{...loading_status}
on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
/>
<label class="block" class:container>
<BlockTitle {show_label} {info}>{label}</BlockTitle>
<input
aria-label={label}
type="number"
bind:value
min={minimum}
max={maximum}
{step}
on:keypress={handle_keypress}
on:blur={() => gradio.dispatch("blur")}
on:focus={() => gradio.dispatch("focus")}
{disabled}
/>
</label>
</Block>
<style>
label:not(.container),
label:not(.container) > input {
height: 100%;
border: none;
}
.container > input {
border: var(--input-border-width) solid var(--input-border-color);
border-radius: var(--input-radius);
}
input[type="number"] {
display: block;
position: relative;
outline: none !important;
box-shadow: var(--input-shadow);
background: var(--input-background-fill);
padding: var(--input-padding);
width: 100%;
color: var(--body-text-color);
font-size: var(--input-text-size);
line-height: var(--line-sm);
}
input:disabled {
-webkit-text-fill-color: var(--body-text-color);
-webkit-opacity: 1;
opacity: 1;
}
input:focus {
box-shadow: var(--input-shadow-focus);
border-color: var(--input-border-color-focus);
}
input::placeholder {
color: var(--input-placeholder-color);
}
input:out-of-range {
border: var(--input-border-width) solid var(--error-border-color);
}
</style>
|