aura-glass/dist/esm/components/interactive/GlassQueryBuilder.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import { GlassButton } from '../button/GlassButton.js';
import { cn } from '../../lib/utilsComprehensive.js';
import { GlassSelect, GlassSelectTrigger, GlassSelectValue, GlassSelectContent, GlassSelectItem } from '../input/GlassSelectCompound.js';

function isGroup(x) {
  return x && Array.isArray(x.rules);
}
function GlassQueryBuilder({
  fields,
  value,
  onChange,
  className
}) {
  const update = group => onChange({
    ...group
  });
  const renderRule = (rule, idx, parent) => {
    const field = fields.find(f => f.id === rule.field) || fields[0];
    return jsxs("div", {
      "data-glass-component": true,
      className: "glass-flex glass-items-center glass-gap-2",
      children: [jsxs(GlassSelect, {
        value: rule.field,
        onValueChange: v => {
          rule.field = v;
          update(value);
        },
        children: [jsx(GlassSelectTrigger, {
          className: 'w-40 h-8 glass-text-sm',
          children: jsx(GlassSelectValue, {
            placeholder: "Field"
          })
        }), jsx(GlassSelectContent, {
          children: fields.map(f => jsx(GlassSelectItem, {
            value: f.id,
            children: f.label
          }, f.id))
        })]
      }), jsxs(GlassSelect, {
        value: rule.op,
        onValueChange: v => {
          rule.op = v;
          update(value);
        },
        children: [jsx(GlassSelectTrigger, {
          className: 'w-28 h-8 glass-text-sm',
          children: jsx(GlassSelectValue, {
            placeholder: "Op"
          })
        }), jsx(GlassSelectContent, {
          children: ["=", "!=", ">", ">=", "<", "<=", "contains"].map(op => jsx(GlassSelectItem, {
            value: op,
            children: op
          }, op))
        })]
      }), field.type === "select" ? jsxs(GlassSelect, {
        value: rule.value ?? "",
        onValueChange: v => {
          const next = v === "__clear__" ? "" : v;
          rule.value = next;
          update(value);
        },
        children: [jsx(GlassSelectTrigger, {
          className: 'w-48 h-8 glass-text-sm',
          children: jsx(GlassSelectValue, {
            placeholder: "Value"
          })
        }), jsxs(GlassSelectContent, {
          children: [jsx(GlassSelectItem, {
            value: "__clear__",
            children: "\u2014"
          }), field.options?.map(o => jsx(GlassSelectItem, {
            value: o.value,
            children: o.label
          }, o.value))]
        })]
      }) : jsx("input", {
        value: rule.value ?? "",
        onChange: e => {
          rule.value = e.target.value;
          update(value);
        },
        className: 'bg-transparent glass-border glass-border-white/20 glass-radius-md glass-px-2 glass-py-1 glass-text-sm glass-focus glass-touch-target glass-contrast-guard'
      }), jsx(GlassButton, {
        size: "sm",
        variant: "ghost",
        onClick: e => {
          parent.rules.splice(idx, 1);
          update(value);
        },
        children: "Remove"
      })]
    }, idx);
  };
  const renderGroup = (group, parent) => jsxs("div", {
    className: "glass-radius-xl glass-border glass-border-white/20 glass-p-3 glass-gap-2",
    children: [jsxs("div", {
      className: "glass-flex glass-items-center glass-gap-2",
      children: [jsxs(GlassSelect, {
        value: group.combinator,
        onValueChange: v => {
          group.combinator = v;
          update(value);
        },
        children: [jsx(GlassSelectTrigger, {
          className: 'w-24 h-8 glass-text-sm',
          children: jsx(GlassSelectValue, {})
        }), jsxs(GlassSelectContent, {
          children: [jsx(GlassSelectItem, {
            value: "AND",
            children: "AND"
          }), jsx(GlassSelectItem, {
            value: "OR",
            children: "OR"
          })]
        })]
      }), jsx(GlassButton, {
        size: "sm",
        variant: "secondary",
        onClick: e => {
          group.rules.push({
            field: fields[0].id,
            op: "=",
            value: ""
          });
          update(value);
        },
        children: "+ Rule"
      }), jsx(GlassButton, {
        size: "sm",
        variant: "ghost",
        onClick: e => {
          group.rules.push({
            combinator: "AND",
            rules: []
          });
          update(value);
        },
        children: "+ Group"
      }), parent && jsx(GlassButton, {
        size: "sm",
        variant: "ghost",
        onClick: e => {
          parent.rules.splice(parent.rules.indexOf(group), 1);
          update(value);
        },
        children: "Remove"
      })]
    }), jsx("div", {
      className: "glass-gap-2",
      children: group.rules.map((r, i) => isGroup(r) ? jsx("div", {
        children: renderGroup(r, group)
      }, i) : renderRule(r, i, group))
    })]
  });
  return jsx("div", {
    className: cn("glass-gap-2", className),
    children: renderGroup(value)
  });
}

export { GlassQueryBuilder, GlassQueryBuilder as default };
//# sourceMappingURL=GlassQueryBuilder.js.map