44 lines
1.1 KiB
Svelte
44 lines
1.1 KiB
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("my_column") = '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>
|