Accordion container

package.json

@@ -33,6 +33,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@gradio/accordion": "workspace:*",
     "@gradio/atoms": "workspace:*",
     "@gradio/button": "workspace:*",
     "@gradio/client": "workspace:*",

pnpm-lock.yaml

@@ -4,6 +4,9 @@ importers:
 
   .:
     dependencies:
+      '@gradio/accordion':
+        specifier: workspace:*
+        version: link:gradio/js/accordion
       '@gradio/atoms':
         specifier: workspace:*
         version: link:gradio/js/atoms

src/lib/components/AccordionContainer.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+ import { Block, BlockTitle } from "@gradio/atoms";
+ import { Accordion } from "@gradio/accordion";
+ import uiState from "$lib/stores/uiState";
+ import WidgetContainer from "./WidgetContainer.svelte"
+
+ import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
+
+ import {fade} from 'svelte/transition';
+ // notice - fade in works fine but don't add svelte's fade-out (known issue)
+ import {cubicIn} from 'svelte/easing';
+ import { flip } from 'svelte/animate';
+ import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
+ import { startDrag, stopDrag } from "$lib/utils"
+ import type { Writable } from "svelte/store";
+
+ export let container: ContainerLayout | null = null;
+ export let zIndex: number = 0;
+ export let classes: string[] = [];
+ export let showHandles: boolean = false;
+ export let edit: boolean = false;
+ export let dragDisabled: boolean = false;
+
+ let attrsChanged: Writable<boolean> | null = null;
+ let children: IDragItem[] | null = null;
+ const flipDurationMs = 100;
+
+ let selectedIndex: number = 0;
+
+ $: if (container) {
+     children = $layoutState.allItems[container.id].children;
+     attrsChanged = container.attrsChanged
+ }
+ else {
+     children = null;
+     attrsChanged = null
+ }
+
+ function handleConsider(evt: any) {
+     children = layoutState.updateChildren(container, evt.detail.items)
+     // console.log(dragItems);
+ };
+
+ function handleFinalize(evt: any) {
+     children = layoutState.updateChildren(container, evt.detail.items)
+     // Ensure dragging is stopped on drag finish
+ };
+</script>
+
+{#if container && children}
+    <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')} z-index{zIndex}"
+         class:hide-block={container.attrs.blockVariant === "hidden"}
+         class:selected={$uiState.uiUnlocked && $layoutState.currentSelection.includes(container.id)}
+         class:root-container={zIndex === 0}
+         class:is-executing={container.isNodeExecuting}
+         class:edit={edit}>
+        {#if edit}
+            <Block>
+                <Accordion label={container.attrs.title} open={true}>
+                    <div class="v-pane"
+                         class:empty={children.length === 0}
+                         class:edit={edit}
+                         use:dndzone="{{
+                             items: children,
+                             flipDurationMs,
+                             centreDraggedOnCursor: true,
+                             morphDisabled: true,
+                             dropFromOthersDisabled: zIndex === 0,
+                             dragDisabled
+                                      }}"
+                         on:consider="{handleConsider}"
+                         on:finalize="{handleFinalize}"
+                    >
+                        {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
+                            {@const hidden = item?.attrs?.hidden}
+                            <div class="animation-wrapper"
+                                 class:hidden={hidden}
+                                 animate:flip={{duration:flipDurationMs}}
+                                 style={item?.attrs?.flexGrow ? `flex-grow: ${item.attrs.flexGrow}` : ""}
+                            >
+                                <WidgetContainer dragItem={item} zIndex={zIndex+1} />
+                                {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
+                                    <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                                {/if}
+                            </div>
+                        {/each}
+                    </div>
+                    {#if container.attrs.hidden && edit}
+                        <div class="handle handle-hidden" class:hidden={!edit} style="z-index: {zIndex+100}"/>
+                    {/if}
+                    {#if showHandles}
+                        <div class="handle handle-container" style="z-index: {zIndex+100}" data-drag-item-id={container.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
+                    {/if}
+                </Accordion>
+            </Block>
+        {:else}
+            <Block>
+                <Accordion label={container.attrs.title} open={container.attrs.openOnStartup}>
+                    {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
+                        <WidgetContainer dragItem={item} zIndex={zIndex+1} />
+                    {/each}
+                </Accordion>
+            </Block>
+        {/if}
+    </div>
+{/if}
+
+<style lang="scss">
+ .container {
+     > :global(*) {
+         border-radius: 0;
+     }
+
+     :global(.v-pane > .block) {
+         height: fit-content;
+     }
+
+     .edit > :global(.v-pane > .block) {
+         border-color: var(--color-pink-500);
+         border-width: 2px;
+         border-style: dashed !important;
+         margin: 0.2em;
+         padding: 1.4em;
+     }
+
+     /* :global(.hide-block > .v-pane > .block) {
+        padding: 0.5em 0.25em;
+        box-shadow: unset;
+        border-width: 0;
+        border-color: unset;
+        border-radius: unset;
+        background: var(--block-background-fill);
+        width: 100%;
+        line-height: var(--line-sm);
+        } */
+
+     &.horizontal {
+         flex-wrap: wrap;
+         gap: var(--layout-gap);
+         width: var(--size-full);
+
+         > :global(.block > .v-pane) {
+             flex-direction: row;
+         }
+
+         > :global(*), > :global(.form > *) {
+             flex: 1 1 0%;
+             flex-wrap: wrap;
+             min-width: min(160px, 100%);
+         }
+     }
+
+     &.vertical {
+         position: relative;
+
+         > :global(.block > .v-pane) {
+             flex-direction: column;
+         }
+
+         > :global(*), > :global(.form > *), .v-pane {
+             width: var(--size-full);
+         }
+     }
+ }
+
+ .handle {
+     cursor: grab;
+     z-index: 99999;
+     position: absolute;
+     right: 0;
+     top: 0;
+     width: 100%;
+     height: 100%;
+ }
+
+ .animation-wrapper {
+     position: relative;
+     flex-grow: 100;
+ }
+
+ .handle-widget:hover {
+     background-color: #add8e680;
+ }
+
+ .handle-container:hover {
+     background-color: #d8ade680;
+ }
+
+ .container.selected > :global(.block) {
+     background: var(--color-yellow-300);
+ }
+</style>

src/lib/components/Container.svelte

@@ -3,6 +3,7 @@
  import uiState from "$lib/stores/uiState";
  import WidgetContainer from "./WidgetContainer.svelte"
  import BlockContainer from "./BlockContainer.svelte"
+ import AccordionContainer from "./AccordionContainer.svelte"
  import TabsContainer from "./TabsContainer.svelte"
 
  import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
@@ -34,6 +35,8 @@
     {#key $attrsChanged}
         {#if container.attrs.variant === "tabs"}
             <TabsContainer {container} {zIndex} {classes} {showHandles} {edit} {dragDisabled} />
+        {:else if container.attrs.variant === "accordion"}
+            <AccordionContainer {container} {zIndex} {classes} {showHandles} {edit} {dragDisabled} />
         {:else}
             <BlockContainer {container} {zIndex} {classes} {showHandles} {edit} {dragDisabled} />
         {/if}

src/lib/components/TabsContainer.svelte

@@ -47,13 +47,15 @@
  };
 
  function getTabName(container: ContainerLayout, i: number): string {
-     const tabNames = container.attrs.tabNames
+     const title = container.attrs.title
-     if (!tabNames)
+     if (!title)
-         return `Tab ${i}`
+         return `Tab ${i+1}`
+
+     const tabNames = title.split(",").map(s => s.trim());
 
      const tabName = tabNames[i]
      if (tabName == null || tabName === "")
-         return `Tab ${i}`
+         return `Tab ${i+1}`
 
      return tabName
  }
@@ -68,9 +70,6 @@
          class:edit={edit}>
         {#if edit}
             <Block>
-                {#if container.attrs.title && container.attrs.title !== ""}
-                    <BlockTitle show_label={true}>{container.attrs.title}</BlockTitle>
-                {/if}
                 <div class="v-pane"
                      class:empty={children.length === 0}
                      class:edit={edit}

src/lib/stores/layoutState.ts

@@ -40,7 +40,7 @@ export type Attributes = {
     /** Display variant for widgets/containers (e.g. number widget can act as slider/knob/dial) */
     variant?: string,
 
-    tabNames?: string[]
+    openOnStartup?: boolean
 }
 
 export type AttributesSpec = {
@@ -135,18 +135,6 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 canShow: (di: IDragItem) => di.type === "container",
                 refreshPanelOnChange: true
             },
-
-            {
-                name: "tabNames",
-                type: "string",
-                location: "widget",
-                editable: true,
-                defaultValue: ["Tab 1", "Tab 2", "Tab 3"],
-                canShow: (di: IDragItem) => di.type === "container" && di.attrs.variant === "tabs",
-                serialize: serializeStringArray,
-                deserialize: deserializeStringArray
-            },
-
             {
                 name: "blockVariant",
                 type: "enum",
@@ -156,6 +144,16 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 defaultValue: "block",
                 canShow: (di: IDragItem) => di.type === "container"
             },
+
+            // Accordion
+            {
+                name: "openOnStartup",
+                type: "boolean",
+                location: "widget",
+                editable: true,
+                defaultValue: false,
+                canShow: (di: IDragItem) => di.type === "container" && di.attrs.variant === "accordion"
+            },
         ]
     },
     {

vite.config.ts

@@ -11,9 +11,10 @@ export default defineConfig({
         FullReload([
             // "src/**/*.{js,ts,scss,svelte}"
             "src/**/*.{scss}",
+            "src/lib/stores/*.*",
             "src/**/ComfyApp.{ts,svelte}"
         ]),
-        svelte(), ,
+        svelte(),
         viteStaticCopy({
             targets: [
                 {