Checkbox widget
This commit is contained in:
55
src/lib/widgets/CheckboxWidget.svelte
Normal file
55
src/lib/widgets/CheckboxWidget.svelte
Normal file
@@ -0,0 +1,55 @@
|
||||
<script lang="ts">
|
||||
import type { ComfyCheckboxNode } from "$lib/nodes/ComfyWidgetNodes";
|
||||
import { type WidgetLayout } from "$lib/stores/layoutState";
|
||||
import { Block } from "@gradio/atoms";
|
||||
import { Checkbox } from "@gradio/form";
|
||||
import { get, type Writable, writable } from "svelte/store";
|
||||
|
||||
export let widget: WidgetLayout | null = null;
|
||||
let node: ComfyCheckboxNode | null = null;
|
||||
let nodeValue: Writable<boolean> | null = null;
|
||||
let attrsChanged: Writable<boolean> | null = null;
|
||||
|
||||
$: widget && setNodeValue(widget);
|
||||
|
||||
function setNodeValue(widget: WidgetLayout) {
|
||||
if (widget) {
|
||||
node = widget.node as ComfyCheckboxNode
|
||||
nodeValue = node.value;
|
||||
attrsChanged = widget.attrsChanged;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="wrapper gradio-checkbox">
|
||||
<div class="inner">
|
||||
{#key $attrsChanged}
|
||||
{#if node !== null}
|
||||
<Block>
|
||||
<Checkbox disabled={widget.attrs.disabled} label={widget.attrs.title} bind:value={$nodeValue} />
|
||||
</Block>
|
||||
{/if}
|
||||
{/key}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
height: 100%;
|
||||
|
||||
> .inner {
|
||||
padding: 2px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: min-content;
|
||||
|
||||
:global(> label) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -114,6 +114,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
:global(.svelte-select) {
|
||||
width: auto;
|
||||
max-width: 30rem;
|
||||
}
|
||||
|
||||
:global(.svelte-select-list) {
|
||||
z-index: var(--layer-top) !important;
|
||||
}
|
||||
|
||||
@@ -73,10 +73,13 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
.wrapper {
|
||||
padding: 2px;
|
||||
width: 100%;
|
||||
|
||||
:global(> .block) {
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.padding {
|
||||
|
||||
Reference in New Issue
Block a user