@spaethtech/svelte-ui 0.7.1-dev.37.ab40d6b → 0.7.1-dev.38.b73de30

package/dist/components/Query.svelte

@@ -268,22 +268,42 @@
     <div>
       <h4 class="mb-1 font-semibold">Dynamic dates</h4>
       <p class="mb-1 text-xs [color:color-mix(in_srgb,var(--ui-color-text)_70%,transparent)]">
-        <code class="font-mono">now()</code> is the current time; add a signed offset
-        <code class="font-mono">now()±&lt;n&gt;&lt;unit&gt;</code> — units <code>s m h d w</code>
-        (e.g. <code>now()-7d</code>, <code>now()+1h</code>). Resolved when the query runs.
+        <code class="font-mono">now()</code> is the current time, resolved when the query runs. Add a
+        signed offset <code class="font-mono">now()±&lt;n&gt;&lt;unit&gt;</code> — units
+        <code>s</code> <code>m</code> <code>h</code> <code>d</code> <code>w</code>. Great with a date
+        column and <code>&gt;=</code>/<code>&lt;</code> or a range.
       </p>
+      <table class="w-full text-left">
+        <tbody
+          class="[&_td]:py-0.5 [&_td:first-child]:whitespace-nowrap [&_td:first-child]:pr-4 [&_td:first-child]:font-mono [&_td:last-child]:text-xs [&_td:last-child]:[color:color-mix(in_srgb,var(--ui-color-text)_65%,transparent)]"
+        >
+          <tr><td>$created &gt;= now()-7d</td><td>in the last 7 days</td></tr>
+          <tr><td>$expires &lt; now()</td><td>already expired</td></tr>
+          <tr><td>$due |= [now()..now()+30d]</td><td>due within 30 days</td></tr>
+        </tbody>
+      </table>
     </div>
     <div>
       <h4 class="mb-1 font-semibold">Examples</h4>
-      <pre
-        class="overflow-x-auto rounded p-2 font-mono text-xs [background-color:color-mix(in_srgb,var(--ui-color-text)_6%,transparent)]"><code
-          >$status == active
-$email ~= /@gmail\.com$/i
-$price |= [20..50) && $role |= [admin, ops]
-$created >= now()-7d && $status == open
-$ip|inet |= [10.0.0.0|inet..10.255.255.255|inet]
-"lemon balm" || $featured == true</code
-        ></pre>
+      <table class="w-full text-left">
+        <tbody
+          class="[&_td]:py-0.5 [&_td:first-child]:whitespace-nowrap [&_td:first-child]:pr-4 [&_td:first-child]:font-mono [&_td:last-child]:text-xs [&_td:last-child]:[color:color-mix(in_srgb,var(--ui-color-text)_65%,transparent)]"
+        >
+          <tr><td>$status == active</td><td>exact match</td></tr>
+          <tr><td>$name ^= Ada</td><td>starts with “Ada”</td></tr>
+          <tr><td>$email ~= @gmail.com</td><td>contains substring</td></tr>
+          <tr><td>$email ~= /@gmail\.com$/i</td><td>regex, case-insensitive</td></tr>
+          <tr><td>$age &gt;= 30</td><td>numeric compare</td></tr>
+          <tr><td>$age |= [21..40)</td><td>range — 21 ≤ age &lt; 40</td></tr>
+          <tr><td>$role |= [admin, ops]</td><td>any of a set</td></tr>
+          <tr><td>$tags &amp;= [urgent, vip]</td><td>all of (multi-value column)</td></tr>
+          <tr><td>$created &gt;= now()-7d</td><td>dynamic date (last 7 days)</td></tr>
+          <tr><td>$ip|inet &gt;= 10.0.0.0|inet</td><td>typed IP compare</td></tr>
+          <tr><td>!($role == admin)</td><td>negate a group</td></tr>
+          <tr><td>$status == open &amp;&amp; $priority &gt;= 3</td><td>combine with &amp;&amp; / ||</td></tr>
+          <tr><td>"lemon balm"</td><td>free-text search (no $)</td></tr>
+        </tbody>
+      </table>
     </div>
     <p class="text-xs [color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]">
       Tip: type <kbd class="rounded border px-1 {bc}">$</kbd> for columns; enum columns suggest

package/docs/components.md

@@ -232,7 +232,8 @@ Config-driven, responsive 12-column data table over a `DataGrid`.
 ### Query
 
 Filter bar over a `DataSet` — monospace input with `$column` + enum-value autocomplete and a help
-dialog.
+dialog (operators, casts, dynamic `now()` dates, and a worked examples table). The DSL supports
+`now()` / `now()±<n><unit>` dynamic dates — see the help dialog + the data spec.
 
 - **Location**: `src/lib/components/Query.svelte`
 - **Props**: `dataset` (`DataSet`), `placeholder`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.7.1-dev.37.ab40d6b",
+  "version": "0.7.1-dev.38.b73de30",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"