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

<svelte:options
  customElement={{
    props: {
      identifier_hints: { attribute: "identifier-hints", type: "Array" },
      initialValue: { attribute: "initial-value", type: "Object" },
    },
    shadow: "none",
    tag: "filter-menu",
  }}
/>

<script lang="ts">
  import { type PgExpressionAny } from "./expression.svelte";
  import BasicDropdown from "./basic-dropdown.webc.svelte";
  import ExpressionEditor from "./expression-editor.webc.svelte";

  type Props = {
    identifier_hints?: string[];
    initialValue?: PgExpressionAny | null;
  };

  let { identifier_hints = [], initialValue }: Props = $props();

  let expr = $state<PgExpressionAny | undefined>(initialValue ?? undefined);

  function handle_clear_button_click() {
    expr = undefined;
  }
</script>

<div class="filter-menu toolbar-item">
  <BasicDropdown>
    <span slot="button-contents">Filter</span>
    <form action="set-filter" class="padded" method="post" slot="popover">
      <ExpressionEditor bind:value={expr} {identifier_hints} />
      <div class="form__buttons">
        <input
          name="filter_expression"
          type="hidden"
          value={JSON.stringify(expr)}
        />
        <button
          class="button button--secondary"
          onclick={handle_clear_button_click}
          type="button"
        >
          Clear
        </button>
        <button class="button button--primary" type="submit">Apply</button>
      </div>
    </form>
  </BasicDropdown>
</div>