53 lines
1.4 KiB
Svelte
53 lines
1.4 KiB
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>
|