windmill/frontend/src/lib/components/apps/editor/settingsPanel/ComponentControl.svelte

<script lang="ts">
	import { ExternalLink } from "lucide-svelte"
	import PanelSection from "./common/PanelSection.svelte"
	import type { components } from "../component"
	import { getComponentControl } from '../componentsPanel/componentControlUtils'
	import { Highlight } from 'svelte-highlight'
	import typescript from 'svelte-highlight/languages/typescript'
	import { Button } from "$lib/components/common"
  export let type: keyof typeof components

  const componentControls = getComponentControl(type)

  let collapsed: boolean = true

</script>

{#if componentControls?.length > 0 }
  <PanelSection title="Controls" >

    <div slot="action" class="flex justify-end flex-wrap gap-1">
      <Button
        color="light"
        size="xs"
        variant="border"
        on:click={() => {
          collapsed = !collapsed
        
        }}
      >
        {collapsed ? "Show" : "Hide"} details
      </Button>
    </div>

    {#if collapsed}
      <div class="flex flex-row gap-1">
        {#each componentControls as control}
          <span class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium border">
            {control.title}
          </span>
        {/each}
      </div>
    {:else}
      <div class="text-xs">This component can be controlled by frontend scripts using these functions:</div>
      {#each componentControls as control}
        <div class="text-xs leading-6 font-semibold">
          {control.title}
        </div>
        <div class="text-xs">
          {control.description}
        </div>
        <div class="p-1 border w-full">
          <Highlight language={typescript} code={control.example} />
        </div>
      
        <a
          href={control.documentation}
          target="_blank"
          class="text-frost-500 dark:text-frost-300 font-semibold text-xs"
        >
          <div class="flex flex-row gap-2">
            See documentation
            <ExternalLink size="16" />
          </div>
        </a>
      
      {/each}  
    {/if}
  </PanelSection>
{/if}