phonograph/svelte/src/filter-menu.webc.svelte

<svelte:options
  customElement={{
    props: { initialValue: { attribute: "initial-value" } },
    shadow: "none",
    tag: "filter-menu",
  }}
/>

<script lang="ts">
  import BasicDropdown from "./basic-dropdown.webc.svelte";

  type Props = {
    initialValue?: string;
  };

  let { initialValue = "" }: Props = $props();

  let expr = $state(initialValue);
</script>

<div class="filter-menu toolbar-item">
  <BasicDropdown>
    <span slot="button-contents">Filter</span>
    <form action="set-filter" class="padded" method="post" slot="popover">
      <div class="form__label">Filter expression (SQL)</div>
      <textarea
        class="form__input"
        name="filter"
        rows="8"
        cols="60"
        placeholder="For example: LOWER(&quot;my_column&quot;) = 'hello world'"
        >{expr}</textarea
      >
      <div class="form__buttons">
        <input
          name="filter_expression"
          type="hidden"
          value={JSON.stringify(expr)}
        />
        <button class="button button--primary" type="submit">Apply</button>
      </div>
    </form>
  </BasicDropdown>
</div>