FilterBuilder

import '@bluui/web/styles.css'

import { createFilterBuilder } from "@bluui/web";
export function mount(host: HTMLElement) {
  const output = document.createElement("pre");
  host.append(output);
  const filter = createFilterBuilder(
    host,
    {
      Fields: [
        { Key: "name", Label: "Customer name", DataType: "Text" },
        { Key: "revenue", Label: "Revenue", DataType: "Number" },
      ],
      Filter: {
        combinator: "and",
        rules: [{ field: "revenue", operator: "gte", value: 1000 }],
      },
    },
    {
      Apply: (value) => {
        output.textContent = JSON.stringify(value, null, 2);
      },
    },
  );
  // Validate this structured filter on your server before constructing a database query.
  return {
    destroy() {
      filter.destroy();
      output.remove();
    },
  };
}

const instance = mount(document.getElementById('example')!)

// When this page or framework component is removed:
// instance.destroy()