FilterDisplay.svelte raw

   1  <script>
   2      import { createEventDispatcher } from "svelte";
   3      import { prettyPrintFilter } from "./helpers.tsx";
   4      
   5      const dispatch = createEventDispatcher();
   6  
   7      export let filter = {};
   8      export let showFilter = true;
   9  
  10      $: filterJson = prettyPrintFilter(filter);
  11      $: hasFilter = Object.keys(filter).length > 0;
  12  
  13      function handleSweep() {
  14          dispatch("sweep");
  15      }
  16  </script>
  17  
  18  {#if showFilter && hasFilter}
  19      <div class="filter-display">
  20          <div class="filter-display-header">
  21              <h3>Active Filter</h3>
  22              <button class="sweep-btn" on:click={handleSweep} title="Clear filter">
  23                  🧹 Sweep
  24              </button>
  25          </div>
  26          <div class="filter-json-container">
  27              <pre class="filter-json">{filterJson}</pre>
  28          </div>
  29      </div>
  30  {/if}
  31  
  32  <style>
  33      .filter-display {
  34          background: var(--card-bg);
  35          border: 1px solid var(--border-color);
  36          border-radius: 8px;
  37          margin: 1em;
  38          overflow: hidden;
  39      }
  40  
  41      .filter-display-header {
  42          display: flex;
  43          justify-content: space-between;
  44          align-items: center;
  45          padding: 0.75em 1em;
  46          background: var(--bg-color);
  47          border-bottom: 1px solid var(--border-color);
  48      }
  49  
  50      .filter-display-header h3 {
  51          margin: 0;
  52          font-size: 1em;
  53          font-weight: 600;
  54          color: var(--text-color);
  55      }
  56  
  57      .sweep-btn {
  58          background: var(--danger);
  59          color: var(--text-color);
  60          border: none;
  61          padding: 0.5em 1em;
  62          border-radius: 4px;
  63          cursor: pointer;
  64          font-size: 0.9em;
  65          font-weight: 600;
  66          transition: all 0.2s;
  67      }
  68  
  69      .sweep-btn:hover {
  70          filter: brightness(0.9);
  71          transform: translateY(-1px);
  72          box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3);
  73      }
  74  
  75      .filter-json-container {
  76          padding: 1em;
  77          max-height: 200px;
  78          overflow: auto;
  79      }
  80  
  81      .filter-json {
  82          background: var(--code-bg);
  83          padding: 1em;
  84          border-radius: 4px;
  85          font-family: 'Courier New', Courier, monospace;
  86          font-size: 0.85em;
  87          line-height: 1.5;
  88          color: var(--code-text);
  89          margin: 0;
  90          white-space: pre-wrap;
  91          word-wrap: break-word;
  92          word-break: break-all;
  93          overflow-wrap: anywhere;
  94      }
  95  
  96      /* Custom scrollbar for json container */
  97      .filter-json-container::-webkit-scrollbar {
  98          width: 8px;
  99          height: 8px;
 100      }
 101  
 102      .filter-json-container::-webkit-scrollbar-track {
 103          background: var(--bg-color);
 104      }
 105  
 106      .filter-json-container::-webkit-scrollbar-thumb {
 107          background: var(--border-color);
 108          border-radius: 4px;
 109      }
 110  
 111      .filter-json-container::-webkit-scrollbar-thumb:hover {
 112          background: var(--primary);
 113      }
 114  </style>
 115  
 116